Develop Reference

Creating a function in Angular

I have two controllers both with a save button which essentially does the same thing. So I want to put it in a reusable function that both the controllers can use. I have tried to do this by creating a normal function and passing the model object, as well as $http, but the function is executing before the save button is pressed leading to all the params being set to undefined. What way should I create a function that both these controllers can use?
Here how code looks:
app.controller('addCtlr',['$scope','$http','$location',
function($scope, $http, $location){
$scope.save = function(){
var practices = [];
var url = "https://maps.googleapis.com/maps/api/geocode/json?address="+$scope.location.address.replace(/ /g,"+");
//If there are practices
if($scope.days){
for(dayName in $scope.days){ //Loop through the days object
var day = $scope.days[dayName]; //Gets the day pratice object
practices.push({day: dayName, start_time: day.startTime, end_time: day.endTime}); //Add the pratice object to the practices array
}
}
//Call to get the lat lng and formatted address from Google Map's service
$http.get(url)
.then(function(response){
locJSON = response.data.results[0]; //The JSON response
//createing an object to send to the backend to save
var locObj = {
name: $scope.location.name,
address: locJSON.formatted_address,
location: locJSON.geometry.location,
cost: $scope.location.cost,
practices: practices,
notes: $scope.location.notes
};
//Sending using POST since a new object is being created
$http.post('/api/locations', locObj)
.then(
$location.path('/')
);
});//*/
};
}]);
This is how my function looked:
function saveLocation(location, days, $http){
var practices = [];
var url = "https://maps.googleapis.com/maps/api/geocode/json?address="+location.address.replace(/ /g,"+");
//If there are practices
if(days){
for(dayName in days){ //Loop through the days object
var day = days[dayName]; //Gets the day pratice object
practices.push({day: dayName, start_time: day.startTime, end_time: day.endTime}); //Add the pratice object to the practices array
}
}
//Call to get the lat lng and formatted address from Google Map's service
$http.get(url)
.then(function(response){
locJSON = response.data.results[0];
//createing an object to send to the backend to save
var locObj = {
name: location.name,
address: locJSON.formatted_address,
location: locJSON.geometry.location,
cost: location.cost,
practices: practices,
notes: location.notes
};
//Sending using POST since a new object is being created
$http.post('/api/locations', locObj)
.then(
//$location.path('/') //Redirects the user back to the homepage
);
});
}
This is how I was calling the function in the new controller:
app.controller('addCtlr',['$scope','$http','$location',
function($scope, $http, $location){
$scope.save = saveLocation(location, days, $http);
}]);

You can use service for this. Service is a singleton so will be created only one instance. And You can inject it by a dependency injector to controllers. You can read more here

You can create a service for your shared functionality and can inject it into your controller like below
var app=angular.module('app',[])
app.service('myService',function($http){
this.saveLocation=function(){
//Your code
}
});
and then in your controller you can inject it like below
app.controller('myController',['$scope','myService',function($scope,myService){
//use myService function to call save functionality
}]);
Also if you are using $http, you should keep this in mind that it returns a promise so you need to write all the code which is dependent on the value of this promise in a success callback otherwise your code will run before this callback and you will have undefined values for those variables.

Use a factory() service. You can define a set of functions and return them as an object. This object can then be injected within any controller:
app.factory('sharedFactory', [function() {
"use strict";
return {
myFunction: function() {
console.log("sharedFunction");
}
};
}]);
app.controller('AnyController', ['sharedFactory', function(sharedFactory) {
"use strict";
sharedFactory.myFunction();
}]);

$injector:unpr angularjs when injecting a service in the controller

