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()来获取结果，但这意味着页面在呈现后会更新。我有一个spinner指令，我想在呈现页面之前等待请求完成，我理解为resolve。

Answer 1

当您的工厂直接退回承诺时，您不应该调用函数def fun[_, _]() = { // ? } fun[Int, String]()工厂。相反，你应该只从resolve函数返回promise。

MultiProjectLoader

但是考虑到单身人士，你不应该以这种方式定义工厂。你应该从工厂返回对象，这将有各种用于不同目的的方法。

<强>工厂

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

<强>解析

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

努力解决AngularJS中的路径资源

1 个答案: