我开始学习 AngularJS 并尝试制作一个具有多个 View 的非常简单的骨架应用程序。我使用 Flask 作为后端。
问题:当我加载页面时，它没有显示适当的 View - 我得到一个空白页面。
相关的文件夹结构是这样的:
app/
| static/
| | js/
| | | app.js
| | | controllers.js
| | partials/
| | | landing.html
| templates/
| | index.html
| views/
| | views.py
基本上我的index.html看起来像这样:
<!DOCTYPE html>
<html>
<head lang="en" ng-app="MyApp">
<meta charset="UTF-8">
<title>My App</title>
<link href="{{ url_for('static', filename='semantic/semantic.min.css') }}" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-resource.min.js"></script>
<script src="{{ url_for('static', filename='semantic/semantic.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
<script src="{{ url_for('static', filename='js/controllers.js') }}"></script>
</head>
<body>
<div id="content" ng-view></div>
</body>
</html>
我的Python索引函数:
@app.route('/')
@app.route('/index')
def index():
return make_response(render_template('index.html'))
我的“app.js”:
'use strict';
angular.module('MyApp', ['ngRoute'])
.config(['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'static/partials/landing.html',
controller: IndexController
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
而我的 Controllers.js 中的 IndexController 不执行任何操作:
'use strict';
/* Controllers */
function IndexController($scope) {
}
landing.html 文件仅包含一些文本。
我哪里出了问题？我得到的只是一个空白页。我注意到，如果我在 templateUrl: path/to/landing.html 中放置任何路径，它不会提示或抛出任何错误，所以我不确定这是引用这些文件的正确方法。是否可以在这里使用flask url_for 函数？
编辑
我尝试直接使用模板而不是模板 URL。所以我有
.....
.when('/', {
template: 'Hello',
controller: IndexController
})
....
这仍然给我一个空白页。
最佳答案
将您的 ng-app 移至 body 标记，如下所示:
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>My App</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-resource.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="MyApp">
<div id="content" ng-view></div>
</body>
</html>
注册模块
var app = angular.module('MyApp', ['ngRoute']);
app.controller('IndexController', ['$scope', function($scope){
$scope.title = "Home Page";
}]);
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/', {
controller : 'IndexController',
templateUrl : 'landing.html'
})
.otherwise({
redirectTo : '/'
});
}]);
然后它应该可以工作，Angular 现在正在 head 标签内查找 ng-view，但它不在那里。另一种选择是将其放在 html 标签上。
关于javascript - AngularJS View 未加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29822056/