如何获得角瓶的应用程序加载HTML谐音？ [英] How to get Angular-Flask app to load html partials?
问题描述
我试图让我的角瓶应用呈现在基本的html文件部分HTML文件。该应用程序加载基本HTML（窗口标题和页脚负载），但是对于NG-视图什么负荷。也许我的角度路由谐音是不正确的？
文件结构
- ＆GT; flaskapp
- ＆GT;静
- ＆GT; JS
- ＆GT; appController.js
- ＆GT; routing.js
- ＆GT; homeController.js
...
- ＆GT;的意见
- ＆GT;家
- ＆GT; __ init__.py
...
- ＆GT;模板
- ＆GT;谐音
- ＆GT; home.html做为
...
- ＆GT; base.html文件
家庭
MOD =蓝图（'家'，__name__）@ mod.route（/）
高清指数（）：
返回render_template（'main.html中）
base.html文件
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=FlaskApp＆GT;
＆LT; HEAD＆GT;
＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\"></script>
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js＆GT;＆下; /脚本＆GT;
＆LT;脚本src=\"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js\"></script>
＆LT;脚本的src = /静态/ JS / appController.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src = /静态/ JS / homeController.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src = /静态/ JS / bootstrap.js＆GT;＆LT; / SCRIPT＆GT; {％块头％}
＆LT;间的charset =UTF-8＆GT;
＆LT;标题＆GT; {％块标题％} {％端块％} - 瓶POC＆LT; /标题＆GT;
{％端块％}
＆LT; /头＆GT;＆LT;身体GT;
＆LT; DIV NG控制器=AppController的＆GT;
＆LT; DIV NG-视图＆gt;
＆LT; / DIV＆GT;
＆LT; BR /＆GT;
＆LT; DIV ID =页脚＆GT;
{％块页脚％}
＆安培;复印件; 2014年版权所有
{％端块％}
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
home.html的
＆LT; P＆GT;只是一些随机文字＆lt; / P＆GT;
appController.js
使用严格的;
VAR应用= angular.module（'FlaskApp'，['ngRoute']）;app.controller（'AppController的'，函数（$范围）{}）;
homeController.js
使用严格的;VAR应用= angular.module（'FlaskApp'）;app.controller（HomeController中'，函数（）{}）;
routing.js
使用严格的;VAR应用= angular.module（'FlaskApp'）;的app.config（函数（$ routeProvider）{
$ routeProvider.when（'/'，{
templateURL：'谐音/ home.html做为'，
控制器：HomeController的
}）否则（{redirectTo：'/'}）;
}）;
有谁知道为什么我不能得到谐音加载？
非常感谢。
尝试
- 改变templateURL到：
- /partials/home.html
- ../谐音/ home.html做为
- 静态/谐音/ home.html做为
- /static/partials/home.html
- ../静态/谐音/ home.html做为
如果有帮助，这是我一直在关注本教程的链接： http://blog.pangyanhan.com/posts/2013-08-27-ngtut.html
- 感动base.html文件到文件夹的静态
瓶不符合从模板文件夹中的文件。如果你想保留 home.html的在那里，你将需要定义相匹配的网址，并提供该文件的路径。您可以使用此作为一个起点。
@ app.route（'/分/＆LT;路径：路径＆GT;'）
高清serve_partial（路径）：
返回render_template（'/分/ {}。格式（路径））
如果您不希望要创造这样一种观点，您还可以将部分模板到静态。如果你的目录结构看起来像
静
| ----局部
| | ---- home.html做为
你能够与访问模板
的app.config（函数（$ routeProvider）{
$ routeProvider.when（'/'，{
templateURL：/static/partials/home.html'，
控制器：HomeController的
}）否则（{redirectTo：'/'}）;
}）;
I am trying to get my Angular-Flask App to render partial HTML files in a base html file. The application loads the base html (Window Title and Footer load) but nothing loads for the ng-view. Perhaps my angular routing to the partials is not correct?
File Structure
->flaskapp
->static
->js
->appController.js
->routing.js
->homeController.js
...
->views
->home
->__init__.py
...
->templates
->partials
->home.html
...
->base.html
home
mod = Blueprint('home', __name__)
@mod.route('/')
def index():
return render_template('main.html')
base.html
<!DOCTYPE html>
<html ng-app="FlaskApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
<script src=/static/js/appController.js></script>
<script src=/static/js/homeController.js></script>
<script src=/static/js/bootstrap.js></script>
{% block head %}
<meta charset="UTF-8">
<title>{% block title %}{% endblock %} - Flask POC</title>
{% endblock %}
</head>
<body>
<div ng-controller="AppController">
<div ng-view>
</div>
<br />
<div id="footer">
{% block footer %}
© Copyright 2014
{% endblock %}
</div>
</body>
</html>
home.html
<p>Just some Random Text</p>
appController.js
'use strict';
var app = angular.module('FlaskApp', ['ngRoute']);
app.controller('AppController', function($scope){
});
homeController.js
'use strict';
var app = angular.module('FlaskApp');
app.controller('HomeController', function(){
});
routing.js
'use strict';
var app = angular.module('FlaskApp');
app.config(function($routeProvider){
$routeProvider.when('/', {
templateURL: 'partials/home.html',
controller: 'HomeController'
}).otherwise({ redirectTo: '/' });
});
Does anyone know why I cant get partials to load? Thanks a lot.
Attempts
- Changed templateURL to:
- /partials/home.html
- ../partials/home.html
- static/partials/home.html
- /static/partials/home.html
- ../static/partials/home.html
If it helps, here is the link of the tutorial I have been following: http://blog.pangyanhan.com/posts/2013-08-27-ngtut.html
- Moved base.html into the static folder
Flask doesn't serve files from the templates folder. If you wish to keep home.html in there, you will need to define a route that matches the URL and serves the file. You can use this as a starting point.
@app.route('/partial/<path:path>')
def serve_partial(path):
return render_template('/partial/{}'.format(path))
If you don't want to have to create such a view, you can also move the partial templates into static. If your directory structure looked like
static
|---- partial
| |---- home.html
you'd be able to access the template with
app.config(function($routeProvider){
$routeProvider.when('/', {
templateURL: '/static/partials/home.html',
controller: 'HomeController'
}).otherwise({ redirectTo: '/' });
});
这篇关于如何获得角瓶的应用程序加载HTML谐音？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
