Angular 路由不适用于具有相同模块名称的控制器

Question

这是一个简单的 angular 应用程序，它的代码似乎有一个愚蠢的错误，我不太明白。问题在于路由。单击 links 不会将我带到指定的模板 url，而是重新加载相同的 index.html 页面。

然而，地址栏中的link变为：

单击相应的 links。

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'
      })
}]);

希望我的目录结构没有问题:

编辑：

共享控制器代码，问题出在控制器上。它必须与具有相同名称的 angular 个模块做一些事情，尽管这是我被教导的方式。

js/controllers/mySports.js

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

    }]);

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

已将 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

检查 angular documentation 以获得相关链接。您在 URL 中的 app 需要像这样声明为基数：

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

Answer 3

在您的 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 4

我看完全没问题。我这里有工作示例 https://plnkr.co/edit/Thm6Xw66BUmjxeGydFFJ?p=preview 您可以考虑几项检查

文件权限。应该是 (755)
路径。把partials文件夹外的文件拿出来试试

祝你好运

Answer 5

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

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');

}]);

Answer 6

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

问题是，当您在此处定义 "mySports" 控制器时，您正在重新定义主模块：

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

有一个 ',[]'，它会覆盖之前注入的 ngRoute。改为

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

没有 ,[] 部分，那么它应该可以工作。

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

Angular 路由不适用于具有相同模块名称的控制器

Angular routing doesn't work for controllers with same module names

javascript

angularjs

angular-routing