i'm working on web app uses django rest framework end , angularjs front end. i'm still new angular , i'm struggling list of projects resolve before page finishes rendering. whenever page loads, chromeconsole reports following error:
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 @ regex_string_regexp (http://127.0.0.1:8000/static/bower_components/angular/angular.js:68:12) @ http://127.0.0.1:8000/static/bower_components/angular/angular.js:4264:19 @ object.getservice [as get] (http://127.0.0.1:8000/static/bower_components/angular/angular.js:4411:39) @ http://127.0.0.1:8000/static/bower_components/angular/angular.js:4269:45 @ getservice (http://127.0.0.1:8000/static/bower_components/angular/angular.js:4411:39) @ object.invoke (http://127.0.0.1:8000/static/bower_components/angular/angular.js:4443:13) @ ident.$get.extend.instance (http://127.0.0.1:8000/static/bower_components/angular/angular.js:9001:34) @ nodelinkfn (http://127.0.0.1:8000/static/bower_components/angular/angular.js:8111:36) @ compositelinkfn (http://127.0.0.1:8000/static/bower_components/angular/angular.js:7543:13) @ publiclinkfn (http://127.0.0.1:8000/static/bower_components/angular/angular.js:7418:30) <div ng-view="" class="ng-scope"> here's routes:
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: '/' }); }); here's controllers:
angular.module('projectile.controllers', [ 'projectile.directives', 'projectile.services', 'ngroute', 'btford.markdown' ]) .controller('homectrl', function ($scope, projects, issue) { // open issues $scope.issues = issue.query({ open: true }); // projects $scope.projects = projects; }); here's services:
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 fetch projects'); }); return delay.promise; }; }); what's gone wrong? , how resolve it? if use debugger inside controller, projects defined , contains correct data, i'm rather stumped.
i can pass through project , run project.query() result, means page gets updated after it's rendered. have spinner directive in place , want wait request finish before rendering page, understand resolve for.
as factory directly returning promise, should not call function multiprojectloader factory. instead should return promise resolve function.
projects: function (multiprojectloader) { //removed function bracket return multiprojectloader; //returned promise directive resolve. } but singleton considered shouldn't define factory way. should return object factory , have various method used different purpose.
factory
.factory('multiprojectloader', function(project, $q) { return { projectquery: function() { return roject.query().$promise.then(function(projects) { return projects; }, function(error) { return error; }); }; } }); resolve
projects: function (multiprojectloader) { return multiprojectloader.projectquery(); //returned promise } 
Comments
Post a Comment