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.jsIndexController它什么都不做：

'use strict'; 

/* Controllers */ 

function IndexController($scope) { 

}

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

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

编辑

我试图用一个模板，而不是直接的模板URL。所以我有

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

这仍然给我一个空白页。

来源

2015-04-23 Iulian

我没有那么多的Python知识，但是当禁用html5mode并使用hashbang时发生了什么？ $ locationProvider.html5Mode（假）;当使用html5模式时，后端需要将所有请求重定向到角页面（html html页面除外）。 –

@erik同样的东西 - 空白页 – Iulian

打开您的开发控制台，并检查所有的网络请求是否正常工作。也许你需要以不同方式提供静态文件或以不同方式访问它们 – felixbr

移动你的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标签上。

来源

2015-04-23 12:19:51

谢谢你的男人！有时候，当你尝试学习新的东西时，简单的事情会让你感觉到。 – Iulian

AngularJS视图无法加载

回答

相关问题