Develop Reference

how to make a function reusable between two or more controllers in angularjs

I have a question as I am new to angularjs. I have searched alot but unable to understand the concept. I have a basic concept that there should be one controller for one view but we can have multiple controllers for a single view. I have below two controllers in a single view and there is one function let say for example addComma function which I have to use in both controllers but I want to write it one time to make it reusable between all controllers let say 5,6 controllers on the same view. So basically the question is how to make a function in a controller global between all controllers of same view or other views so that I can use it anywhere in my application. Appologies if it is a dumb question I am having a hard time understanding the concepts of angularjs.
app.controller("GetChargesController", function ($scope, GetService, $rootScope) {
$scope.Title = "Charges Details List";
$rootScope.loading = true;
// Calling Serivce Method here
$scope.GetChargesDetails = GetService.GetAll("CommonApi", "GetChargesDetails").then(function (d) {
$scope.ChargesDetails = d;
$rootScope.loading = false;
});
// add comman function goes here
$scope.addComma = function(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
});
app.controller("GetPaymentsController", function ($scope, GetService, $rootScope) {
$scope.Title = "Payments Details List";
$rootScope.loading = true;
// Calling Serivce Method here
$scope.GetPaymentsDetails = GetService.GetAll("CommonApi", "GetPaymentsDetails").then(function (d) {
$scope.PaymentsDetails = d;
$rootScope.loading = false;
});
// add comman function goes here
$scope.addComma = function (x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
});
Below is the generic service I've written to get any kind of data from database(using asp.net web api). As I've read that angular services can hold data and we don't need to call the database again and again when we are moving back and forth on links let's say for example I have these 3 links on a page. Home Link, PaymentCharges Link, Orders Link. so Home view will open by default. And when I click on PaymentCharges Link the call will go get data from database and render its view but when I click back on Home Link there should be no call going to database to get the data for the home page or when I click forward again on PaymentCharges Link the second time there should be no call going to database but what I see on firebug console option it is calling the function and going to database to get the data.I think we need to use cache to hold the data to not send the call to database.
app.factory("GetService", function ($http) {
var thisService = {};
// get all data from database
thisService.GetAll = function (controllername, methodName) {
var promise = $http({
method: 'GET',
url: '/api/'+controllername + '/' + methodName
})
.then(function (response) {
return response.data;
},
function (response) {
return response.data;
});
return promise;
};
});

Create an utils service and add the addComma function there. Inject the utils service and reuse the addComma in the controllers
app.factory('utils', function() {
return {
addComma: function() {}
}
});
app.controller("GetChargesController", function ($scope, utils) {
$scope.addComma = utils.addComma;
});
app.controller("GetPaymentsController", function ($scope, utils) {
$scope.addComma = utils.addComma;
});

Several ways to manage the service issue:
Re-use the promises by storing them in the service:
// create an object to store promises
var promises = {};
thisService.GetAll = function(controllername, methodName) {
promises[controllername] = promises[controllername] || {};
// if the particular promise doesn't already exist create it as a property of above object
if (!promises[controllername][methodName]) {
promises[controllername][methodName] = $http({...}).then(...;
}
// now return the specific stored promise
return promises[controllername][methodName];
};
or store the data and use $q to return a different promise that resolves with the stored data when it already exists. Make sure to inject $q for this approach
var data = {};
thisService.GetAll = function(controllername, methodName) {
data[controllername] = data[controllername] || {};
if (data[controllername][methodName]) {
// data exists for this controller and method, no need for new request
return $q.resolve(data[controllername][methodName]);
} else {
return $http({...}).then(function(response) {
// store the data for next use
var newData = response.data;
data[controllername][methodName] = newData;
return newData;
});
}
};

Why don't you just store the data in the service?
You could do:
.then(function (resp) {
thisService.controllerName.data = resp.data
}
Then you can reference the variable in your code using GetService.controllerName.data

Instead I would suggest you to use something like this which might make it little more generic. Check the below code
appResources-Factory will contain all the resources that are needed to be exposed.
indexServices-Factory will contain all your services corresponding to your index controller.
(function () {
use strict';
var commonServices = angular.module('commonServices', ['ngResource']);
commonServices.factory('appResources', ['$resource',
function ($resource) {
var indexResource=$resource('/api/index/:id');
return {
indexResource:indexResource
}
}]);
commonServices.factory('indexService',['appResources',
function (appResources){
var getAllIndexes =function(sucesscallback){
appResources.indexResource.query({}).$promise.then(
//success
function( value ){/*success events and Data is present in the 'value'*/
sucesscallback(value);
},
//error
function( error ){/*failure events*/}
)
}
}
]);
});
Controller Method calling the service and getting the value in $scope variables like
(function () {
'use strict';
angular.module('saniehhaApp')
.controller('indexController', indexController);
indexController.$inject = ['$location', 'indexService'];
function indexController($location, index,indexService) {
/* jshint validthis:true */
indexService.getAllIndexes(function(sucesscallback){
$scope.value=sucesscallback;
})
//$locaton.qwets=....
}
})();

manage factory JSON $http data with 2 controllers

I'm trying to get a factory JSON response, save it in a variable, in order to be ready to be called from 2 different controllers.
Here bellow I paste the code I'm using:
storyFactory.js
var story = angular.module('story.services', []);
story.factory('storyAudio', [ '$http', function ($http) {
var json = {};
function getJSON(story_id, callback) {
$http({
url: 'https://api.domain.co/get/' + story_id,
method: "GET"
}).success(function (data) {
json = data;
callback(data);
});
};
return {
getSubaudios: function(story_id, callback) {
getJSON(story_id, function(result) {
callback(result);
});
},
getTopbar: function(callback) {
callback(json);
}
};
}]);
StoryCtrl.js
var storyCtrl = angular.module('story', ['story.services']);
storyCtrl.controller('storyCtrl', [ 'CONFIG', '$stateParams', 'storyAudio', function(CONFIG, $stateParams, storyAudio) {
var data = this;
data.story = {};
storyAudio.getSubvideos($stateParams.story_id, function(response) {
data.story = response;
});
}]);
TopbarCtrl.js
var topbarCtrl = angular.module('topbar', ['story.services']);
topbarCtrl.controller('topbarCtrl', [ 'CONFIG', '$stateParams', 'storyAudio', function(CONFIG, $stateParams, storyAudio) {
var data2 = this;
data2.story = {};
storyAudio.getTopbar(function(response) {
data2.story = response;
});
}]);
The problem is in my TopbarCtrl response I'm receiving an empty data2.story when I call it in the HTML.
The reason is because it doesn't have a callback of the $http response, so it prints the var json with the actual status, that is an empty object.
How could I load the second controller when the variable has content?
Thanks in advice.

I think the best you can do in this case is load the data via getSubaudios and provide a reference to the data for other controllers to use. Something like this...
story.factory('storyAudio', function($http) {
var factory = {
story: {}
};
factory.getSubaudios = function(story_id) {
return $http.get('https://api.domain.co/get/' + story_id).then(function(response) {
return angular.extend(factory.story, response.data);
});
};
return factory;
})
Using angular.extend() instead of directly assigning a value to the factory's story property maintains any references that may be established before the data is loaded.
Then you can load the data via
storyCtrl.controller('storyCtrl', function(storyAudio) {
var data = this;
storyAudio.getSubaudios($stateParams.story_id).then(function(story) {
data.story = story;
});
})
and directly reference the story data by reference in your controller
topbarCtrl.controller('topbarCtrl', function(storyAudio) {
this.story = storyAudio.story;
})

I think I'm understanding correctly, but let me know if not.
There are two issues I'm seeing. The first is that there is a typo in your StoryCtrl.js file. You are calling "storyAudio.getSubvideos" but the function is called "getSubaudios" in your factory.
Even with that typo fixed, the issue could still technically happen. It all really depends on how quickly the promise returns from the first call. Unfortunately, promises are asynchronous, so there is no guarantee that the "json" variable will get set before the second controller tries to get it.
In order to resolve this, you need to ensure that the first call is finished before trying to access the "json" variable you have on the service. There are probably a few different ways to do this, but one that comes to mind is to actually return and store the promise in the service like so...
var dataPromise;
function getSubaudios(story_id){
if(!dataPromise){
dataPromise = $http({
url: 'https://api.domain.co/get/' + story_id,
method: "GET"
});
}
return dataPromise;
}
return {
getSubaudios: getSubAudios
};
Then in your controllers, you can just call the service and use .then to get the data out of the promise when it returns...
storyAudio.getSubaudios($stateParams.story_id).then(function(response){
data.story = response; //or data2.story = response;
});
Here is a plunkr example. I've used the $q library to simulate a promise being returned from an $http request, but it should illustrate the idea.

Similar to Phil's answer. (Angular extend, or angular copy keeps the references the same in both controllers. If you don't want to put watchers in both controllers to keep track if the value changes.) Several methods here:
Share data between AngularJS controllers.
You could also bind the object you are returning directly to the update-function. That way the references stay intact.
storyServices.factory('storyAudio', ['$http', function($http) {
return {
data: { json: '' },
getSubaudios: function(story_id) {
$http.get('http://jsonplaceholder.typicode.com/posts/' + story_id)
.then(function(response) {
this.data.json = response.data.body;
}.bind(this));
}
};
}]);
var storyCtrl = angular.module('story').controller('storyCtrl', ['$scope', 'storyAudio', function($scope, storyAudio) {
$scope.data = storyAudio.data;
storyAudio.getSubaudios(2);
}]);
var topbarCtrl = angular.module('story').controller('topbarCtrl', ['$scope', 'storyAudio', function($scope, storyAudio) {
$scope.data2 = storyAudio.data;
}]);
Plunk here: http://plnkr.co/edit/auTd6bmPBRCVwI3IwKQJ?p=preview
I added some scopes to show what happens.
Sidenote:
I think it's straight out dishonest to name your non-controller "storyCtrl" and then assign it a controller of its own:
var storyCtrl = angular.module(...); // Nooo, this is not a controller.
storyCtrl.controller(...); // This is a controller! Aaaah!
Another sidenote:
.success() is the old way of doing things. Change to .then(successCallback) today! I dare to say it's the standard convention for promises.
https://docs.angularjs.org/api/ng/service/$http#deprecation-notice

Angularjs : variable which is returned by a function in controller is "undefined"

<script type="text/javascript">
angular.module('angularApp', ['dialogs.main'])
.controller('TableController', function(dialogs, $http){
function getEmailAddress(){
var emailAddress ="empty";
$http({
//The http method is defined here, which works as expected
}).then(function succes(response) {
emailAddress = response.data;
console.log(emailAddress + " : getEmailAddress success");//From this log, I can see what I expected
return emailAddress; //However, this doesn't return the value, which can be seen in the log.
// return {
// emailAddress:emailAddress
// }; //This way doesn't work either
}, function resendError() {
return "Error!";
});
};
this.resendConfirmationMail = function(orderId){
//Inside this function, the function above is going to be used.
};
});
</script>
What I'm trying to do is to create/use a function which returns a value, which comes from a http function.
As I described above, there are two functions, one of which is supposed to return a variable, called emailAddress, but the returned variable is described as undefined, not even empty, as its initial value.
I can see the right return value from console.log, but I can't just return it.
I would appreciate any advice.

getEmailAddress is an async function (as it uses $http which is also async). You can return the promise from the getEmailAddress method and use then to grab the email address:
function getEmailAddress() {
return $http({
//The http method is defined here, which works as expected
});
}
this.resendConfirmationMail = function (orderId) {
getEmailAddress().then(function (emailAddress) {
console.log(emailAddress);
});
};
It might help to brush up on async programming and Promises
Here is a great answer summarising using async functions.

As your working with $http your using promises.
As such its async. I'm not too sure if this is what your trying to do but feel its best to mention you can't return a value and expect to consume it straight away. By that i mean this won't work:
function test () {
$http.get('url')
.then(x => x.data);
}
var data = test();
What you need to do is return a promise with you then register against to say 'run my code when the promise resolves'. In this case the promise will resolve once the $http request returns. As $http returns a promise for you all you have to do is return it.
function test () {
return $http.get('url')
.then(x => x.data);
}
test().then(data => {
//use data
});
So in your code just return before $http.

You need to return the promise from the $http call, and then when you want the value you have to use .then() to retrieve it.
angular.module('angularApp', ['dialogs.main'])
.controller('TableController', function(dialogs, $http){
function getEmailAddress(){
var emailAddress ="empty";
return $http({
//The http method is defined here, which works as expected
}).then(function succes(response) {
emailAddress = response.data;
return emailAddress;
}, function resendError() {
return "Error!";
});
};
this.resendConfirmationMail = function(orderId){
//Inside this function, the function above is going to be used.
getEmailaAddress().then(function(emailAddress) {
// use the email address here.
});
};
});
The important thing to remember here is thet $http runs asynchronously, so you cannot 'return a value' from it and use that in code unless that code is inside .then() or .catch() success or failure handlers and those handler will not run until later

You should return promise by using $q
function getEmailAddress(){
var deferred = $q.defer();
var emailAddress ="empty";
$http({
//The http method is defined here, which works as expected
}).then(function (response) {
emailAddress = response.data;
console.log(emailAddress + " : getEmailAddress success");//From this log, I can see what I expected
deferred.resolve(emailAddress)
}, function () {
deferred.reject(""Error!")
});
return deferred.promise;
};

Here your getEmailAddress function return nothing.
You have to return at least $http (which return a promise) an handle the result as a promise.
Or you could better create a promise instance in getEmailAddress and handle it directly in resendConfirmationMail
function getEmailAddress(){
var deferred = $q.defer();
var emailAddress ="empty";
$http({
//The http method is defined here, which works as expected
}).then(function succes(response) {
emailAddress = response.data;
deferred.resolve(emailAddress)
}, function resendError() {
deferred.reject("Error");
});
// This is what you return
return deferred.promise;
};
this.resendConfirmationMail = function(orderId){
getEmailAddress()
.then(function(emailResponse){
// Do the things
}, function(errorMessage){
// Error handler
}
);
};
Usefull documentation page: https://docs.angularjs.org/api/ng/service/$q

(simple plunkr)
$http, in fact, returns a promise. Also, a good pattern is to first handle the returned promise in the service for any data related actions and then pass that promise up the 'chain' to the controller where UI actions can be handled. I have included a simplified plunkr that shows how these promises are passed from the service to the controller. Just click on the 'get data' button in the controller and you'll see how the events work with a series a 'alert()s'. Note, I have used $timeout as a substitute for $http. The promise handling will be identical using $http. More details below:
index.html: Starts everything. The get data button invokes getData()
method in the controller.
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
<script src="mock_ajax_service.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Click on button to request data and handle the promise chain</p>
<div>
<button ng-click="getData()">Get Data!</button>
</div>
</body>
</html>
app.js: getData(), in turn, invokes the requestData() method in the 'mock ajax'
service. It waits on a promise to return from the service and upon
return handles UI matters, i.e. shows an alert.
var app = angular.module('plunker', ['mockjaxservice_module']);
app.controller('MainCtrl', ['$scope', 'mockajaxservice',
function($scope, mockajaxservice) {
$scope.name = 'World';
var requestDataSuccess = function (results) {
console.log('handle success data in controller/UI');
alert('handle success data in controller/UI');
return;
}
var requestDataFail = function (results) {
console.log('handle failed data in controller/UI');
return;
}
$scope.getData = function () {
var UIPromise = mockajaxservice.requestData();
UIPromise.then(requestDataSuccess,requestDataFail);
}
}]);
mock_ajax_service.js: Here, the service simulates a mock ajax call
using $timeout which is invoked by the controller button. $timeout,
much like $http, returns a bonafide promise. Once the promise
returns, it is handled (an alert), and the promise is passed up the
chain to the controller (return that;)
'use strict';
var mockAjaxModule = angular.module('mockjaxservice_module', []);
mockAjaxModule.factory('mockajaxservice', ['$timeout', function ($timeout) {
this.service_count = 0;
this.service_count_object = {
count:0
}
var that = this;
var requestDataSuccess = function (results) {
console.log('handle success data in service');
alert('handle success data in service then pass it up to controller');
that.service_count = 10;
that.service_count_object.count = 10;
that.utcTime = Math.floor((new Date()).getTime() / 1000);
return that;
}
var requestDataFail = function (results) {
console.log('handle failed data in service')
return that;
}
this.requestData = function () {
var requestDataPromise = $timeout(function() {
}, 500);
requestDataPromise.then(requestDataSuccess,requestDataFail);
return requestDataPromise;
}
return this;
}]);

Having problems unit testing a promise call in angularjs controller

SupportedLanguagesServices get method returns a promise which is resolved in the controller as follows:
angular.module('App').controller('MyController', ['SupportedLanguagesService',
function(SupportedLanguagesService) {
var self = this;
self.supportedLanguages = [];
SupportedLanguagesService.get().success(
function(response) {
self.supportedLanguages = response;
});
}]);
And here is the test I wrote, but it is not working:
describe('Controller: MyController', function() {
beforeEach(module('App'));
var rootScope, controller;
beforeEach(inject(function($controller, $rootScope, SupportedLanguagesService, $q) {
var deferred = $q.defer();
deferred.resolve([{name:"English", code:"en"},{name:"Portugues", code:"pt_BR"]);
spyOn(SupportedLanguagesService, 'get').andReturn(deferred.promise);
rootScope = $rootScope;
controller = $controller;
}));
it('should get SupportedLanguages', function() {
rootScope.$digest();
var ctrl = controller('MyController');
expect(ctrl.supportedLanguages.length).toEqual(2);
});
});
It throws an exception on the statement: var ctrl = controller('MyController');
Thank you for your assistance.

Intead of success (which is an $http callback), you can change to a then, which is available on all promises. This will allow you to easily mock the promise (and not concern yourself with $httpBackend:
SupportedLanguagesService.get().then(
function(response) {
self.supportedLanguages = response.data;
});
Then, you need to use the controller's constructor and then call a $digest. So, switching to this should get you there:
it('should get SupportedLanguages', function() {
var ctrl = controller('MyController');
rootScope.$digest();
expect(ctrl.supportedLanguages.length).toEqual(2);
});
You can also simplify the setup code using $q.when:
var response = [{name:"English", code:"en"},{name:"Portugues", code:"pt_BR"}];
spyOn(SupportedLanguagesService, 'get').andReturn($q.when(response));

Store data from asynchronous call to a variable in AngularJS

Following is the code in which I am trying to use promise to save data from an asynchronous call to a variable but its not working. I am new to promise as I serached and found promise helps in these cases but I am unable to apply, let me know what I am doing wrong here -
angular.module("app").controller("myCtrl", function($scope, $http, $q) {
var deferred = $q.defer();
var data = $http.get("/api/events").success(function(response){
deferred.resolve(response);
return deferred.promise;
// ALSO tried return response;
})
console.log("DATA--");
console.log(data);
});
EDIT -
I am trying to hit two APIS -
1) Create array of ids from 1st API hit.
2) Loop to the array for 2nd API hit on id basis.
3) Concatenate some data from array 1 and array2.
More specific case, which I am trying to do but found to use promise -
http://pastebin.com/ZEuRtKYW

I would do it as follows:
$http.get('data.json').success(function (result) {
$scope.result = result;
}).then(function (data) {
var result = data.data.key;
var promises = result.map(function (val) {
var deffered = $q.defer();
$http({
method: 'GET',
url: 'data-' + val.id + '.json'
})
.success(function (x) {
deffered.resolve(x);
})
.error(function () {
deffered.reject();
});
return deffered.promise;
});
$q.all(promises).then(function (result) {
$scope.resolvedData = result;
});
});
Map all the promises into a promises array based on the result of the first call. Inside this map function create a new promise and resolve it in the success function. Make sure you return the actual promise!
Afterwards you can get all the resolved data with $q.all(promises). This way your calls to the database are not limited to 2. You can do as much calls as you want based on the data retrieved in the first call.
Plunker
Edit: Not sure if you're able to modify the service, but it would be better if you can achieve this with only one call. For instance:
get '/api/events' --> returns just the events
get '/api/events?includeDetail=true' --> returns the events + the details of an event

When you get response in asynchronous call, store it in scope variable. Then you can access that scope variable anywhere inside controller.
angular.module("app").controller("myCtrl", function($scope, $http) {
$http.get("/api/events").success(function(response){
$scope.response = response;
})
});

I think this can be done somthing like as:
angular.module("app").controller("myCtrl", function($scope, $http, $q) {
var ids = [],
q1 = $q.defer(),
q2 = $q.defer();
d1 = $http.get("/api/events").success(function(data){
q1.resolve(data);
angular.forEach(data, function(id) {
ids.push(id);
});
}).error(function(err){
q1.reject("Ooops!!")
});
var promises = [];
angular.forEach(ids, function(id) {
var promise = $http.get("/api/events", {id:id})
.success(function(data){
q2.resolve(data);
}).error(function(err){
q2.reject("Ooops!!")
});
promises.push(promise);
});
$q.all(promises)
.then(function(values) {
console.log(values);
});
});