AngularJS视图无法加载
问题描述:
我开始学习AngularJS,并尝试使用多个视图制作一个非常简单的骨架应用程序。我使用Flask作为后端。AngularJS视图无法加载
问题:当我加载页面时,它不显示相应的视图 - 我得到一个空白页面。
相关的文件夹结构是这样的:
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
中的任何路径,所以我不知道这是引用这些文件的正确方式。有没有可能以某种方式在这里使用烧瓶url_for
功能?
编辑
我试图用一个模板,而不是直接的模板URL。所以我有
.....
.when('/', {
template: 'Hello',
controller: IndexController
})
....
这仍然给我一个空白页。
答
移动你的NG-应用到你身上的标签,就像这样:
的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 : '/'
});
}]);
那么就应该工作,角度是现在里面看ng-view的头标签,但它不在那里。另一种选择是把它放在html标签上。
+0
谢谢你的男人!有时候,当你尝试学习新的东西时,简单的事情会让你感觉到。 – Iulian
我没有那么多的Python知识,但是当禁用html5mode并使用hashbang时发生了什么? $ locationProvider.html5Mode(假);当使用html5模式时,后端需要将所有请求重定向到角页面(html html页面除外)。 –
@erik同样的东西 - 空白页 – Iulian
打开您的开发控制台,并检查所有的网络请求是否正常工作。也许你需要以不同方式提供静态文件或以不同方式访问它们 – felixbr