AngularJS migration — the service layer
Bracing Services for an imminent migration.
Intro
—
This article helps to pave a way towards a successful large-scale Angular 1.x code migration to Angular+, with a focus on the service layer. How can you modernize your Service layer to make it more compatible with Angular+?
This article is published incomplete and on-hold for personal reasons. I will be updating relevant information as time allows.
For simplicity, Angular 2/4/5/6/7 and future versions will be generalized as Angular+.
The instability of Angular framework forced me to use React instead. In same spirit, I document the journey in “migration from AngularJS to React” .
Synopsis
—
One of many AngularJS super powers is, and still is, the way it vulgarized dependency injection in JavaScript.
Your recommendation (👏 👏 clapping) is my motivation to followup with even more content. Leave any question you have in comments below, It will be a pleasure to help however I can!
Services abstract business logic away from controllers, which helps to keep controllers skinnier. In some cases, the service layer was used as a model(state) custodian, in mist of an MVC framework that really lacks a model layer.
That is why this article is really dedicated to Service Layer migration.
Service + Data
—
Jason Dobry made data+service presentation that makes sense, when it comes to service/data relationships “Respect your data an introduction to angular data”.
Even though the $scope is used to hold data, it is not designed to be the “Model Layer”, but a kind of state management. You may take it as application context global object.
Among other things, the service layer plays big role when it comes to fetch, transform, store, share data with other parts of the application and other service instances. This aspect didn’t change with Angular+.
The shared state in Angular can be deferred to third party solutions such as RxJS or Flux implementations(Redux, etc). Functional soul-searching of major framework resulted into a resurrection of reactive model, this time to serve as single source of truth.
In Early days, when some Angular Apps started taking off, performance bottlenecks and lack of unified structure, John Papa(John Papa) and Todd Motto(@toddmotto) posted useful articles on best practices Angular apps should follow.
Those good practices continue to save time while migrating from Angular legacy Angular.
The Old Way
—
Business logic tightly coupled to Angular constructs. Not to mention how confusing Service/Factory and Providers are in Angular.
angular.
module('app').
service('BaseService', ['$http', function($http){
return {
getMe: getMe(){
return $http.get('/me');
}
};
}]);Better way
—
Re-organization based on reveal module design pattern, named function and using out-side injector gave a better way to write a service that is usable with Angular but also can be used outside of the Angular framework as an independent function.
angular.module('app').factory('BaseService', BaseService);
BaseService.$inject = ['$http'];function BaseService($http){//expose API first.
var service = {
getMe: getMe
}; return service; /*@return {Promise}*/
function getMe(){
return $http.get('/me');
}
}
The above notation is:
- Readable. It is easy to know about public API first hand.
- Clean semantic. The injector, and Angular Core services are decoupled from function declaration.
DI
—
One of features that helped AngularJS spread like fire, was and still is, a working DI. All Services are injectable(as providers) by default. Newer Injections relies more and more on Annotations, but can be introduced without pulling your hair.
UserService.$inject = ['BaseService'];function UserService(BaseService){
var service { model: model, getProfile: getProfile};
function getProfile(){
return BaseService.getMe().then(function(response){
model[user] = response.data;
return response;
});
}
}
Redux
—
Since the BaseService is top level service(or close to data source), it helps to have additional service to format, and temporarily store date models. Storing data model may change as you adopt Rx or React. In case of Redux, the dependent service can be used to Update shared store after receiving server data. The SettingsService given in example below, uses a StateService(check article on adding Redux to AngularJS apps), formats response, initializes model historical records, and uses Redux state’s dispatch to update centralized state. The model in service can also be exposed outside the service, but its better to use the redux store the single source of truth.
angular.module('app').factory('SettingsService',SettingsService);
SettingsService.$inject = ['BaseService', 'StateService'];function SettingsService(BaseService, StateService){
var service = {history: history};
return service; function history(){
return BaseService.getMe().then(function(response){
model.history = formatHistory(response); StateService.dispatch({
type:'history:loaded', value: model.history
});
//chaining promise
return response;
});
}//end history fn}//end SettingsService
Inject
—
Service has to return a newable function. To make service injectable into other services, Angular+ introduced @Inject annotation, which decorates the final service in a way that it becomes injectable into other services or components.
Inject annotation makes DI feasible. Alternatively, an array of parameters used to do the trick in Angular 1.x.
@Inject
class AuthService(){}# using injectable service.
class UserService(){
constructor(auth: AuthService){
get(){
return auth.isAuthenticated ? {} : [];
}
}
}# ES5
var UserService = ng.core.Class({
constructor:[AuthService,
function(auth){
this.get = function(){return is?{} :[]};
}
]});# Angular 1.x with ES5
function AuthService(){
# reveal pattern
var service = {get: get};
return service;
function get(){ ... }
}# Injecting AuthService
function UserService(AuthService){
# step needed to adapt to Angular+ service definition
this.auth = AuthService;
# without reveal pattern
return {
friends: function getFriends(){
if(this.auth.get()){ ... }
}
}
}# without reveal pattern
return {
friends: function getFriends(){if(this.auth.get()){ }}
}
}
How to load services with Module Loader?
Reading list:
Outro
—
There is no single cardinal way to do the migration from any framework to another. It all comes down to case by case requirements. This article took the migration from a practical standpoint, taking into account tricks that worked for other people, especially in tight budgets and resources scenarios. I hope you come up with your own re-mix as well.
