javascript - $routeProvider 配置路由抛出 'Uncaught Error: [ng:areq] Argument ' fn' 不是函数，有字符串'

Question

我正在使用 Angular JS 的 ngRoute 编写路由逻辑。以下是我的代码。

index.js

(function() {
  'use strict';

  function config($routeProvider, $httpProvider, cfpLoadingBarProvider, $tooltipProvider) {
    $routeProvider.otherwise({redirectTo: '/404'});
    $httpProvider.defaults.withCredentials = false;
    $httpProvider.defaults.headers.common['content-type'] = "application/json";
  }

  angular
    .module('pacman', ['ngCookies', 'ngRoute', 'ui.bootstrap', 'ui.validate',
                      'angular-cache', 'angular-loading-bar', 'angular-md5', 'rt.iso8601', 'ngAnimate']
            )
    .config(['$routeProvider', '$httpProvider', 'cfpLoadingBarProvider', '$tooltipProvider', config])
    .run(['$rootScope', '$location', '$modalStack', '$cookies']);
})();

app.controller.js

(function() {
  'use strict';

  function config($routeProvider) {
    $routeProvider.when('/', {
      templateUrl: 'app/components/landingpage/landingpage.html',
      controller: 'appController'
    });
  }

  function appController($scope, $rootScope, $location) {
    $scope.submitLogin = function() {
      alert("Successfully loggedIn");
    };
  }

  angular
    .module('pacman')
    .controller('appController', ['$scope', '$rootScope', '$location', appController])
    .config(['$routeProvider', config]);
})();

notFound.controller.js

(function() {
  'use strict';

  function config($routeProvider) {
    $routeProvider.when('/404', {
      templateUrl: 'app/components/notFound/404page.html',
      controller: 'notFoundController'
    });
  }
  function notFoundController($scope, $rootScope, $location) {
    debugger;
  }
  angular
    .module('pacman')
    .controller('notFoundController', ['$scope', '$rootScope', '$location', notFoundController])
    .config(['$routeProvider', config]);
})();

我的代码是一个简单的应用程序。我正在尝试根据路线加载不同的 Controller 。然而，在加载应用程序时，在最后一个 Controller 的“$routeProvider”中它会抛出错误

未捕获错误:[ng:areq] 参数“fn”不是函数，得到字符串 http://errors.angularjs.org/1.4.8/ng/areq?p0=fn&p1=not%20a%20function%2C%20got%20string

我不知道如何解决这个问题。任何线索将不胜感激。以下是我的库捆绑订单。

'node_modules/jquery/dist/jquery.js',
'node_modules/angular/angular.js',
'node_modules/angular-route/angular-route.js',
'node_modules/jquery.transit/jquery.transit.js',
'node_modules/angular-cache/dist/angular-cache.js',
'node_modules/angular-cookies/angular-cookies.js',
'node_modules/angular-loading-bar/build/loading-bar.js',
'node_modules/angular-ui-validate/dist/validate.js',
'node_modules/chart.js/Chart.js',
'node_modules/angular-md5/angular-md5.js',
'node_modules/angular-iso8601/dist/angular-iso8601.js',
'node_modules/angular-animate/angular-animate.js',
'node_modules/angular-chart.js/dist/angular-chart.js',
'node_modules/rx/dist/rx.all.js',
'node_modules/angular-ui-bootstrap/ui-bootstrap-tpls.js',
'node_modules/bootstrap/dist/js/bootstrap.js'

请帮忙。

Answer 1

问题出在您的 index.js 中，您在其中定义了 Angular 应用程序的 run 方法。

angular
    .module('pacman', []) // removed dependencies for brevity
    .run(['$rootScope', '$location', '$modalStack', '$cookies']);

传递给 run 的数组中的最后一个参数应该是一个函数，但您忘记传递函数。更改您的 run 以添加如下所示的一些实现，或者删除 run(如果您没有看到它有任何用处)。

angular.module('pacman', []) // removed dependencies for brevity

       .run(['$rootScope', '$location', '$modalStack', '$cookies',

                function($rootScope,$location,$modalStack,$cookies){
                    // some statements here
            }]);