Question

这是一个简单的角度应用程序，在代码中似乎有一个愚蠢的错误，我不太能解决它。问题在于路由。点击链接不会将我带到指定的模板网址，而是重新加载相同的index.html网页。

但是，地址栏中的链接更改为：

点击相应的链接。

的index.html

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
  <link rel="stylesheet" href="css/style.css"/>

  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/controllers/myStats.js"></script>
  <script src="js/controllers/mySports.js"></script>

</head>
<body>
  <div class="container">
    <a ng-href="#/stats">My Stats</a>
    <a ng-href="#/sports">My Sports</a>
  </div>
  <div ng-view></div>
</body>
</html>

app.js

'use strict';
angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider){
  $routeProvider
      .when('/stats', {
        templateUrl: 'partials/stats.html'


      })
      .when('/sports', {
        templateUrl: 'partials/sports.html'
      })
}]);

我希望我的目录结构没有错：

修改

共享控制器代码，问题出在控制器中。它必须用具有相同名称的角度模块做一些事情，尽管这就是我的教学方式。

JS /控制器/ mySports.js

angular.module('myApp',[])
    .controller('mySports',['$scope', function($scope){
        console.log('just checking');

    }]);

什么有效： 将mySports.js中的模块名称从 myApp 更改为 mySports ，然后在 app.js mySports 作为依赖项>。

将 app.js 更新为：

'use strict';
    angular.module('myApp', ['ngRoute','mySports'])
    .config(['$routeProvider', function($routeProvider){
      $routeProvider
          .when('/stats', {
            templateUrl: 'partials/stats.html'
          })
          .when('/sports', {
            templateUrl: 'partials/sports.html'
            controller: mySports,
          })
    }]);

修改

还有什么问题是为什么要更改控制器的模块名称，然后将其作为依赖项注入 app.js ？为什么不使用相同的模块名称？

Answer 1

您需要将ngRoute作为依赖项注入应用程序

更改

发件人：

angular.module('myApp', [])

要

angular.module('myApp',['ngRoute'])

这是工作Application

Answer 2

作品：http://codepen.io/C14L/pen/oxqEZE

问题是，当你定义你的＆＃34; mySports＆＃34;时，你正在重新定义主模块。控制器在这里：

angular.module('myApp',[]).controller('mySports',[...

有一个＆＃39;，[]＆＃39;并覆盖先前注入的ngRoute。改为

angular.module('myApp').controller('mySports',[...

没有 ,[]部分，那么它应该有效。

这也是为什么将mySports注入myApp的原因，因为myApp的注入数组在这种情况下不会被覆盖。

Answer 3

检查angular documentation的相关链接。您网址中的app需要像这样声明为基数：

<head>
  <base href="/app/">
</head>

Answer 4

在HTML的脚本中，尝试添加min.js文件而不是.js，这就是一个例子：

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

你应该在该文件夹中有一个min.js， AND！非常重要，不要先添加路径文件，这可能是一个很好的补充：

<script src="bower_components/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/myStats.js"></script>
<script src="js/controllers/mySports.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>

Answer 5

我看得很清楚。我在这里有工作示例https://plnkr.co/edit/Thm6Xw66BUmjxeGydFFJ?p=preview 您可以考虑几个检查

文件权限。它应该是（755）
路径。将文件放在partials文件夹之外，然后尝试

Answer 6

对于更新的问题，要在任何地方使用相同的模块，您可以按如下方式定义模块：

var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider){
 $routeProvider
  .when('/stats', {
    templateUrl: 'partials/stats.html'
  })
  .when('/sports', {
    templateUrl: 'partials/sports.html'
  })
}]);

和您的控制器：

app.controller('mySports',['$scope', function($scope){
    console.log('just checking');

}]);

角度路由对于具有相同模块名称的控制器不起作用

6 个答案: