Question

<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="angular-route.js"></script>
</head>
</head>
<body ng-app="myApp" ng-controller="cont1">
<a href=#dogs>dogs</a> <a href=#cats>cats</a>
<div ng-view></div> 
<script>
angular.module("myApp", ['ngRoute']).config     ('$routeProvider',function($routeProvider){
  $routeProvider.when("/dogs", {templateUrl: "one.html"})
            .when("/cats", {templateUrl: "two.html"})
            .otherwise("/cats", {redirectTo: "/dogs"})
});
app.controller("cont1", function($scope){ $scope.model = {message: "This is my app One!!!"} });
</script> 
</body> 
</html>

点击两个链接后，我无法收到“这里有猫”或“这里有狗”的段落中的消息;这些文件在同一文件夹中保存为one.html和two.html。

我已经下载并在同一文件夹中添加了angular-route.js文件。请帮助！

我已将控制器放在routerProvider中但没有必要，并将其添加到它不会运行！：（

Answer 1

您忘记在何时插入对象内的模板控制器。见下文：

<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="angular-route.js"></script>
</head>
</head>
<body ng-app="myApp" ng-controller="cont1">
<a href=#dogs>dogs</a> <a href=#cats>cats</a>
<div ng-view></div> 
<script>
angular.module("myApp", ['ngRoute']).config     ('$routeProvider',function($routeProvider){
  $routeProvider.when("/dogs", {
                   templateUrl: "one.html",
                   controller: "cont1"
                   })
            .when("/cats", {
                   templateUrl: "two.html",
                   controller: "cont1"
                 })
            .otherwise("/cats", {redirectTo: "/dogs"})
});
app.controller("cont1", function($scope){ $scope.model = {message: "This is my app One!!!"} });
</script> 
</body> 
</html>

Answer 2

如果您直接在浏览器中打开此html文件，则无法正常工作。这是因为您的模板文件将使用AJAX加载。为了确保恶意其他站点无法获取来自一个站点的用户数据，AJAX请求必须遵守Same origin policy。此政策的详细信息超出了此答案的范围，但这意味着一个网站页面无法向其他网站发出请求。直接从磁盘加载的文件（使用`file：//＆＃39; url方案加载）不具有原点，因此交叉原始策略检查将始终失败。

要解决此问题，请将文件放在服务器上，然后尝试从那里访问它们。如果您使用的是Mac，则可以使用预先安装在Mac上的Python's simple http server。在Windows上，您可以使用mongoose。

Answer 3

当您对angular使用minify-proof语法时，您将参数作为数组传递，因此而不是：

config('$routeProvider',function($routeProvider){
  $routeProvider.when("/dogs", {
...
});

你需要：

config(['$routeProvider',function($routeProvider){
  $routeProvider.when("/dogs", {
...
}]);

http://plnkr.co/edit/7NiWduPXCIKutSF243Hg?p=preview

Answer 4

我和团队一起检查了一下。我只需要从Html文件中的代码顶部删除控制器，它会正常工作。

<body ng-app="myApp" ng-controller="cont1">

应该转向......

<body ng-app="myApp">

感谢伙计们帮助我！

ng-view Angular不显示文本输出

4 个答案: