I am building a single page app using angular and .net backend.
Aside from the individual restful resources that the controllers call, I also have a System Resource which provides the app with system wide information that is used/needed by most of my controllers.
I call the system service and store the data in the rootScope when the user first logs on.
However if for some reason the user refreshes the page which will lose the rootScope then the system data is lost and no longer available to the controller.
I have managed to get the System Service to trigger if a page reload happens BUT the problem is that in many cases the services running from the controller happen BEFORE the system service call which means that the data is not always available when the controller runs.
Whats the correct way to handle this in angular? Is there a way to make my controllers dependent on a certain rootScope state which if necessary will cause my system service API to be called before the controller makes its own service calls?
Thanks
One approach could be creating a factory/service which is injected to and called by every controller needing this information. This way you don't have to mess with $rootScope.
The request to get information should be cached so that you don't have to fire off a get everytime you switch controller. If you want to persist the information even after a page refresh you could use localstorage to store your data.
Example factory:
angular.module('appName')
.factory('Settings', ['$http', function ($http) {
function getData() {
var url = 'url/to/endpoint';
return $http.get(url, {cache: true});
}
return {
promise: getData()
};
}]);
By returning a promise from the factory we ensure that the getData() call is only run once. While in this particular instance it makes almost no difference (since it is returning an inner promise already), it is a pattern to follow for best practice.
This pattern also means that getData() is called on first use regardless of if the consuming controller accesses the promise. This allows for data to be exposed easily (data binding) without the need to use the promise in some use cases.
Used in controller:
angular.module('appName')
.controller('VeryNiceCtrl', ['$scope','Settings', function ($scope, Settings) {
Settings.promise.success(function(response){
var appSettings = response;
// do stuff
})
}])
Related
I am beginning my development in angular and I don't know much. What I'm trying to do is that I am trying to pass a fairly large collection of data from one controller to another. This is how I managed to do it.
angular.module("myApp").controller("controllerName", function($rootScope, $scope, *...other stuff...*)
{ /* code */ }
Later there is one specific method which is accessed from outside, and I copy the collection like this:
$rootScope.selectedItems = angular.copy($scope.selected.items);
(This is an array of 5k strings)
Which is then catched in another controller. Other developers said it is unsafe to pass this through $rootScope but after the data is passed and copied into local controller, I use this to get rid of the collection in rootScope
delete $rootScope.selectedItems;
Is this a safe way to do this? It works perfectly, and nothing seems dangerous to me
As a general rule, don't use $rootScope to pass data. By using it you make your module dependent on unspecified functionality which may not be a dependency of your module. It's a structural issue which will create problems later.
Instead, use a service:
angular.module("myApp").service("myAppService", function () {
this.selectedItems = [];
});
angular.module("myApp").controller("controllerName1", function(myAppService, $scope) {
$scope.selectedItems = myAppService.selectedItems;
});
angular.module("myApp").controller("controllerName2", function(myAppService, $scope) {
$scope.selectedItems = myAppService.selectedItems;
});
It's also recommended that all your logic goes into services (and factories/providers where appropriate). Controllers should be used only to expose service functionality, unless a necessary special case can be proven. This makes the logic in services easier to unit test.
There are many service are available you should go with broadcast
Here is example for $broadcast service
https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/
I was taught that we use factories/services to eliminate the duplicate coding. Here's a part of the code which works fine.
app.controller('ServicesCtrl',['$scope','DataFactory',function($scope,$http,DataFactory){
DataFactory.GetData('services1.json')
.then(function(response){
$scope.returnedData = response.data;
})
.catch(function(response){
console.log('Error in process',response.status,response.data);
});
}]);
app.controller('ContactCtrl',['$scope','DataFactory', function($scope,DataFactory){
DataFactory.GetData('location.json')
.then(function(response){
$scope.returnedData = response.data;
})
.catch(function(response){
console.log('Error in process',response.status,response.data);
});
}]);
app.factory('DataFactory',['$http',function($http){
var factory = {};
factory.GetData = function(path) {
return $http.get(path);
}
return factory;
}]);
My question is 1. Why use services/factories to make such ajax calls when we have to work on the promises inside controllers? I mean, I have to make the same .then and .catch calls in both the controllers here. Where is the efficiency in it? Is there any better way to do this? Or am I doing this wrong? Is it possible to to work on those promises inside the factories and return the response.data to different controllers?
The thing here is re-usability of code . Now suppose you have a service called
angular.module('test')
.service('testService', function ($http) {
this.getBidsUser = function ($username) {
var endpoint = "bids/users/"+$username;
return $http({
method: 'get',
url: endpoint
});
};
}
which returns bids of a user . You might want to use the same information in different views. So its a good idea to use service so that you dont have to rewrite same code again .
Once more you might want to have all the same end point related service on the same service for maintainability .
You might need to change end points for a service which will be hectic if you do not use service pattern .
Promises arr call backs . If you process those promises inside a service it will not be easy to maintain caller timeline .
Hi we use factories and services
to make the application more modular,
to have the possibility to reuse the code,
to hide the implementation detail
For example a service which makes an http call it may be seen as an high level "service" which gives you back the required object, indipendently by the call type and it's reusable at high level.
The service allows to customize the call parameters, maybe avoiding that some of them are to be specified by the calling controller. Or it can do some preprocessing or post processing, it can do some caching and so on. And its portable, so you can call it each time you need.
For your last question
Is it possible to to work on those promises inside the factories and
return the response.data to different controllers?
Maybe it's possible, but may be complex to implement as it has to do with the timing of the response. Instead i suggest you the $resource service in the module ngResource, which can already do what you neeed.
See docs:
AngularJs Tutorial on $resource
Angularjs Programming guide on $resource
What is the lifecycle of a service (or factory) in angularjs and when is it re-initialzed ?
When Angular bootstraps, it attaches the constructor functions for services to the associated module. This happens once.
angular
.module('myApp')
.service('User', function UserConstructor() {
// stuff
});
When a you try to run a controller or something that depends on a certain service, Angular will inject it for you.
app.controller('FirstCtrl', function FirstCtrlConstructor(User) {
// User is available here
});
Under the hood, angular uses this thing called $injector to do dependency injection for you. It works something like this:
var $injector = {};
$injector.cached = [];
$injector.get = function(service) {
// check if service is in this.cached
// if so, return it
// if not
// 1) instantiate the service
// 2) store it in this.cached
// 3) return it
};
So when Angular sees that it needs to inject User into FirstCtrlConstructor, it calls $injector.get('User') to get the User. Since it hasn't injected User anywhere else before, it'll hit the "if not" condition and:
Call new User().
Store it in $injector.cached for next time.
Return it.
Now let's say that we need to inject User a second time:
app.controller('SecondCtrl', function SecondCtrlConstructor(User) {
// stuff
});
Again, when Angular sees that SecondCtrlConstructor depends on User, it calls $injector.get('User') to get the User so it could inject it. This time, it hits the "if so" condition. Since we previously put User in $injector.cached, it found it there for us. Thus, User doesn't get instantiated again.
Say we have a ThirdCtrl that also depends on User. It too would find it in $injector.cached, and so it wouldn't instantiate UserConstructor. Say that we have myDirective that depends on User. The same thing would happen - it'd find it in $injector.cached and thus wouldn't instantiate it.
This is called the Singleton pattern. It's used when you don't want to instantiate something more than once. Angular uses this for services so they don't get instantiated more than once. The same is true for factories (and probably also true for providers; probably not true for values and constants).
See https://medium.com/#adamzerner/dependency-injection-in-angular-18490a9a934 for some more info.
Services/factories are only initialized once, the first time they are used. From the docs: https://docs.angularjs.org/guide/services
Angular services are:
Lazily instantiated – Angular only instantiates a service when an
application component depends on it.
Singletons – Each component dependent on a service gets a reference to the single instance
generated by the service factory.
As my app initializes, the call to the api happens:
.run(function($ionicPlatform, $http, $localstorage, $model) {
$http.get($model.apiurl).success(function(data) {
$localstorage.setObject('data', data);
// reload template here!
});
})
When the api call has succeeded and the localstorage object is set, I want to reload my template (tab-categories.html) so the data can be displayed. How do I do this, ngRoute, stateProvider, ... ?
You might be missing the point of angular if you ask this question. If your template has values which are bound to a model, then changing those values will automatically update the view on the next digest. It is possible that your asynchronous code (the request) does not trigger a digest, in which case you will have to do it manually. There are many ways to do that: digest and apply
One simple way is to inject $timeout, and do a zero duration timeout (no time argument) with the sensitive code in the body of the function you pass in
Edit: so to answer your question more directly, you should be storing your data somewhere in your application when the call succeeds, and then rely on the angularjs digest loop to update your view. That's one of angulars big work saving features.
Use $route.reload(); method to reload entire page after your successful Transaction, be sure to add dependency injection '$route' in your Controller.
Looking at a RESTful CRUD SPA with angularjs for example.
When using the RESTful approach with Angularjs, I am running into cases where an update/delete/etc. isn't reflected in the list without a hard refresh (F5). It's occurring because the save/update/delete are taking longer than JavaScript takes to run the next command which should update the list.
app.controller('UserDetailCtrl', ['$scope', '$routeParams', 'UserFactory', '$location',
function ($scope, $routeParams, UserFactory, $location) {
// callback for ng-click 'updateUser':
$scope.updateUser = function () {
UserFactory.update($scope.user); // Before this is done
$location.path('/user-list'); // this has already fetched the (outdated) list
};
Coming from e.g. .NET MVC where in a situation like this I would return the List of items from the update (return value). The scaffolded Web API controller is RESTful, and it doesn't return anything from POST, PUT, or DELETE.
// DELETE api/<controller>/5
public **void** Delete(int id)
{
// delete...
}
In Angularjs I could imagine a couple approaches to ensure that the List of users is always up to date. (For example maintain a list in the $scope and modify it simultaneously with the POST/PUT/DELETE calls but it seems cumbersome)
What is the best approach in Angularjs using RESTful style to ensure e.g. a list has the accurate up to date data? If there isn't a general approach, what would be the best way to handle it in this example app.
You could wait for the AJAX request to complete before changing the path:
UserFactory.update($scope.user, function() {
$location.path('/user-list');
});
In a scenario like this I have used the $http or $resource services.
https://docs.angularjs.org/api/ng/service/$http
https://docs.angularjs.org/api/ngResource/service/$resource
Using $http you would redirect in the success callback
Using $resource you can redirect inside the promise .$promise.then