In previous article we discussed about form update ,for this we used services, most of the developers getting common errors while injecting the service in controllers. Now we will discuss
a common error as shown below.
Error: $injector:unpr Unknown Provider
To resolve this we need to check three things let’s check those three now.
Need to define the service and check spelling, before we inject into controller.
Here we will check code which makes unknown provider error.
welcome.controller('editRegistration',['$scope','$route','$routeParams','forumFactory',function($scope,$route,$routeParams,forumFactory){ $scope.current={}; forumFactory.getID($routeParams.id).success(function(data){ $scope.current = data; }); }]);
In the above code we defined the forumFactory service in editRegistration controller which will cause injector error due to service which is not defined in the app.js file. To fix this error we need to create the service which we defined in editRegistration controller as below.
welcome.factory("forumFactory",['$http',function($http){ return{ getID : function(id) { return $http({ url: 'http://localhost:81/Codeigniter/index.php/welcome/getID/'+id, method: 'GET' }); } }; }]);
Creating multiple angular modules in same app. js file, will cause the error.
If we define two angular modules in same app.js which leads to error, code looks like below
var welcome = angular.module('welcome', ['ngRoute']).controller(‘myfirstController’,function(){ code here…}); var welcome = angular.module('welcome', ['ngRoute']).service(‘myservice’,[‘$scope’,’$http’, function($scope,$http){ code here… }]);
In the above code we defined welcome module two times it will causes , Error: $injector: unpr Unknown Provider. To fix these error we need to define single angular module as below.
var welcome = angular.module('welcome', ['ngRoute']).controller(‘myfirstController’,function(){ code here…});
Trying to inject one controller into another controller, will cause the error.
Now let’s check the code which causes the error.
welcome.controller('usersController',['$scope','$http',’editRegistration’ function ($scope,$http, editRegistration) { $http({ method:'post', url:'http://localhost:81/Codeigniter/index.php/welcome/fetchdata', //data : $scope.user, //forms user object headers : {'Content-Type': 'application/x-www-form-urlencoded'} }).success(function (data) { $scope.registrations=data; }); }]); welcome.controller('editRegistration',['$scope','$route','$routeParams','forumFactory',function($scope,$route,$routeParams,forumFactory){ $scope.current={}; forumFactory.getID($routeParams.id).success(function(data){ $scope.current = data; }); }]);
We should not inject controller into another controller,scope object into anything ,that’s not a controller or a directive .For example a service will cause , Error: $injector: unpr Unknown Provider. It will consider as service mistakenly let’s check the below code which causes error.
welcome.service('editRegistration',['$scope','$route','$routeParams','forumFactory',function($scope,$route,$routeParams,forumFactory){ $scope.current={}; forumFactory.getID($routeParams.id).success(function(data){ $scope.current = data; }); }]);
Thanks for reading this article, for any queries please use comment system, subscribe for eknowledgetree for new and fresh articles.
Leave A Comment