Question

我开始学习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'))

我的＆＃39; app.js＆＃39;：

'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中添加任何路径，它不会抱怨或抛出任何错误，所以我不确定这是引用这些文件的正确方法。是否有可能以某种方式使用烧瓶..... .when('/', { template: 'Hello', controller: IndexController }) ....功能？

修改

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

jshint:all

这仍然是一个空白页面。

Answer 1

将你的ng-app移动到你的身体标签，如下所示：

的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的head标签内部，但它不在那里。另一种选择是将它放在html标签上。

AngularJS视图未加载

1 个答案: