I need a service that provide me a scope or dynamic var , so I move on to other controllers.
I did a test on JSBin and is not working .
https://jsbin.com/semozuceka/edit?html,js,console,output
angular.module('app', [])
.controller('control1', function($scope, shared) {
shared.set('teste', {
testecontroller1: "Apenas um teste"
});
$scope.teste = shared.get();
$scope.teste2 = shared.get();
})
.controller('control2', function($scope, shared) {
$scope.teste = shared.get('teste');
shared.set('teste2', {
testecontroller2: "Apenas um teste"
});
$scope.teste2 = shared.get('teste2');
})
.service('shared', function($scope) {
$scope.data = {};
this.set = function(key, obj) {
$scope.data[key] = obj;
};
this.get = function(key) {
return $scope.data[key];
};
});
I would go for a factory service, since there is no need to create a custom one. Given the functionality of your controllers, I've created a simple factory, like so:
.factory('shared', function() {
var shared;
var data = {};
shared = {
set: setFunc,
get: getFunc
};
return shared;
function setFunc(key, input){
data[key] = input;
}
function getFunc(key){
if(key)
return data[key];
else return data;
}
})
The only part that might need clarification is the getFunc. In control1, you want to get the data object without specifying any properties. However, in control2 you do specify, which led to the conditional if(key). So to sum up, this function checks whether there is a passed attribute parameter and returns the appropriate data.
Here is a working plunker.
You can read more about the different Angular providers and the comparison between them in the official documentation.
Enjoy!
Do not try to use $scope, because it'll try to use the scopeProvider. You cannot inject it into a service. Also, the input for a service is an array (which contains a function), not just a function.
Having said that, you don't really need the scope at all, if you keep track of your variables inside your service.
.service('shared', [function() {
var data = {};
return {
set: function(v, val) {
data[v] = val;
},
get: function(v) {
return (v)? data[v]: data;
}
};
}]);
JSbin
Related
I am trying to pass a JSON string value that is stored in one controller to another. I am using a custom service to pass the data, but it doesn't seem to be passing the value.
The First controller where the JSON string value is stored:
filmApp.controller('SearchController',['$scope', '$http','$log','sharedService',function($scope,$http,$log,sharedService){
$scope.results = {
values: []
};
var vm = this;
vm.querySearch = querySearch;
vm.searchTextChange = searchTextChange;
vm.selectedItemChange = selectedItemChange;
function querySearch(query) {
return $http.get('https://api.themoviedb.org/3/search/movie?include_adult=false&page=1&primary_release_year=2017', {
params: {
'query': query,
'api_key': apiKey
}
}).then(function(response) {
var data = response.data.results.filter(function(obj) {
return obj.original_title.toLowerCase().indexOf(query) != -1;
})
return data;
for (var i = 0; i < data.results.length; i++) {
$scope.results.values.push({title: data.results[i].original_title});
// $log.info($scope.results.values);
}
return $scope.results.values;
})
};
function searchTextChange(text) {
// $log.info('Search Text changed to ' + text);
}
function selectedItemChange(item) {
$scope.value = JSON.stringify(item);
return sharedService.data($scope.value);
}
}]);
The custom Angular service - The value is received here:
filmApp.service('sharedService',function($log){
vm = this;
var value = [];
vm.data = function(value){
$log.info("getValue: " + value); // received value in log
return value;
}
});
The Second controller that wants to receive the JSON value from the First controller:
filmApp.controller('singleFilmController',['$scope', '$http','$log','sharedService',function($scope,$http,$log,sharedService){
var value = sharedService.data(value);
$log.info("Data: " + value);
}]);
The value is received in the service but the second controller can't seem to access it. Not sure why it is happening as I'm returning the value from the data() method from the service. Also, the selectedItemChange method is used by the md-autocomplete directive.
A good approach would be using a Factory/Service. take a look at this: Share data between AngularJS controllers
Technically, you can resolve this by simply changing your service definition to
(function () {
'use strict';
SharedService.$inject = ['$log'];
function SharedService($log) {
var service = this;
var value = [];
service.data = function (value) {
$log.info("getValue: " + value); // received value in log
service.value = value;
return service.value;
};
});
filmApp.service('SharedService', SharedService);
}());
But it is a very poor practice to inject $http directly into your controllers. Instead, you should have a search service that performs the queries and handle the caching of results in that service.
Here is what that would like
(function () {
'use strict';
search.$inject = ['$q', '$http'];
function search($q, $http) {
var cachedSearches = {};
var lastSearch;
return {
getLastSearch: function() {
return lastSearch;
},
get: function (query) {
var normalizedQuery = query && query.toLowerCase();
if (cachedSearches[normalizedQuery]) {
lastSearch = cachedSearches[normalizedQuery];
return $q.when(lastSearch);
}
return $http.get('https://api.themoviedb.org/3/search/movie?' +
'include_adult=false&page=1&primary_release_year=2017', {
params: {
query: query,
api_key: apiKey
}
}).then(function (response) {
var results = response.data.results.filter(function (result) {
return result.original_title.toLowerCase().indexOf(normalizedQuery) !== -1;
}).map(function (result) {
return result.original_title;
});
cachedSearches[normalizedQuery] = results;
lastSearch = results;
return results;
}
});
}
}
filmApp.factory('search', search);
SomeController.$inject = ['$scope', 'search'];
function SomeController($scope, search) {
$scope.results = [];
$scope.selectedItemChange = function (item) {
$scope.value = JSON.stringify(item);
return search.get($scope.value).then(function (results) {
$scope.results = results;
});
}
}
filmApp.controller('SomeController', SomeController);
}());
It is worth noting that a fully fledged solution would likely work a little differently. Namely it would likely incorporate ui-router making use of resolves to load the details based on the selected list item or, it could equally well be a hierarchy of element directives employing databinding to share a common object (nothing wrong with leveraging two-way-binding here).
It is also worth noting that if I were using a transpiler, such as TypeScript or Babel, the example code above would be much more succinct and readable.
I'm pretty new to AngularJS but I'm pretty sure all you are doing is two distinct function calls. The first controller passes in the proper value, the second one then overwrites that with either null or undefined
I usually use events that I manually fire and catch on my controllers. To fire to sibling controllers, use $rootScope.$emit()
In the other controller then, you would catch this event using a $rootscope.$on() call
This article helped me a decent amount when I was working on this in a project.
app.controller('ItemDetailsCtrl', function($scope,FavoriteService) {
var parameter = $scope.Diamoni.Favorites;
});
app.service("FavoriteService",[function(){
this.fav = 0;
}]);
I would like to pass the variable parameter from ItemDetailsCtrl controller to FavoriteService, So this.fav=0; become this.fav=parameter Any suggestions? Thanks in advance.
Dont use $rootScope, instead use a function to set the params
In your service
var self = this;
this.setParam = function(param){
self.fav = param
}
In your controller
FavouriteService.setParam(parameter)
I think the cleanest way will be to expose your fav variable through get/set methods.
app.controller('ItemDetailsCtrl', function($scope, FavoriteService) {
var parameter = $scope.Diamoni.Favorites;
FavoriteService.setFav(parameter);
console.log(FavoriteService.getFav()); // will be the proper value
});
app.service("FavoriteService",[function(){
var fav = 0;
this.setFav = setFav;
this.getFav = getFav;
function setFav(favValue) {
fav = favValue;
}
function getFav() {
return fav;
}
}]);
try this out:
app.controller('ItemDetailsCtrl', function($scope,FavoriteService) {
var parameter = $scope.Diamoni.Favorites;
FavoriteService.setParam(parameter);
});
app.service("FavoriteService",[function(){
var service = this;
service.setParam = function(parameter) {
service.fav = parameter;
};
}]);
I added a method to the service to set the fav variable.
its easy to implement this kind of logic using factory instead of service. if you want i can send you the factory code snippet
EDIT
using factory:
app.controller('ItemDetailsCtrl', function($scope,FavoriteService) {
var parameter = $scope.Diamoni.Favorites;
FavoriteService.setParam(parameter);
});
app.factory('FavoriteService', ['', function(){
var service = {}
service.setParam = function(parameter) {
service.fav = parameter;
};
return service;
}])
}]);
Here's a neat data sharing service example, where we store different data using set and get methods. Remember to store the values in an object or you can get some strange results sometimes.
Service:
graphs.service('graphsData', [function() {
var graphs = this;
var data = {
all: null,
list: null,
single: null
};
graphs.set = function(k, v) {
data[k] = v;
};
graphs.update = function(k, s, v) {
data[k][s] = v;
};
graphs.get = function(k, v) {
return data;
};
}]);
From your controller:
// Stores the this.fav variable as myFavoriteValue (data.myFavoriteValue)
graphsData.set('myFavoriteValue', this.fav);
To get the value simply call the get function of the service:
graphsData.get().myFavoriteValue;
Scenario:
I'd like to use this service to share some properties inside my webApp.
This service should have some object inside and the controllers should be able to get and set those objects.
JS:
var oneApp = angular.module('myApp', ['ui.bootstrap', 'ngTouch', 'ngAnimate'])
.service('sharedProps', function() {
var anObjNameDest = '';
var anObjPropName = '';
this.progressBarDynTyped00 = {
dynamic: 0,
dynMultiplier: 10,
max: 100
};
var progressBarDynTyped00 = {
dynamic: 1000,
dynMultiplier: 10010,
max: 100100
};
var test = this.progressBarDynTyped00;
var test2 = progressBarDynTyped00;
return {
getDynObject: function(anObjNameDest) {
return this[anObjNameDest];
},
getDynObjectVal: function(anObjNameDest, anObjPropName) {
return this[anObjNameDest][anObjPropName];
},
setDynObjectVal: function(anObjNameDest, anObjPropName, value) {
this[anObjNameDest][anObjPropName] = value;
},
setDynObject: function(anObjNameDest, ObjSrc) {
this[anObjNameDest] = ObjSrc;
}
}
});
oneApp.directive("progressBarDynTyped", function() {
return {
restrict: "E",
templateUrl: "aTemplateUrl.html",
controller: function(sharedProps) {
this.test = sharedProps.getDynObject('progressBarDynTyped00');
this.dynMultiplier
= sharedProps.getDynObjectVal('progressBarDynTyped00', 'dynMultiplier');
},
controllerAs: "progressBarDynTyped00"
};
});
Problem:
in the code above I have a service where there are two test Objects (previously there were only one of those, the second one was added for test purpose), those test objects should be returned from this service to some contrellers functions, like in the "progressBarDynTyped00" controller, because I need to get and set some values inside those objects.
Calling all of the retuned functions from the service gave me always an Undefined object or a "Cannot read property 'dynMultiplier' of undefined".
Question:
Is there a way to return a dynamic object passing the name of the object to the service function?
Thanks to all.
I think you are confused between two ways of creating service in Angular: using service keyword and factory keyword
For service keyword, the public functions are supposed to be made available by assigning it to this:
angular.module('myApp', ['ui.bootstrap', 'ngTouch', 'ngAnimate']).service('sharedProps', function () {
this.getDynObject = function (anObjNameDest) {
//...
};
}]);
And it doesn't expect to have return value. So with the code above, there's no public functions to be called, and that explains the error
An angular service is a simplified version of an angular factory. So you should use a factory instead of a service
myApp.service('myservice', function() {
this.method = function() {
return "result";
};
});
myApp.factory('myfactory', function() {
return {
method : function() {
return "result";
};
}
});
I'm having trouble setting $rootScope for Angularjs.
Below is my function
App.controller('Controller',
function (UtilityService, $rootScope) {
var setSession = function () {
$rootScope.test = "yes"; // <-- I get this
UtilityService.getSession().success(
function () {
$rootScope.test = "No"; // <-- I don't get this How do I get/set this value?
});
};
setSession();
});
Additional Info:
One of the ways that might work is to set up a service that is interacted between multiple controllers. Does anybody know how to do this with the service returning an http.get json object.
I'm having trouble getting a dynamic scope in my controller that is instantiated within a service.
In order to address my issue I had to
1) Pass $rootScope into my 2nd controller
App.controller($rootScope) {
2) Set my 2nd controller's function to $rootScope
$rootScope.functionCall = function () {};
3) Set my passed value to $rootScope ($rootScope.orderId)
$rootScope.functionCall = function () {
Service.getItems($rootScope.orderId).success(
function(results) {
$scope.items = results;
});
};
4) within my utility controller, I loop through my results, parsing them, and setting them to $rootScope as you can see in #3 I am initializing "$rootScope.orderId"
angular.forEach(results, function (value, key) {
if (key != null) {
$parse(key).assign($rootScope, value);
}
});
5) I am re-calling the controller's function from within my service call! This is what did the magic for me putting my variable "in scope"
$rootScope.functionCall();
6) I am also testing to see if the function exist cause different pages utilize the utility code but may not have the function to execute
if (typeof $rootScope.functionCall == 'function')
var setSession = function () {
UtilityService.getSession().success(
function (results) {
// Place the rootscope sessions in scope
angular.forEach(results, function (value, key) {
if (key != null) {
$parse(key).assign($rootScope, value);
}
});
// Have to bypass "scope" issues and thus have to execute these fns()
if (typeof $rootScope.functionCall == 'function') {
$rootScope.functionCall();
}
});
};
setSession();
As I wrote before I would use $scope when possible and if you need to share data across multiple controllers you can use a service. The code should be something like:
var app = angular.module('myApp', []);
app.factory('$http', 'myService', function ($http, myService) {
var customers = {};
$http.get("http://www.w3schools.com/website/Customers_JSON.php")
.success(function (response) {
customers = response;
});
return {
customers: customers
};
});
app.controller('controller_one', function($scope, myService) {
$scope.serv = myService.customers;
});
app.controller('controller_two', function($scope, myService) {
$scope.serv = myService.customers;
});
Using a factory in AngularJS is it possible to change the TokenRestangular URL value.
for example could I do this:
.factory('projectFactory', ['TokenRestangular', function (TokenRestangular) {
var factory = {
projects: []
};
factory.get = function () {
return
resource = TokenRestangular.all('project');
resource.getList()
.then(function (project) {
factory.project = project;
return factory.project;
})
};
return factory;
}]);
and in my controller change the value of resource i.e.
var projects = projectFactory.get()
projects.TokenRestangular.all('a_different_url');
Hope that makes sense.
It's possible with a service but not with a factory. A service is created as a singleton so each time you inject it you will get the same instance. With a factory you will get a new one.
You should be able to have a simple service like the following and inject it into your controller:
myApp.service('SimpleService', function() {
this.localValue = 0;
this.setLocalValue = function(newValue) {
this.localValue = newValue;
}
});
Un-tested but should give you enough to go on!