在AngularJS中努力解決路由資源問題

Question

我目前正在研究一個Web應用，該應用使用後端的Django REST框架和前端的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

由於您的工廠直接退貨，您不應該致電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; 
      }); 
     }; 
    } 
}); 

解決

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