i am new to angular and facing this exception when trying to retrieve a list of blog-posts from rails backend.
can anyone help me please, i am unable to find the exact solution of this problem.
Error: [$injector:unpr] Unknown provider: PostProvider <- Post
http://errors.angularjs.org/1.2.22/$injector/unpr?p0=PostProvider%20%3C-%20Post
var myApp = angular.module('Emangu', ['ngRoute', 'ngResource']);
//Routes
myApp.config([
'$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.when('/blog', {
templateUrl: '/templates/posts/index.html',
controller: 'PostListCtr'
});
}
]);
//Controllers
myApp.controller("PostListCtr", ['$scope', '$http', '$resource', 'Posts', 'Post', '$location', function ($scope, $http, $resource, Posts, Post, $location) {
alert("hello");
$scope.posts = Posts.query();
$scope.deletePost = function (Post) {
if (confirm("Are you sure you want to delete this Post?")) {
Post.delete({ id: Post }, function () {
$scope.posts = Posts.list();
$location.path('/');
});
}
};
}]);
//resources
myApp.factory('Posts', ['$resource', function ($resource) {
return $resource('/posts.json', {}, {
query: { method: 'GET', isArray: true },
create: { method: 'POST' }
})
}]);
Add Post factory (service) or remove it from PostListCtr dependencies
Related
So i am trying to pass the promise from a http request to a resolve which would then only when received load a view. I am wondering where the mistake is here as i get a Uncaught Error: [$injector:modulerr] error. The "mainsearch" controller is the controller where state.go is defined and not the controller for the template. I am not sure if that causes an issue.
//in app.js
.state({
name: "mainSearch",
url: "/mainSearch",
views: {
'testView': {
template: '<div><span>{{params}} , I load after the promise</span></div>',
controller: "mainSearch",
}
},
resolve: {
entityParams: ['$stateParams', 'mainSearch', function ($stateParams) { console.log("I load before the view as i contain a promise")
return $stateParams
}]
}
})
// in mainSearch.js
state.go("mainSearch", {
params: httpfactory.getResult('GET', param)
})
// in http-factory module
var app = angular.module("http-factory", []);
app.factory('httpfactory', ['$http', function ($http) {
$scope.getResult = function (callType, param) {
switch (callType) {
case 'POST':
$http.post('/abcurl', 'requestBody', {
withCredentials: true,
headers: {
"abc": "abc"
}
})
break;
case 'GET':
return $http.get('/gttportal/api/search', {
params: param,
withCredentials: true
})
}
break;
}
}]);
this is how i have my app.js and module congifured
app = angular.module('myapp', ['http-factory','mainsearch']
app.config(function ($stateProvider, $urlRouterProvider, httpfactory) {...
this is how i have my mainsearch module and function configured:
.module('mainsearch', ['http-factory'])
function ($rootScope, $scope, $http, $state, $stateParams, httpfactory)
I am new in Angular JS and I stack with problem with inject resolve promise to controller.
I have next code:
var app = angular.module('app', ['ui.router', 'ngAnimate', 'ngSanitize', 'ui.bootstrap'])
.config(function ($stateProvider, $urlMatcherFactoryProvider, $urlRouterProvider) {
$urlMatcherFactoryProvider.caseInsensitive(true);
$urlRouterProvider.otherwise('/refuel');
$stateProvider.state('refuels', {
url: '/refuel',
controller: 'refuelController',
controllerAs: 'refuelCtrl',
resolve: {
$refuelsPumpsResolve: function ($http) {
return $http({
url: "http://localhost:60000/Refuels/GetUserPumps",
method: "GET"
})
}
}
})
})
.controller('refuelController', function ($refuelsPumpsResolve) {
var $this = this;
this.isOpen = true;
this.isOpen = function () {
$this.isOpen = !$this.isOpen
}
this.pumpsData = $refuelsPumpsResolve;
});
However angular throws 'Unknown provider' exception for $refuelsPumpsResolve in controller.
I do not see any problem, more over the code was taken from ui-route tutorial on github.
Thanks for help
Try this, declaring the injection as you would normally do for say, a controller:
resolve: {
$refuelsPumpsResolve: ['$http', function ($http) {
return $http({
url: "http://localhost:60000/Refuels/GetUserPumps",
method: "GET"
})
}]
}
I have AngularJS JavaScript code with a routing:
.when("/home/:id", {
templateUrl: " ",
controller: "TestController",
resolve: {
message: function(app, helpers, $route){
console.log($route);
return app.get({
user: 533,
id: 2
}).then(function (response) {
console.log($route);
return helpers.toArray(response.app);
});
}
}
});
My HTML link as:
Click
Also my TestController is:
.controller('TestController', ['$scope', '$http', '$routeParams', 'message', function ($scope, $http, $routeParams, message) {
$scope.appointments = message;
}])
When I try to get $route in resolve like as:
console.log($route);
I get nothing.
I am getting an error on injecting my collections factory, but can't figure out where I went wrong:
Error: [$injector:unpr] http://errors.angularjs.org/1.3.0/$injector/unpr?p0=%24scopeProvider%20%3C-%20%24scope%20%3C-%20collections
'use strict';
var thangular = angular.module('thangular', ['ngAnimate']);
thangular.config(function ($interpolateProvider,$httpProvider) {
$interpolateProvider.startSymbol('[[').endSymbol(']]');
$httpProvider.defaults.useXDomain = true;
});
thangular.factory('collections', ['$scope', '$http', '$q',
function ($scope, $http, $q) {
return {
all: function () {
var deferred = $q.defer();
var request = $http({
method: 'GET',
url: '/collections.json',
});
request
.success(function (result) {
deferred.resolve(result.content);
})
.error(function (error) {
deferred.reject(error);
});
return deferred.promise;
}
};
}
]);
thangular.controller('mainCtrl', ['$scope', 'collections',
function ($scope, collections) {
collections.all().then(function (data) {
console.log(data);
});
}
]);
I suppose you shouldn't inject $scope in factory declaration. Just change
thangular.factory('collections', ['$scope', '$http', '$q',
to
thangular.factory('collections', ['$http', '$q',
Factory declaration should not dependent upon controllers $scope.
I'm following a PluralSight tutorial on AngularJS fundamentals. Though I'm using a much different structure as I seem to have a much newer version of Angular Seed.
I'm trying to inject a service into controller using the same syntax structure as I have done before, which was working fine, but this one brings the following error:
Error: [$injector:unpr] Unknown provider: eventDataProvider <- eventData
viewEventDetails.js (Controller)
'use strict';
angular.module('myApp.viewEventDetails', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/viewEventDetails', {
templateUrl: 'viewEventDetails/viewEventDetails.html',
controller: 'viewEventDetailsCtrl'
});
}])
.controller('viewEventDetailsCtrl', ['$scope', 'eventData', function($scope, eventData) {
$scope.sortorder = '-upVoteCount';
$scope.event = eventData.getEvent(function (event) {
$scope.event = event;
});
$scope.upVoteSession = function (session) {
session.upVoteCount++;
};
$scope.downVoteSession = function (session) {
session.upVoteCount--;
};
}
]);
EventData.js (Service)
angular.module('myApp.services', [])
.factory('eventData', ['$http', '$log', function ($http, $log) {
return {
getEvent: function () {
$http({ method: 'get', url: '/data/event/1' })
.success(function (data, status, headers, config) {
$log.warn(data, status, headers(), config);
})
.error(function (data, status, headers, config) {
$log.warn(data, status, headers(), config);
});
}
}
}]
);
app.js
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'ngSanitize',
'myApp.filters',
'myApp.services',
'myApp.viewNewEvent',
'myApp.viewEventDetails',
'myApp.viewEditProfile',
'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
you need to inject the myApp.services into your module that the controller is in, since the modules are different.
i.e.
angular.module('myApp.viewEventDetails', ['ngRoute', 'myApp.services'])