Angular 如果路由在不同的文件中，则路由不起作用

Question

我有以下文件：

index.html

<html ng-app="gitHubViewer">

<head>
  <script data-require="angular.js@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
  <script data-require="angular-route@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular-route.js"></script>

  <link rel="stylesheet" href="style.css" />
  <script src="app.js"></script>
  <script src="MainController.js"></script>
  <script src="gitHub.js"></script>
</head>

<body>
  <h1>GitHub Viewer</h1>
  <div ng-view>
  </div>
</body>

</html>

main.html

<form name="searchUser" ng-submit="search(username)">
  <input type="search" required="" placeholder="Username to find" ng-model="username" />
  <input type="submit" value="Search" />
</form>

app.js

(function(angular) {
'use strict';

    angular.module('gitHubViewer', ['ngRoute'])
    .config(['$routeProvider',
      function($routeProvider) {
        $routeProvider
          .when("/main", {
            templateUrl: "main.html",
            controller: "MainController"
          })          
          .otherwise({
            redirectTo: "/main"
          });
       }
    ]);
})(window.angular);

MainController.js

(function(angular) {
  'use strict';

  angular.module('gitHubViewer', [])
    .controller('MainController', ['$scope', '$interval', '$location',
      function($scope, $interval, $location) {

        var decrementCountdown = function() {
          $scope.countdown -= 1;
          if ($scope.countdown < 1) {
            $scope.search($scope.username);
          }
        };

        var countdownInterval = null;
        var startCountdown = function() {
          countdownInterval = $interval(decrementCountdown, 1000, $scope.countdown);
        };

        $scope.search = function(username) {
          if (countdownInterval) {
            $interval.cancel(countdownInterval);
            $scope.countdown = null;
          }              
        };

        $scope.username = 'angular';
        $scope.countdown = 5;
        startCountdown();
      }
    ]);
})(window.angular);

我的问题是，当我在一个单独的文件 (app.js) 上设置路由时，main.html 文件没有加载到 ng-view 上。

但是如果我删除 app.js 文件并在 MainController.js 上添加 .config，main.html 会正确加载，示例如下：

(function(angular) {
  'use strict';

  angular.module('gitHubViewer', ['ngRoute'])
    .config(['$routeProvider',
      function($routeProvider) {
        $routeProvider
          .when("/main", {
            templateUrl: "main.html",
            controller: "MainController"
          })          
          .otherwise({
            redirectTo: "/main"
          });
       }
    ])
    .controller('MainController', ['$scope', '$interval', '$location',
      function($scope, $interval, $location) {

        var decrementCountdown = function() {
          $scope.countdown -= 1;
          if ($scope.countdown < 1) {
            $scope.search($scope.username);
          }
        };

        var countdownInterval = null;
        var startCountdown = function() {
          countdownInterval = $interval(decrementCountdown, 1000, $scope.countdown);
        };

        $scope.search = function(username) {
          if (countdownInterval) {
            $interval.cancel(countdownInterval);
            $scope.countdown = null;
          }              
        };

        $scope.username = 'angular';
        $scope.countdown = 5;
        startCountdown();
      }
    ]);
})(window.angular);

我是不是做错了什么分开的文件？？？

Answer 1

我认为您用相同的名称定义了两次模块，而不是为其添加一个句柄并使用它。

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

app.controller(...
app.config(...

这里是你的 plunkr 编辑工作： plunkr

你需要在IIFE之外声明脚本之间共享的模块，使其成为一个全局变量来共享。参见：IIFE and scope

即 app.js 现在在顶部定义了模块：

var app = angular.module("gitHubViewer", ["ngRoute"]);    
(function() {

并且此行已从 MainController.js 中删除：

 var app = angular.module("gitHubViewer", ["$scope", "$interval", "$location"]);

注意：您也不需要将基本 angularJs 包中包含的作用域或服务（如 $location）注入到模块中。这些应该直接注入控制器。

注意：倒计时后 plunkr 现在中断，因为您需要添加 UserController。

Answer 2

创建新模块时使用依赖数组参数

angular.module('gitHubViewer', ['ngRoute']);

然后当你想引用现有模块时，你可以省略第二个参数。

angular.module('gitHubViewer').run...
angular.module('gitHubViewer').controller....

Angular 如果路由在不同的文件中，则路由不起作用

Angular routing is not working if it is in a different file

angularjs

angularjs-routing