在$ routeProvider中使用resolve会导致'Unknown provider ...'

Question

我试图在我的应用程序加载之前执行异步http请求以加载一些数据,因此我在$ routeProvider中使用了一个解析,这是我的MainController中的http请求.出于某种原因,我不断收到错误:[$ injector:unpr]未知提供者:appDataProvider < - appData其中appData是我做http请求的地方.我正在使用AngularJS v 1.2.5.

这是我尝试的代码和两个方法,它们都给出了同样的错误:

方法#1

MainController.js

var MainController = ['$scope','$location','appData',
    function($scope, $location, appData){
       console.log(appData.data);
    }
];

MainController.loadData = {
    appData: function($http, $location, MainFactory){
        var aid = MainFactory.extractAid($location);
        return $http({method: 'GET', url: URL_CONST + aid});
    }
};

app.js

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

app.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      redirectTo: '/pages/alerts'
    })
    .when('/pages/:pageName', {
        templateUrl: function(params) {
            return 'views/pages/' + params.pageName + '.html';
        },
        controller: MainController,
        resolve: MainController.loadData
    })
    .otherwise({
        redirectTo: '/pages/alerts'
    });
});

我尝试更改名称,以防它是一个冲突的系统保留关键字,但没有运气.出于某种原因,appData永远不会被识别

方法#2我也尝试过改变它:

app.js

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

app.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      redirectTo: '/pages/alerts'
    })
    .when('/pages/:pageName', {
        templateUrl: function(params) {
            return 'views/pages/' + params.pageName + '.html';
        },
        controller: MainController,
        resolve: {
                appData: ['$http', '$location','MainFactory', function($http, $location, MainFactory) {
                    var aid = MainFactory.extractAid($location);
                    return $http({method: 'GET', url: URL_CONST + aid});
                }]
        }
    })
    .otherwise({
        redirectTo: '/pages/alerts'
    });
});

MainController.js

var MainController = ['$scope','$location','appData',
    function($scope, $location, appData){
        console.log(resolvedData);
    }
];

但是,结果完全一样.这与角度1.2.5有关吗？

这是其他人的工作版本

http://mhevery.github.io/angular-phonecat/app/#/phones

以下是代码:

function PhoneListCtrl($scope, phones) {
  $scope.phones = phones;
  $scope.orderProp = 'age';
}

PhoneListCtrl.resolve = {
  phones: function(Phone) {
    return Phone.query();
  },
  delay: function($q, $defer) {
    var delay = $q.defer();
    $defer(delay.resolve, 1000);
    return delay.promise;
  }
}

angular.module('phonecat', ['phonecatFilters', 'phonecatServices', 'phonecatDirectives']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl, resolve: PhoneListCtrl.resolve}).
        otherwise({redirectTo: '/phones'});
  }]);

Answer 1

该问题不是由于之前使用不同版本的 AngularJS 造成的。

以下是使用我上面的代码进行的修复。

在 app.js 中，您需要将控制器声明为控制器：'MainController'，而不是控制器：MainController，即使您有 var MainController = app.controller('MainController', ....)。

第二件也是最重要的事情是，在我的 index.html 中，我已经声明了我的控制器，如下所示：

索引.html

body ng-app=“嘿”控制器=“MainController”/body

这导致了整个未知提供程序错误显然，角度不会告诉您您已经声明了用于解析它的控制器，这将导致与解析无关的奇怪错误。

我希望这对可能遇到同样问题的人有所帮助。