I am having trouble with injecting my service in angular that gives me $injector:unpr error. Here is my code:
(function () {
/**
* This is a service to perform the backend REST calls for a Release
*/
'use strict';
angular.module('app.services')
.service('ReleaseService', ReleaseService);
ReleaseService.$inject = ['$http'];
function ReleaseService () {
var releaseService = {};
var releasesUrl = 'http://localhost:8080/api/releases';
releaseService.releases = getReleases;
return releaseService; // return the release service object to the controller
/**
* Get the list of the releases. Does an HTTP GET request to the backend
* #returns {Array} of releases to the caller of the service
*/
function getReleases(){
var releases = [];
$http.get(releasesUrl).then(function(responseData){
//check the status from the response data.
if(responseData.status !== 200){
alert('The request could not be completed. Please try again');
} else{
// else, Parse the json data here and return to the service caller
for(var release in responseData.data){
releases.push({slug: release, data: responseData.data[release]});
}
}
});
return releases;
}
// This is the controller.js file where I inject the service I created above
(function (){
angular.module('app.uploadedReleases')
.controller('UploadedReleasesController', UploadedReleasesController)
.controller('ModalController', ModalController);
UploadedReleasesController.$inject = ['$log', '$scope', '$modal', 'ReleaseService', 'TrackService'];
function UploadedReleasesController ($log, $scope, $modal, releaseService, TrackService){
function init(){
var something = releaseService.releases();
}
}
Any idea what am I possibly missing ?

Thanks for the inputs folks. I think I was missing the registering the app.services in my main app module. Doing this solved the problem.

Can't pass data between controllers?

I don't get what I'm doing wrong, I am trying to globally store and pass data from one controller to another via a service. I stored the data in one controller and confirmed that it was stored at the beginning of my buildReportController. Then, when I click a button on my UI, it opens reportResultsController. However, issue is, I can store the data correctly in buildReportController via locationHistoryService.store() but when I go to reportResultsController and calllocationHistoryService.get(), thepreviousLocationvariable inlocationHistoryService` is empty as if the data was never set. Any ideas on how why or how I can "globally" store data and pass it between controllers? Below is my attempt. Thanks!
In reportView.js
angular.module('reportView', [])
.service('locationHistoryService', function(){
var previousLocation = "";
return {
store: function(location){
previousLocation = location;
},
get: function(){
return previousLocation;
}
};
});
In buildReport.js
angular.module('buildReport', ['reportView'])
.controller('buildReportController', ['$rootScope', 'locationHistoryService'], function($rootScope, locationHistoryService){
$rootScope.$on('$locationChangeSuccess', function(e, newLocation, oldLocation){
locationHistoryService.store(oldLocation);
console.log("Old location: ", oldLocation);
});
}
In reportResults.js
angular.module('reportResults', ['reportView'])
.controller('reportResultsController', ['$rootScope', 'locationHistoryService'], function($rootScope, locationHistoryService){
console.log("location : ", locationHistoryService.get());
}

The locationHistoryService.get() method in reportResults.js is called before it is set in buildReport.js.
It would be better if you announce when the previousLocation variable has been set.
In reportView.js
angular.module('reportView', [])
.service('locationHistoryService',['$rootScope'] ,function($rootScope){
var previousLocation = "";
return {
store: function(location){
previousLocation = location;
$rootScope.$broadcast('previous-location-set');
},
get: function(){
return previousLocation;
}
};
});
In reportResults.js
angular.module('reportResults', ['reportView'])
.controller('reportResultsController', ['$rootScope', 'locationHistoryService'], function($rootScope, locationHistoryService){
$rootScope.$on('previous-location-set', function(){
console.log("location : ", locationHistoryService.get());
});
}

Your webapp should have only one module which is automatically bootstrapped by angular, and other modules as dependencies. The syntax of writing service is incorrect. You wrote .service but returning object which .factory should return. Here is working example of your code http://codepen.io/Chyngyz/pen/NxbdpW?editors=101
Also you wrote the safe for minification syntax of controllers incorrect, the function block of controller should be the last item in the array.

Can you pass an Angular service as a parameter to a function provided by another Angular service?

I have a bunch of functions throughout my Angular app using mostly the same code. So I decided to create a service which is made of the frequently duplicated code, and takes as parameters the differences.
One of the primary and few differences each of the duplicate functions have is that they use different services.
So for example, in a simplified excerpt, one has:
$scope.signin = function(email, password){
loginSrvc(email, password).execute()
.success(function(data, status, headers, config){
if (status == 200){
....
and one has
$scope.logout = function(){
$scope.loading = true;
signoutSrvc().execute()
.success(function(data, status, headers, config){
if (status == 200){
....
but essentially they are the same thing.
I want to be able to pass the services each function is using, for example loginSrvc, signoutSrvc, etc to an external service which handles all of this sort of code.
However, when I pass the service to my new service, it appears on the other end as undefined.
My new service looks like:
sharedFunctionsApp.factory('serverCommunicationFactory', [function(){
console.log("serverCommunicationFactory");
return function(service){
console.log(service);
service.execute();
}
}]);
and I pass services to it from other modules (after injecting the ShareFunctions module of course) like this:
serverCommunicationFactory()(loginSrvc);
Yet it still shows as undefined.
How can I pass my services to this new shared service?

Of course you can inject other services in a service, just like it :
sharedFunctionsApp.factory('yourServiceName', ['theServiceToInject', function(theServiceToInject){
return {
yourServiceMethode: function() {
console.log(theServiceToInject);
return;
}
}
}]);
EDIT:
you can also use the injector to inject your services: docs
and then inject dynamically the service doing something like:
var myService = $injector.get('MyServiceName');

yes of course you can inject one service into another.
HTML
<div ng-app="myApp" ng-controller="startCtrl">
</div>
.js
var app=angular.module("myApp",[]);
app.factory("firstService",function(){
return{
myFunction:function()
{
var myVar="Hello from service one";
return myVar;
}
}
});
app.factory("secondService",function(firstService){
return{
callToFirstService:function()
{
var result=firstService.myFunction();
return result;
}
}
});
app.controller("startCtrl",function($scope,secondService){
var finalResult= secondService.callToFirstService();
console.log(finalResult);
});
You can check this in working fiddle....
https://jsfiddle.net/codu16t5/
this is a small demo.

save $location parameters state AngularJS

How do I save URL parameters state throughout lifecycle of application using pushState?
Page load.
Go to "/search" via href
submitSearch() through filter fields where $location.search(fields)
Go to "/anotherPage" via href
Go back to "/search" via href
Search paramters are set back to what they last were.
Is this a built in feature somewhere?
If not what's the best way to go about this?

If you're planning on a mostly single page website through pushState, you might want to get an intimate understanding of $routeProvider (http://docs.angularjs.org/api/ngRoute.%24routeProvider).
To go further down the rabbit hole, I would recommend looking at the ui-router module: (https://github.com/angular-ui/ui-router). $stateProvider (from ui-router) and $routeProvider work very similar, so sometimes the ui-router docs can give insights that you can't find in the poor documentation of the $routeProvider.
I reccomend going through the five page ui-router documentation (https://github.com/angular-ui/ui-router/wiki) page by page.
After all that preamble, here's the practical: you would set up a factory that holds history data and use the controller defined in your $routeProvider/$stateProvider to access and manipulate that data.
Note: the factory is a service. A service is not always a factory. The namespace goes:
angular.module.<servicetype[factory|provider|service]>.
This post explains the service types: https://stackoverflow.com/a/15666049/2297328. It's important to remember that they're all singletons.
Ex:
var myApp = angular.module("myApp",[]);
myApp.factory("Name", function(){
return factoryObject
});
The code would look something like:
// Warning: pseudo-code
// Defining states
$stateProvider
.state("root", {
url: "/",
// Any service can be injected into this controller.
// You can also define the controller separately and use
// "controller: "<NameOfController>" to reference it.
controller: function(History){
// History.header factory
History.pages.push(History.currentPage);
History.currentPage = "/";
}
})
.state("search", {
url: "/search",
controller: function(History, $routeParams) {
History.lastSearch = $routeParams
}
});
app.factory('<FactoryName>',function(){
var serviceObjectSingleton = {
pages: []
currentPage: ""
lastSearch: {}
}
return serviceObjectSingleton
})
If you're wondering what the difference between $routeProvider and $stateProvider is, it's just that $stateProvider has more features, mainly nested states and views... I think.

The easiest way is using cookies, angularjs provides a wrapping service for that.
Simply when you go to "/search" save your current URL parameters with "$cookieStore.put()" and once you've back you've got what you need with "$cookieStore.get()".
See the documentation at angularjs cookie store

I made a locationState service, you simply give it the values you want to persist and it stores them in the URL. So you can store all the state you want across all routes in your app.
Use it like this:
angular.module('yourapp')
.controller('YourCtrl', function ($scope, locationState) {
var size = locationState.get('size');
;
// ... init your scope here
if (size) {
$scope.size = size;
}
// ...and watch for changes
$scope.$watch('size', locationState.setter('size'));
}
Here's the code:
// Store state in the url search string, JSON encoded per var
// This usurps the search string so don't use it for anything else
// Simple get()/set() semantics
// Also provides a setter that you can feed to $watch
angular.module('yourapp')
.service('locationState', function ($location, $rootScope) {
var searchVars = $location.search()
, state = {}
, key
, value
, dateVal
;
// Parse search string
for (var k in searchVars) {
key = decodeURIComponent(k);
try {
value = JSON.parse(decodeURIComponent(searchVars[k]));
} catch (e) {
// ignore this key+value
continue;
}
// If it smells like a date, parse it
if (/[0-9T:.-]{23}Z/.test(value)) {
dateVal = new Date(value);
// Annoying way to test for valid date
if (!isNaN(dateVal.getTime())) {
value = dateVal;
}
}
state[key] = value;
}
$rootScope.$on('$routeChangeSuccess', function() {
$location.search(searchVars);
});
this.get = function (key) {
return state[key];
};
this.set = function (key, value) {
state[key] = value;
searchVars[encodeURIComponent(key)] = JSON.stringify(value);
// TODO verify that all the URI encoding etc works. Is there a mock $location?
$location.search(searchVars);
};
this.setter = function (key) {
var _this = this;
return function (value) {
_this.set(key, value);
};
};
});