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.
Related
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) {
....
});
})();
I have a Provider defined in an angular module say A, and I am trying to use it in the config of another angular module say B, as shown in the following code snippet:
var A = (function(ng){
'use strict';
var a = ng.module('A',[]);
a.provider('MyProvider', function(){
this.$get = ['$q', function($q){
return new myService($q);
}]
});
function myService($q){
var data = // Some data
this.getAllData = function(){
return $q(function(resolve,reject){
resolve(data)
});
}
}
//ng.bootstrap(a);
return a;
})(angular);
and app B is as follows:
//IIFE pattern for modularization
var B = (function(angular) {
'use strict';
// initialize the Angular app
var b = angular.module('B', ['ui.router', 'A']);
b.config(config);
function config($stateProvider, $urlRouterProvider, myProvider){
myProvider.getAlldata().then(function(data){
//do some processing on data related to routes...
}, function(err){
//handle Err
});
}
return b;
})(angular);
Now I am getting the err as:
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module ngApp due to:Error: [$injector:unpr] Unknown provider: RouteProvider
Can someone please help me crack this? Thank you.
Apparently the myProvider should be referenced as myProviderProvider in the config function. its about naming the provider. And then you can use myProvider as a dependency to any other service/factory, and here the instance returned in the $get method of the myProvider(any provider for that matter) will be made available for use in the dependant service/factory.
If not so clear, Someone who understood can develop the answer. I 'll mark the best one as the answer. Thank you.
I have an angular project that I'm breaking out into a better file structure but I'm getting Argument 'fn' is not a function, got undefined for an error when creating a new service. Any ideas what I'm doing wrong?
app.js
angular.module('app', [
'app.controllers'
]);
angular.module('app.controllers', ['leaflet-directive', 'app.services']);
angular.module('app.services', []);
main.controller.js
angular.module('app.controllers')
.controller('MainCtrl', MainCtrl);
function MainCtrl($scope, $window, leafletData, DataService) {
var main = this;
main.items = DataService.GetItems();
//Other controller stuff
};
data.service.js
angular.module("app.services")
.factory('DataService', DataService);
var DataService = function(){
return data = {
getItems: function(){
return [//data here];
}
};
}
Your declaration of DataService is the problem. You're declaring it after you're using it. You should change your declaration of DataService to function DataService() instead of setting it to a var to take advantage of function hoisting
I am getting error of service not defined in angular js but I cant figure out why as my controller and module is perfectly connected:
application.js:
var myapp=angular.module('myApp', []);
myapp.service('productService', function() {
var productList = "";
var addProduct = function(newObj) {
productList=newObj;
};
var getProducts = function(){
return productList;
};
return {
addProduct: addProduct,
getProducts: getProducts
};
});
controller1.js:
myapp.controller('contrl1', ['$scope','productService', function ($scope) {
var st="datsat";
productService.addProduct(st);
}]);
Controller 2:
myapp.controller('contrl2', ['$scope','productService', function ($scope) {
$scope.products = productService.getProducts();
}]);
Also in the views I have given link to contoller.js file and application.js file
This is the right way to create your controller:
myapp.controller('contrl2', ['$scope','productService', function ($scope, productService)
When you're using DI and inline array annotation, the annotation array (strings) and function parameters should be synced (the same).
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.