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視圖無法加載

回答

相關問題