I'm creating a service on a separate module called 'hsHttp' -> HttpSrv. And I'm trying to use it from another module 'HttpApp'. I'm getting injector error: Error: [$injector:unpr]
My code is below:
"file1.js" => The service implementation
(function () {
var app = angular.module("hsHttp", []);
app.service("HttpSrv", function ($scope, $http) {
....
});
})();
"file2.js" => The service use implementation
(function () {
var app = angular.module("HttpApp", ["hsHttp"]);
app.controller("HttpCtrl", HttpCtrl);
function HttpCtrl($scope,HttpSrv) {
...
}
})();
Why Angular can't inject the service from the other module ?
Thanks.
/yore
The problem is: service does not accept $scope as dependency. The solution is to remove the $scope from the definition:
(function () {
var app = angular.module("hsHttp", []);
app.service("HttpSrv", function ($http) {
....
});
})();
Related
I have some javascript and html files: User.js, index.html, Door.js
I want use any function in User.js file.
My user.js file
My door.js file
I call getUserInfo in user.Js from Door.js file in function
doorApplicationLoginPage.service
Error: [$injector:unpr] Unknown provider: UserServiceProvider <- UserService <- PerioMainController
var doorApplicationLoginPage = angular.module("PerioLoginPage", []);
doorApplicationLoginPage.service('UserService', function () {
this.getUserInfo = function () {
alert("getUserInfo");
}
this.reLoginUser = function () {
alert("reLoginUser");
}
});
var doorApplication = angular.module("PerioDoorApplication", []);
doorApplication.controller("PerioMainController", function ($scope, $http, $sce, UserService) {
UserService.getUserInfo();
});
Thank you.
You are injecting a service which is not referenced to your module.
See:
The UserService service is referenced in PerioLoginPage module
The PerioMainController controller is referenced in PerioDoorApplication module.
You've got either to:
reference the service in the same module as your controller.
inject the module where service is referenced to the module where controller is referenced.
In this case I can see you have two modules Periodicloginpage and periodicdoorapplication. So two services are defined in two modules. So you have to put the Periodicloginpage as dependency of periodicdoorapplication.
var doorApplication = angular.module("PerioDoorApplication", ["PerioLoginPage"]);
As I said in my comments you have two things to do at least:
You need to return the functions you want to use from the service (UserService):
return{
getUserInfo: getUserInfo,
reLoginUser: reLoginUser
};
Your module needs to reference the one the service is defined on:
angular.module('PerioDoorApplication', ['PerioLoginPage']);
And in your 'PerioMainController', a better way to write it would be:
doorApplication.controller('PerioMainController', ['$scope', '$http', '$sce', 'UserService',
function($scope, $http, $sce, UserService){
[...]
}
]);
what i need
i need to pass values selected from one controller to another
i have reffer link : Passing data between controllers in Angular JS?
js code
var app = angular.module('myApp', []);
app.service('productService', function() {
var productList = [];
var addProduct = function(newObj) {
productList.push(newObj);
};
var getProducts = function(){
return productList;
};
return {
addProduct: addProduct,
getProducts: getProducts
};
});
app.controller('parentController', function ($scope,productService) {
$scope.change = function () {
alert($scope.value);
}
});
error
error: [$injector:unpr] Unknown provider: productServiceProvider <- productService <- parentController
i need to pass data from controller to another .
whereas i don"t understand why its producing such errors.
This error results from the $injector being unable to resolve a required dependency.
To fix this, make sure the dependency is defined and spelled correctly.
I have two guess for this:
You fix a service name typo, while copy code to your question Fiddle.
Just check your actual service name
You redeclare angular.module Example
Example:
var app = angular.module('myApp', []);
app.service('productService', function() {
return {};
});
app = angular.module('myApp', []); // <- module redeclared
app.controller('parentController', function ($scope,productService) {
$scope.value = 'World'
});
angular.module('myApp', []) creates new instance of module without knowing previous declared providers.
You can retrieve it for subsequent use with angular.module('myApp').
you have declared service before module declearation. so it is not added to your module
follow these steps
var app = angular.module('myApp', []);
then create controllers and service
app.service('productService', function() { ....
and
app.controller('parentController', function ($scope,productService) {...
I have change your fiddle example check Link,
I have created another controller which share same service.
As the title suggests I've recently started a new project where I'm using Browserify (and Gulp) to concatenate my Angular JS files (and the Angular sourcefile) into a single file - bundle.js.
I've decided to split my controllers, services and directives into separate files and then "require" them into my app.js file using Browserify like this:
(function () {
'use strict';
require('angular');
var tabCtrl = require('./controllers/tabs'),
dataService = require('./services/');
angular.module("citiToolsApp", [])
.service('dataService', ['$scope', dataService])
.controller('TabController', ['$scope', tabCtrl]);
}());
However when I try to access my service - dataService - from within my Tab Controller like this:
module.exports = function($scope, tabController) {
dataService.getPrograms(function (response) {
console.log(response.data);
});
};
I get an undefined error. I believe I need to pass dataService into the tabController but I'm unsure on the syntax to do this. Can anyone help with this?
Thanks
EDIT
I've also added the contents of my service file for further detail:
module.exports = function($http) {
this.getPrograms = function(callback) {
$http.get('/programs')
.then(callback);
};
};
I've realised my own mistake. I needed to pass in $http rather than $scope. So instead of:
(function () {
'use strict';
require('angular');
var tabCtrl = require('./controllers/tabs'),
dataService = require('./services/');
angular.module("citiToolsApp", [])
.service('dataService', ['$scope', dataService])
.controller('TabController', ['$scope', tabCtrl]);
}());
It should be:
(function () {
'use strict';
require('angular');
var tabCtrl = require('./controllers/tabs'),
dataService = require('./services/');
angular.module("citiToolsApp", [])
.service('dataService', ['$http', dataService])
.controller('TabController', ['$scope', tabCtrl]);
}());
angular.module('app.services', []).service("test", function($http, $rootScope){
this.test=function(){
$rootScope.name="test1";
};
};
angular.module('app.controllers', []).controller('TestController', function ($scope, test) {
test.send();
})
I dont get an error but the changes don't get applied to the UI. I tried $scope.apply() and got an error.
We need to tell Angular which modules your module depends on, In our case the main module is app.controllers.
To call service from different model we need tell to controller where is our service:
['app.services']
JS
var appServices = angular.module('app.services', []);
var appCtrl = angular.module('app.controllers', ['app.services']);
appServices
.service("test", function ($http, $rootScope) {
this.send = function () {
$rootScope.name = "test1";
};
});
appCtrl.controller('TestController', function ($scope, test) {
test.send();
});
Demo Fiddle
I think you should change ".service" by ".factory".
As I can see in the creating services docs there are 3 ways of creating custom services. One of then is using factory way, as the following:
var myModule = angular.module('myModule', []);
myModule.factory('serviceId', function() {
var shinyNewServiceInstance;
//factory function body that constructs shinyNewServiceInstance
return shinyNewServiceInstance;
});
Hope to help.
I am following the basic Angular tutorial and need to include a JSON file in it.
I kickstarted my application with Yeoman and it is running on grunt.
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope) {
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
});
});
However when I go to localhost:9000 I get a bunch of console errors:
ReferenceError: $http is not defined
at new PhoneListCtrl (http://localhost:9000/scripts/controllers/main.js:17:3)
at invoke (http://localhost:9000/bower_components/angular/angular.js:3000:28)
at Object.instantiate (http://localhost:9000/bower_components/angular/angular.js:3012:23)
at http://localhost:9000/bower_components/angular/angular.js:4981:24
at http://localhost:9000/bower_components/angular/angular.js:4560:17
at forEach (http://localhost:9000/bower_components/angular/angular.js:137:20)
at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:4545:11)
at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:4191:15)
at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:4194:13)
at publicLinkFn (http://localhost:9000/bower_components/angular/angular.js:4096:30)
Any help would be appreciated!
It may be better for you to include the json file in a factory service. That way you can cache it and continue to use it with different controllers.
I had a similar issue and resolved it like so...
var App = angular.module('App', []);
// Setting up a service to house our json file so that it can be called by the controllers
App.factory('service', function($http) {
var promise;
var jsondata = {
get: function() {
if ( !promise ) {
var promise = $http.get('src/data_json.js').success(function(response) {
return response.data;
});
return promise;
}
}
};
return jsondata;
});
App.controller('introCtrl', function (service , $scope) {
service.get().then(function(d) {
$scope.header = d.data.PACKAGE.ITEM[0]
})
});
App.controller('secondCtrl', function (service , $scope) {
service.get().then(function(d) {
$scope.title = d.data.PACKAGE.ITEM[1]
})
});
Add $http as dependency, next to $scope in your function PhoneListCtrl($scope, $http) {}