AngularJS - 路由不起作用

我正在學習我正在構建的項目的角度js。AngularJS - 路由不起作用

到目前爲止，這似乎是一個很大的框架，非常有幫助的，直觀的，但我有問題，每當我試圖實現路由功能...

我有這樣的代碼：

<!DOCTYPE html> 
<html data-ng-app="myApp"> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 

    <script src="libs/angular.min.js"></script> 
    <script src="libs/angular-route.min.js"></script> 

    <script type="text/javascript"> 

     var app = angular.module('myApp', ['ngRoute']); 

     app.config(function ($routeProvider) { 

      $routeProvider.when('/', { 
       templateUrl: 'home.html', 
       controller: 'HomeController' 
      }).otherwise({ redirectTo: '/' }); 

     }); 

     app.controller('HomeController', function ($scope) { 

      $scope.people = [ 

       { 
        name: "Arik", 
        age: 19 
       }, 

       { 
        name: "Bar", 
        age: 19 
       } 

      ]; 

     }); 

    </script> 

</head> 
<body> 

    <div data-ng-view></div> 

</body> 
</html>

和home.html：

<ul> 

    <li data-ng-repeat="person in people"> 
     <b>{{ person.name }}</b> - {{ person.age }} 
    </li> 

</ul>

問題是它只是不起作用，頁面顯示空白。我試圖在官方文檔中搜索，但沒有任何幫助...

我在做什麼錯？

順便說一句，我使用的是最新版本，1.4.4

感謝，阿里克

來源

2015-08-22 areller

控制檯中的任何錯誤？ –

另請參閱開發工具的網絡選項卡。任何404錯誤（對於腳本或home.html頁面）？ –

很多，XMLHttpRequest無法加載，錯誤：未能在'XMLHttpRequest'上執行'發送'：加載失敗，錯誤：[$ compile：tpload] – areller

我只是測試你的代碼here和工作正常，可能是這個問題是在你的路徑home.html或你的網絡服務器或類似的東西，看看你的環境。

試用grunt-connect創造，而你正在開發一個Web服務器，這是非常有幫助的

此外，我建議你使用ui-router，更加簡單。 Here是在plunker與UI的路由器的路由工作模板

來源

2015-08-22 20:43:37 Matho

謝謝，正如JBNizet指出的那樣，問題是我試圖從本地目錄運行項目。 – areller

您的代碼看起來不錯，而且證明是，它take a look at this，我建議你的HTML後加載腳本，所以你不保持用戶查看空白頁面直到文件被下載。

來源

2015-08-22 20:49:37

AngularJS - 路由不起作用

回答

相關問題