AngularJS视图未加载答案

【问题标题】：AngularJS view not loadingAngularJS视图未加载
【发布时间】：2015-04-23 11:26:40
【问题描述】：

我开始学习 AngularJS 并尝试制作一个非常简单的具有多个视图的骨架应用程序。我正在使用 Flask 作为后端。

问题：当我加载页面时，它没有显示适当的视图 - 我得到一个空白页面。

相关文件夹结构如下：

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);
        }]);

而我的IndexController 在controllers.js 中什么都不做：

'use strict';

/* Controllers */

function IndexController($scope) {

}

landing.html 文件只包含一些文本。

我在哪里做错了？我得到的只是一个空白页面。我注意到如果我在templateUrl: path/to/landing.html 中放置任何路径，它不会抱怨或抛出任何错误，所以我不确定这是引用这些文件的正确方法。是否有可能在这里使用烧瓶url_for 功能？

编辑

我尝试直接使用模板而不是模板 URL。所以我有

.....
.when('/', {
             template: 'Hello',
             controller: IndexController
           })
 ....

这仍然给了我一个空白页。

【问题讨论】：

我没有那么多python知识，但是当你禁用html5mode并使用hashbang时会发生什么？ $locationProvider.html5Mode(false);使用 html5 模式时，后端需要将所有请求重定向到 Angular 页面（视图 html 页面除外）。
@erik 同样的事情 - 空白页
打开您的开发控制台并检查所有网络请求是否正常工作。也许您需要以不同方式提供静态文件或以不同方式访问它们。
您是否在某处注册了您的控制器？像 var app = angular.module('app',[]); app.controller('controllerName', controllerFunction);
@erik 其实我没有:)。我添加了注册，但我仍然得到相同的结果...

标签： javascript angularjs flask

【解决方案1】：

将你的 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 现在正在查看 ng-view 的 head 标签内，但它不存在。另一种选择是将其放在 html 标记上。

【讨论】：

谢谢你！当您尝试学习新事物时，有时简单的事情会让您受益。