I have a problem with my Angular Service. I have two controllers and one service. Basically the first controller gets data via AJAX call and store that data on the service. The second controller then access that data via service. I have successfully passed the data from the 1st controller to the service however, when I access the data from the 2nd controller it returns nothing.
I have one view with 2 controllers by the way.
Thanks
Service
app.service('SharedDataService', function () {
// Holds subtask that will be passed to other controllers
// if SharedDataService is invoke.
var _subTask = {};
return {
subTask : _subTask
};
});
Controller 1
app.controller('MainCategoryController',function($scope,$http,SharedDataService){
$scope.loadSubtask = function(m_uid){
$http({
method: 'POST',
url: $locationProvider + 'query_stasks',
data: {
m_uid: m_uid
}
}).then(function successCallback(response) {
SharedDataService.subTask = response.data;
},function errorCallback(response){
});
}
}
Controller 2
app.controller('SubTaskController',function($scope,$http,$location,$rootScope,SharedDataService){
$scope.$watch('SharedDataService.subTask', function(newValue,oldValue){
console.log("ni sud');");
if (newValue !== oldValue) {
$scope.subTasks = newValue;
}
return SharedDataService.subTask;
});
}
Because SharedDataService is not on $scope, the first argument of the $watch method needs to be a watchExpression function instead of an Angular expression string.
app.controller('SubTaskController',function($scope,$http,$location,$rootScope,SharedDataService){
$scope.$watch(
function watchExpression() {return SharedDataService.subTask},
function listener (newValue,oldValue){
console.log("ni sud");
if (newValue !== oldValue) {
$scope.subTasks = newValue;
}
}
});
});
For more information, see AngularJS $rootScope.scope API Reference - $watch.
May be you should save the value use object in service.In my project, i always do like this:
app.service('SharedDataService', function () {
var service = {};
service._subTask = '';
service.toogle_sub_task = function(v){
if(v){
service._subTask = v;
}
return service._subTask;
}
return service;
});
Then, in your controller. You should call service.toogle_sub_task to set and get value. Just give it a try.Best wishes.
you have to write a method to store the data into service and return the data from service
app.factory('SharedDataService', function () {
// Holds subtask that will be passed to other controllers
// if SharedDataService is invoke.
var _subTask = [];
function setSubTask = function(data){
_subTask = data;
};
return {
subTask : _subTask,
setSubTask:setSubTask
};
});
and in controller call
SharedDataService.setSubTask(response.data);
to set the data...
try it
app.service('SharedDataService', function () {
this._subTask ={};
});
// keep code same 1st controller
app.controller('MainCategoryController',function($scope,$http,SharedDataService){
$scope.loadSubtask = function(m_uid){
$http({
method: 'POST',
url: $locationProvider + 'query_stasks',
data: {
m_uid: m_uid
}
}).then(function successCallback(response) {
SharedDataService._subTask = response.data;
},function errorCallback(response){
});
}
}
// 2nd controller
app.controller('SubTaskController',function($scope,$http,$location,$rootScope,SharedDataService){
console.log(SharedDataService._subTask );
});
The best practice is to make any $http/resource calls in services and not in controller or directives directly. This makes the code more module and less interlinked.
You should ideally have
app.factory('SharedDataService', function ($http) {
var subtasks = [];
var saveSubtasks = function(sub){
subtasks = sub;
console.log(subtasks)
}
var tasks = {
loadSubtasks : function(m_uid){
$http({
method: 'POST',
url: $locationProvider + 'query_stasks',
data: {
m_uid: m_uid
}
}).then(function(data){
saveSubtasks(data);
});
},
getSubtasks : function(){
return subtasks;
}
}
return tasks;
});
and use it like
app.controller('SharedDataService',function($scope,SharedDataService){
$scope.load = function(val){
SharedDataService.loadSubtasks(val);
}
});
app.controller('SubTaskController',function($scope,SharedDataService){
$scope.get = function(){
$scope.subtasks = SharedDataService.getSubtasks();
console.log($scope.subtasks);
}
});
Related
I am using the angular ng-show directive to check if a user is an admin user and if they are then I want certain html elements to be "shown".
I firstly created the following function called checkIfUserIsAdmin in my mainController:
$scope.checkIfUserIsAdmin = function(){
var userPrivilegeID = sharedFactory.userDetails.userPrivilegeID;
if(userPrivilegeID === 2){
return true;
}else{
return false;
}
}
and in my html I had the following:
<span ng-show="checkIfUserIsAdmin()"><i class="fa fa-check-circle"></i></span>
It was working well with ng-show and the html was changing as planned when the userPrivilegeID changed value.
However I decided I want to define this function in a factory instead so that I can pass it to multiple controllers.
However now when the userPrivilegeID changes the view does not update (as it should with ng-show). Apologies if it's a silly mistake but i've been trying to figure it out a while now and haven't found anything online. Can you help please?
sharedFactory.js
//create a factory so that we can pass these variables between different controllers.
myApp.factory('sharedFactory', function(){
//private variables
var userDetails = {
"userID" : null,
"userPrivilegeID" : 1,
"isLoggedIn" : false
};
var checkIfUserIsAdmin = function(){
var userPrivilegeID = userDetails.userPrivilegeID;
if(userPrivilegeID === 2){
return true;
}else{
return false;
}
};
//return public API so that we can access it in all controllers
return{
userDetails: userDetails,
checkIfUserIsAdmin: checkIfUserIsAdmin
};
});
mainController.js
myApp.controller("mainController", function($scope, sharedFactory){
$scope.checkIfUserIsAdmin = function(){
return sharedFactory.checkIfUserIsAdmin;
}
});
index.html file (the most relevant parts for this question)
<body data-ng-controller="mainController">
<div id="container_wrapper">
<div class="container">
<span ng-show="checkIfUserIsAdmin()"><i class="fa fa-check-circle"></i></span>
<div ng-view>
<!--our individual views will be displayed here-->
</div>
</div>
</div>
</body>
Edit:
The userPrivilegeID is initialized to 1 as you can see above. However after I do an API call It is then set to 2 however ng-show is not updating to display the html.
Here is my loginFactory which contains the API call
myApp.factory('loginFactory', function($http, $timeout, $q, sharedFactory){
//Methods which perform API calls
var checkLoginDetails = function(data){
var deferred = $q.defer();
$http({
method: 'POST',
url: 'http://localhost/API/auth?apiKey=0417883d',
data : JSON.stringify(data),
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
responseType:'json'
}).then(function successCallback(response){
if(response.hasOwnProperty('data') && response.data !== null){
console.log(JSON.stringify(response.data));
sharedFactory.userDetails = {
"userID" : response.data.userID,
"userPrivilegeID" : response.data.userPrivilegeID,
"isLoggedIn" : true
};
$timeout(function() {
deferred.resolve(sharedFactory.userDetails);
}, 100);
}else{
sharedFactory.buildErrorNotification(response);
}
},function errorCallback(response){
sharedFactory.buildErrorNotification(response);
});
//return the userDetails promise
return deferred.promise;
};
//return public API so that we can access it in all controllers
return{
checkLoginDetails: checkLoginDetails
};
});
And then in my mainController I have the following (which calls the checkLoginDetails function):
$scope.loginWithFacebook = function(){
var data = {//...
};
loginFactory.checkLoginDetails(data).then(function(userDetails) {
//Since the checkLoginDetails method (in the loginFactory) is performing a http request we need to use a promise
//to store the userDetails (from the response) into our $scope.userDetails variable.
$scope.userDetails = userDetails;
});
}
You left off the parens on the call to your service function.
myApp.controller("mainController", function($scope, sharedFactory){
$scope.checkIfUserIsAdmin = function(){
return sharedFactory.checkIfUserIsAdmin(); //<-- Needs to actually call the function.
}
});
Change your service to something like this:
//create a factory so that we can pass these variables between different controllers.
myApp.factory('sharedFactory', function(){
//private variables
var service = {
userDetails: {
"userID" : null,
"userPrivilegeID" : 1,
"isLoggedIn" : false
}
};
service.checkIfUserIsAdmin = function (){
var userPrivilegeID = service.userDetails.userPrivilegeID;
if(userPrivilegeID === 2){
return true;
}else{
return false;
}
};
//return public API so that we can access it in all controllers
return service;
});
I have two AngularJs Controllers called "HomeController" and "VacancyController".
My HomeController have method getallData(). Below I am trying to call Homecontroller's getallData() function through ng-change event of the dropdown.
Please advise how do I call getallData() functiona as my dropdown on-change attribute is wrapped around "VacancyController"?
Below is my code:
HTML
<div ng-controller="VacancyController">
<p>Select a Vacancy:</p>
<select ng-model="selectedVacancy" ng-options="x.name for x in vacancieslist" ng-change=""></select>
<h1>Your selected Vacancy Title is : {{selectedVacancy.name}}</h1>
HomeController
.controller('HomeController', function ($scope, angularSlideOutPanel, $http, $location, $window) {
getallData();
//******=========Get All Teachers=========******
function getallData() {
$http({
method: 'GET',
url: '/Home/GetAllData'
}).then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
$scope.ListTeachers = response.data;
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
$scope.errors = [];
$scope.message = 'Unexpected Error while saving data!!';
console.log($scope.message);
});
};
VacancyController
app.controller('VacancyController', ['$scope', 'VacancyService', function ($scope, VacancyService) {
$scope.GetVacancies = function () {
$scope.vacancieslist = [];
var getData = VacancyService.Vacancies();
getData.then(function (ord) {
angular.forEach(ord.data, function (val) {
if ($.trim(val).length > 0) {
var obj = new Object();
obj.name = val.VacTitle;
obj.id = val.VacNo;
if (val.VacNo > 0) {
$scope.vacancieslist.push(obj);
}
}
});
}, function () {
genericService.warningNotify("Error in getting List of Vacancies");
});
}
$scope.GetVacancies();
}]);
It is possible for one controller to call another controller, as shown in the following stack overflow(Can one controller call another?). You can use emit or broadcast depending on whether they are a child of another.
However in your case, it is better for getAllData to be placed in a service. The service would return the result of getAllData. In the service you can then either always return the result of getAllData from a http call, or cache the service (by setting it to a variable and returning it)
app.service('commonSvc', function() {
var getAllData = function{... //what you have in your code}
return {
getAllData:getAllData
}
}
By having this commonSvc, you can inject and invoke this service each time you need to call this function, similar to what you are doing for VacancyService. Keep in mind, all service in Angular are singletons. In vacancyController you can then introduce a new function onChange which calls commonSvc.getAllData.
I have been searching for an answer to this, and cannot seem to find anything. I have a service, in the first block I am successfully logging a url that I then need to pass into my getData() function. But it comes back undefined, I have tried the method below, and I tried moving the first $http.get into the controller where I am calling it, as well as moving the first $http.get into the getData() function. Am I going about this all wrong?
di.service('testService', function($http) {
$http.get('https://us.api.data/tichondrius?locale=en_US&apikey=xxxxxxxx').
then(function(response) {
var urlToJsonFileUncut = response.data.files[0].url;
console.log(urlToJsonFileUncut);
urlToJsonFile = urlToJsonFileUncut.slice(7);
console.log(urlToJsonFile);
return urlToJsonFile;
});
this.getData = function(urlToJsonFile) {
console.log(urlToJsonFile);
return $http.get('http://localhost:1337/' + urlToJsonFile).
then(function(response) {
console.log(response.data.realms[0].name);
return response.data.realms[0].name;
});
}});
$http is an async request. so you need to chain it inside the first request to ensure the value of first response is available when second request is called.
di.service('testService', function($http) {
var getData = function () {
return $http.get('https://us.api.data/tichondrius?locale=en_US&apikey=xxxxxxxx').
then(function(response) {
var urlToJsonFileUncut = response.data.files[0].url;
console.log(urlToJsonFileUncut);
var urlToJsonFile = urlToJsonFileUncut.slice(7);
console.log(urlToJsonFile);
$http.get('http://localhost:1337/' + urlToJsonFile).
then(function(response) {
console.log(response.data.realms[0].name);
return response.data.realms[0].name;
});
});
}
return { getData: getData; }
});
I would suggest you to use a factory instead of a service
Check out the below code
di.factory('testService', function ($http) {
var variable_name;
var serviceMethodName = function () {
$http.get('https://us.api.data/tichondrius?locale=en_US&apikey=xxxxxxxx').
then(function (response) {
var urlToJsonFileUncut = response.data.files[0].url;
console.log(urlToJsonFileUncut);
urlToJsonFile = urlToJsonFileUncut.slice(7);
console.log(urlToJsonFile);
variable_name = urlToJsonFile; //added
});
}
//modified parameter in below method
var getData = function (variable_name) {
var urlToJsonFile = variable_name; //added
console.log(urlToJsonFile);
return $http.get('http://localhost:1337/' + urlToJsonFile).
then(function (response) {
console.log(response.data.realms[0].name);
return response.data.realms[0].name;
});
}
//Exposes the two methods and accessbile through out the app unless it is modified
return {
serviceMethodName: serviceMethodName,
getData:getData
}
});
I have an factory that gets data from my backend:
as.factory("abbdata", function GetAbbData($http,$rootScope,$routeParams,$q) { //$q = promise
var deffered = $q.defer();
var data = [];
var abbdata = {};
abbdata.async = function () {
$http.get($rootScope.appUrl + '/nao/summary/' + $routeParams['id']).success(function(d) {
data = d.abbData;
deffered.resolve();
});
return deffered.promise;
};
abbdata.data = function() {
return data;
};
return abbdata;
});
A call my factory like this in my controller:
abbdata.async().then(function() {
$scope.abbData = abbdata.data(); //Contains data
});
When I do a console.log($scope.abbData) outside my service call, just underneath, the result Is undifined. Why? Should not the $scope.abbData contain the data from my service after I call it?
EDIT:
You need to pass the data that should be returned into the resolve function like this:
deffered.resolve(data);
EDIT:
To get the data in the controller do this:
abbdata.async().then(function(data) {
$scope.abbData = data; //Contains data
});
Why don't you simply return that value from the async call in the first place?
You can chain promises so by attaching a success handler in your factory and returning a value from that you can simplify your code to:
as.factory("abbdata", function GetAbbData($http,$rootScope,$routeParams) {
return {
async: function () {
return $http.get($rootScope.appUrl + '/nao/summary/' + $routeParams['id']).success(function(d) {
return d.data.abbData;
});
}
}
});
And then use it like
abbdata.async().then(function(data) {
$scope.abbData = data; //Contains data
});
if you console.log($scope.abbData) outside the service call it should show undefined, since the call is asynchronous.
abbdata.async().then(function() {
$scope.abbData = abbdata.data(); //Contains data
});
console.log($scope.abbData) // this should show undefined
The console.log($scope.abbData) just after setting the abbData should show the data
abbdata.async().then(function() {
$scope.abbData = abbdata.data(); //Contains data
console.log($scope.abbData) // this should show the data
});
EDIT
you can use abbData from your service call like for example
angular.module('myApp', []).controller('HomeCtrl', function($scope, abbdata){
var updateUI;
$scope.abbData = [];
abbdata.async().then(function() {
$scope.abbData = abbdata.data(); //Contains data
updateUI();
});
updateUI = function(){
//do something with $scope.abbData
}
});
EDIT 2
On response to your query, I would do something like,
angular.module('myApp', [])
.controller('JobsCtrl', function($scope, $jobService) {
$scope.jobs = [];
$jobService.all().then(function(jobs) {
$scope.jobs = jobs;
});
})
.service('$jobService', function ($q, $http) {
return {
all: function () {
var deferred = $q.defer();
$http({
url: 'http://url',
method: "GET"
}).success(function (data) {
deferred.resolve(data);
}).error(function () {
deferred.reject("connection issue");
});
return deferred.promise;
}
}
});
associated view
<body ng-app = "myApp">
<div ng-controller = "JobsCtrl">
<div ng-repeat="job in jobs track by job.id">
<a href="#/tab/jobs/{{job.id}}" class="item item-icon-right">
<h2>{{job.job_name}}</h2>
<p>DUE DATE: {{job.job_due_date}}</p>
</a>
</div>
<div>
</body>
Here the service an all function which returns a promise, i.e. it will notify when data is fetched.
in the controller the service is called and as soon the service call is resolved the $scope.jobs is assigned by the resolved data.
the $scope.jobs is used in the angular view. as soon as the jobs data are resolved, i.e. $scope.jobs is assigned, the view is updated.
hope this helps
I had a quick look, I have 2 ideas:
First theory: your service is returning undefined.
Second theory: you need to run $scope.$apply();
See this fiddler: https://jsfiddle.net/Lgfxtfm2/1/
'use strict';
var GetAbbData = function($q) {
//$q = promise
var deffered = $q.defer();
var data = [];
var abbdata = {};
abbdata.async = function () {
setTimeout(function() {
//1: set dummy data
//data = [200, 201];
//2: do nothing
//
//3: set data as undefined
//data = undefined;
deffered.resolve();
}, 100);
return deffered.promise;
};
abbdata.data = function() {
return data;
};
return abbdata;
};
var abbdata = GetAbbData(Q)
abbdata.async().then(function() {
console.log(abbdata.data()); //Contains data
});
I have stripped away a lot of dependencies and replaced $q with Q just for my own ease.
In the above example, I first attempted to run the code with dummy data, the console output the expected data, then I tried to not assign the data, and I get an empty array. This is why I assume that if you are seeing 'undefined' you must be explicitly setting the value to 'undefined'.
That aside, I also noticed that you were testing the result by reading directly from $scope. I know that when not inside the angular scope, doing operations on the $scope object does not necessarily happen in a timely manner, and typing $scope.$apply() usually fixes this. Usually, when using $http, angular keeps you in the appropriate scope, but you are creating your own promise using $q so this could be another potential issue.
Finally, the other two answers have pointed out that you are not using promises in the standard way. Although your code works fine, it is not normal to set your data directly onto your service and retrieve it from there. You can keep your service stateless by simply resolving your promise with the data that you want to process in the then method as shown by the answers by Anzeo and Markus.
I hope I was able to find the solution, good luck.
Dipun
as.factory("abbdata", function GetAbbData($http,$rootScope,$routeParams,$q) { //$q = promise
var deffered = $q.defer();
var data = [];
var abbdata = {};
abbdata.async = function () {
$http.get($rootScope.appUrl + '/nao/summary/' + $routeParams['id']).success(function(d) {
data = d.abbData;
deffered.resolve(data);
});
return deffered.promise;
};
abbdata.data = function() {
return data;
};
return abbdata;
});
I'm new to AngularJS and am still trying to wrap my head around using services to pull data into my application.
I am looking for a way to cache the result of a $http.get() which will be a JSON array. In this case, it is a static list of events:
[{ id: 1, name: "First Event"}, { id: 2, name: "Second Event"},...]
I have a service that I am trying to use to cache these results:
appServices.service("eventListService", function($http) {
var eventListCache;
this.get = function (ignoreCache) {
if (ignoreCache || !eventListCache) {
eventListCache = $http.get("/events.json", {cache: true});
}
return eventListCache;
}
});
Now from what I can understand I am returning a "promise" from the $http.get function, which in my controller I add in a success callback:
appControllers.controller("EventListCtrl", ["$scope", "eventListService",
function ($scope, eventListService) {
eventListService.get().success(function (data) { $scope.events = data; });
}
]);
This is working fine for me. What I'd like to do is add an event to the eventListService to pull out a specific event object from eventListCache.
appServices.service("eventListService", function($http) {
var eventListCache;
this.get = function (ignoreCache) { ... }
//added
this.getEvent = function (id) {
//TODO: add some sort of call to this.get() in order to make sure the
//eventListCache is there... stumped
}
});
I do not know if this is the best way to approach caching or if this is a stupid thing to do, but I am trying to get a single object from an array that may or may not be cached. OR maybe I'm supposed to call the original event and pull the object out of the resulting array in the controller.
You're on the right track. Services in Angularjs are singeltons, so using it to cache your $http request is fine. If you want to expose several functions in your service I would do something like this. I used the $q promise/deferred service implementation in Angularjs to handle the asynchronus http request.
appServices.service("eventListService", function($http, $q) {
var eventListCache;
var get = function (callback) {
$http({method: "GET", url: "/events.json"}).
success(function(data, status) {
eventListCache = data;
return callback(eventListCache);
}).
}
}
return {
getEventList : function(callback) {
if(eventListCache.length > 0) {
return callback(eventListCache);
} else {
var deferred = $q.defer();
get(function(data) {
deferred.resolve(data);
}
deferred.promise.then(function(res) {
return callback(res);
});
}
},
getSpecificEvent: function(id, callback) {
// Same as in getEventList(), but with a filter or sorting of the array
// ...
// return callback(....);
}
}
});
Now, in your controller, all you have to do is this;
appControllers.controller("EventListCtrl", ["$scope", "eventListService",
function ($scope, eventListService) {
// First time your controller runs, it will send http-request, second time it
// will use the cached variable
eventListService.getEventList(function(eventlist) {
$scope.myEventList = eventlist;
});
eventListService.getSpecificEvent($scope.someEventID, function(event) {
// This one is cached, and fetched from local variable in service
$scope.mySpecificEvent = event;
});
}
]);
You are on the right track. Here's a little help:
appServices.service("eventListService", function($http, $q) {
var eventListCache = [];
function getList(forceReload) {
var defObj = $q.defer(), listHolder;
if (eventListCache.length || forceReload) {
listHolder= $http.get("/events.json", {cache: true});
listHolder.then(function(data){
eventListCache = data;
defObj.resolve(eventListCache);
});
} else {
defObj.resolve(eventListCache);
}
return defObj.promise;
}
function getDetails(eventId){
var defObj = $q.defer();
if(eventId === undefined){
throw new Error('Event Id is Required.');
}
if(eventListCache.length === 0){
defObj.reject('No Events Loaded.');
} else {
defObj.resolve(eventListCache[eventId]);
}
return defObj.promise;
}
return {
eventList:getList,
eventDetails:getDetails
};
});
Then, in your controller, you handle it like this:
appControllers.controller("EventListCtrl", ["$scope", "eventListService",
function ($scope, eventListService) {
var eventList = eventListService.getList();
eventList.then(function(data){
$scope.events = data;
});
$scope.getEventsList = function(reloadList){
eventList = eventListService.getList(reloadList);
eventList.then(function(data){
$scope.events = data;
});
};
$scope.getEventDetails = function(eventID){
var detailsPromise = eventListService.getDetails(eventID);
detailsPromise.then(function(data){
$scope.eventDetails = data;
}, function(reason){
window.alert(reason);
});
}
}
]);
This way, your events are loaded when the controller first loads, and then you have the option to request a new list by simply passing in a boolean. Getting event details is also handled by an internal promise to give you some error handling without throwing a disruptive error.