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）上进行路由时，没有在ng-view上加载main.html文件。

但是，如果我删除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....

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

2 个答案: