Angularjs 如果角度路由位于不同的文件中，则该路由不起作用_Angularjs_Angularjs Routing

Angularjs 如果角度路由位于不同的文件中，则该路由不起作用

angularjs

Angularjs 如果角度路由位于不同的文件中，则该路由不起作用,angularjs,angularjs-routing,Angularjs,Angularjs Routing,我有以下文件： 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-rou

我有以下文件：

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>

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

MainController.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);

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

（函数（角度）{
"严格使用",；
angular.module（'gitHubViewer'，[]）
.controller（'MainController'，['$scope'，'$interval'，'$location'，'，
函数（$scope、$interval、$location）{
var decrementCountdown=函数（）{
$scope.countdown-=1；
如果（$scope.countdown<1）{
$scope.search（$scope.username）；
}
};
var countdownInterval=null；
var startCountdown=函数（）{
countdownInterval=$interval（递减计数，1000，$scope.countdown）；
};
$scope.search=函数（用户名）{
if（倒计时间隔）{
$interval.cancel（倒计时间隔）；
$scope.countdown=null；
}              
};
$scope.username='angular'；
$scope.countdown=5；
开始计数（）；
}
]);
})（窗口角度）；

我的问题是，当我在一个单独的文件（app.js）上进行路由时，main.html文件没有加载到ng视图上

但是如果我删除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);

（函数（角度）{
"严格使用",；
angular.module（'gitHubViewer'，['ngRoute']））
.config（[“$routeProvider”，
函数（$routeProvider）{
$routeProvider
.when（“/main”{
templateUrl:“main.html”，
控制器：“主控制器”
})          
.否则({
重定向到：“/main”
});
}
])
.controller（'MainController'，['$scope'，'$interval'，'$location'，'，
函数（$scope、$interval、$location）{
var decrementCountdown=函数（）{
$scope.countdown-=1；
如果（$scope.countdown<1）{
$scope.search（$scope.username）；
}
};
var countdownInterval=null；
var startCountdown=函数（）{
countdownInterval=$interval（递减计数，1000，$scope.countdown）；
};
$scope.search=函数（用户名）{
if（倒计时间隔）{
$interval.cancel（倒计时间隔）；
$scope.countdown=null；
}              
};
$scope.username='angular'；
$scope.countdown=5；
开始计数（）；
}
]);
})（窗口角度）；

分开的文件是否有问题？

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

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

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

以下是您的plunkr编辑工作：

您需要声明在IIFE之外的脚本之间共享的模块，以便它是要共享的全局变量。见：

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

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

该行已从MainController.js中删除：

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

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

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

创建新模块时，使用dependency数组参数

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

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

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

在MainController.js中，您重新定义了gitHubViewer模块..只是为了检查-您正在删除更改之间的缓存-ctrl+f5？您更改了什么？我想你的更改没有保存。真的吗？你应该在我的plunkr中看到一个倒计时——我刚刚点击了它。我将编辑我的答案以显示更改Hanks Sam！现在我明白了！