正在努力解析 AngularJS 中的路由资源

Question

我目前正在开发一个 Web 应用程序，该应用程序在后端使用 Django REST Framework，在前端使用 AngularJS。我对 Angular 还是很陌生，我正在努力获取要在页面完成呈现之前解决的项目列表。每当页面加载时，Chromeconsole 都会报告以下错误：

Error: [$injector:unpr] Unknown provider: projectsProvider <- projects <- HomeCtrl
http://errors.angularjs.org/1.4.2/$injector/unpr?p0=projectsProvider%20%3C-%20projects%20%3C-%20HomeCtrl
    at REGEX_STRING_REGEXP (http://127.0.0.1:8000/static/bower_components/angular/angular.js:68:12)
    at http://127.0.0.1:8000/static/bower_components/angular/angular.js:4264:19
    at Object.getService [as get] (http://127.0.0.1:8000/static/bower_components/angular/angular.js:4411:39)
    at http://127.0.0.1:8000/static/bower_components/angular/angular.js:4269:45
    at getService (http://127.0.0.1:8000/static/bower_components/angular/angular.js:4411:39)
    at Object.invoke (http://127.0.0.1:8000/static/bower_components/angular/angular.js:4443:13)
    at ident.$get.extend.instance (http://127.0.0.1:8000/static/bower_components/angular/angular.js:9001:34)
    at nodeLinkFn (http://127.0.0.1:8000/static/bower_components/angular/angular.js:8111:36)
    at compositeLinkFn (http://127.0.0.1:8000/static/bower_components/angular/angular.js:7543:13)
    at publicLinkFn (http://127.0.0.1:8000/static/bower_components/angular/angular.js:7418:30) <div ng-view="" class="ng-scope">

路线如下：

var app = angular.module('projectile', [
    'ngRoute',
    'btford.markdown',
    'projectile.controllers',
    'projectile.services'
])

.config(['$httpProvider', function($httpProvider) {
  $httpProvider.defaults.xsrfCookieName = 'csrftoken';
  $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
}])

.config(function ($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: '/static/templates/home.html',
      resolve: {
        projects: function (MultiProjectLoader) {
          return MultiProjectLoader();
        }
      },
      controller: 'HomeCtrl'
    })
    .otherwise({
      redirectTo: '/'
    });
});

控制器如下：

angular.module('projectile.controllers', [
        'projectile.directives',
        'projectile.services',
        'ngRoute',
        'btford.markdown'
])

.controller('HomeCtrl', function ($scope, projects, Issue) {
  // Get open issues
  $scope.issues = Issue.query({ open: true });

  // Get projects
  $scope.projects = projects;
});

这是服务：

angular.module('projectile.services', ['ngResource'])

.factory('Project', function ($resource) {
  return $resource('/api/projects/:projectId');
})

.factory('MultiProjectLoader', function (Project, $q) {
  return function() {
    var delay = $q.defer();
    Project.query(function(projects) {
      delay.resolve(projects);
    }, function() {
      delay.reject('Unable to fetch projects');
    });
    return delay.promise;
  };
});

出了什么问题？我该如何解决？如果我在控制器内部使用 debugger，projects 被定义并包含正确的数据，所以我很困惑。

我可以只通过 Project 和运行 Project.query() 来获得结果，但这意味着页面在呈现后得到更新。我有一个微调器指令，我想在呈现页面之前等待请求完成，据我所知 resolve 是为了。

Answer 1

作为你的工厂直接returning一个promise，你不应该调用函数MultiProjectLoader工厂。相反，您应该只 return 从 resolve 函数中承诺。

projects: function (MultiProjectLoader) {
    //removed function bracket
    return MultiProjectLoader; //returned the promise directive from resolve.
}

但是由于单例被认为是你不应该这样定义工厂。您应该 return 来自工厂的对象，它将具有用于不同目的的各种方法。

工厂

.factory('MultiProjectLoader', function(Project, $q) {
    return {
        projectQuery: function() {
            return roject.query().$promise.then(function(projects) {
                return projects;
            }, function(error) {
                return error;
            });
        };
    }
});

解决

projects: function (MultiProjectLoader) {
    return MultiProjectLoader.projectQuery(); //returned the promise
}

正在努力解析 AngularJS 中的路由资源

Struggling to resolve resource for route in AngularJS

angularjs

angular-resource