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 - 路由不起作用

回答

相关问题