Question

我正在尝试使用Angular的路由来解析控制器范围的必要对象。我已经阅读了一些有关如何执行此操作的教程，但仍然出现Unknown Provider错误。问题似乎是将project注入ProjectDetailCtrl。

app.js

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

myApp.config( function ($interpolateProvider, $routeProvider) {
    $routeProvider
    ...
    .when('/project/:projectId', {
        templateUrl : 'partials/_project_detail.html',
        controller: 'ProjectDetailCtrl',
        resolve: {
            project: function ($route, MyService) {
                return MyService.get('projects/', $route.current.params.projectId).then(function(data) {
                    console.log('VERIFY DATA: ', data);
                    return data;
                });
            }
        }

controllers.js

.controller('ProjectDetailCtrl', function ($scope, project) {
    $scope.project = project;
}

修改

services.js

.factory('MyService', function ($http, $q) {

var MyService = {
    ...
    get: function (items_url, objId) {
        var defer = $q.defer();
        $http({method: 'GET', 
            url: api_url + items_url + objId}).
            success(function (data, status, headers, config) {
                defer.resolve(data);
            }).error(function (data, status, headers, config) {
                defer.reject(status);
            });
        return defer.promise;
    },

编辑2

问题显然不在于Service方法，因为这也会产生错误：

app.js

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

myApp.config( function ($interpolateProvider, $routeProvider) {
    $routeProvider
    ...
    .when('/project/:projectId', {
        templateUrl : 'partials/_project_detail.html',
        controller: 'ProjectDetailCtrl',
        resolve: {
            project: {title: 'foo'}
        }
     });
})

我可以验证我的解析函数是否正确返回，但Angular仍然抱怨project未被识别。这是什么问题？我已经尝试将控制器转换为模块并将其传递给myApp模块，但我仍然对Unidentified Provider产生了同样的project问题。

注意：我使用的是Angular 1.2.9。

编辑3：解决方案

所以问题出在我的模板中这一行：

<!-- WRONG: <div ng-controller="ProjectDetailCtrl">-->
<div>

  <h2 ng-show="project">Project: <strong>{{ project.title }}</strong></h2>

</div>

显然ng-controller指令不能用于解决。

Answer 1

您忘记添加ngRoute作为模块的依赖项。这就是为什么$ routeProvider和$ route服务未定义的原因。

<强>更新：

请参阅this示例。问题出现在ng-controller指令

中

Answer 2

您正在返回MyService.get，这是一个承诺，然后在承诺的结果中，您将返回数据....但是对于什么？

您希望返回承诺，但不是原始承诺...所以您使用$q创建自己的承诺，Angular会在加载您的路线之前等待并为您解决。

project: function ($route, MyService) {
            var deferred = $q.defer();
            MyService.get('projects/', $route.current.params.projectId).then(function(data) {
                console.log('VERIFY DATA: ', data);
                deferred.resolve(data);
            });
            return deferred.promise;
        }

或者，假设MyService.get返回一个promise，你应该能够做到

 project: function ($route, MyService) {
            return MyService.get('projects/', $route.current.params.projectId);
        }

显然，将$q注入配置

Answer 3

这个问题已经asked before，因此它可能是重复的。

最重要的答案指出标记中控制器的使用导致了这种情况。
搜索您的代码库（markup或templates，确切地说）ng-controller这个词。
验证是否存在匹配的控制器，如本例ProjectDetailCtrl
从标记中删除

它解决了我的问题。

Angular路由器解析导致未知的提供程序错误

修改

编辑2

编辑3：解决方案

3 个答案: