Service does some sort of stuff as an object that contains business logic especially hold logic to fetch data and manipulating it. There may be many services call in Angular JS that are wired together using dependency injection ( DI ).
Lets give a real world example. Say you are constructing a building. What part or portion you are visualizing the complete or non-complete building compare it with view concept. Now, to look after the constructive work more manageable way you have recruited some contractors whose activities are different to serve
their purposes. Say one contractor activity is only for the building foundation work. Another is doing to make up-rise storey. Other is engaged for the building electrical wiring activities and thus go on. So likely this you can recruit more contractors or one contractor to manage the whole work. In here the contractors are binding to implement their logic activists to complete the building task proportionally or fully. That means that they are the controller binding in their specific tasks to give the view of the building. Now what? Say the remaining task is giving the shape of interior design of the building and same way you engaged another contractor I mean controller. Assume this controller is expert everything except the painting services. So he hired immediately painting service expert to engage in painting logic stuffs. So we can now compare this hiring nifty! painting expert as dependency injectable services binding by the interior design controller to view the painted complete building. Like the interior design controller above any other controller can inject pre-defined services or can create services to make it injectable to meet the purpose of view. Hope you are pretty clear about the concept of injectable services. Now we will go through details about the Angular JS services step by step.
2. The followings are some important facts about Angular JS Services.
A. Angular services are used as a dependency for the component ( controller, service, filter or directive ) that depends on the service. Angular's dependency injection subsystem takes care of the rest.
B. Lazily instantiated – Angular only instantiates a service when an application component depends on it.
C. Singletons – Each component dependent on a service gets a reference to the single instance generated by the service factory.
D. Angular offers several useful services (like $http, $route, $window, $location etc. ), but for most applications you'll also want custom services ( to create your own).
E. Like other core Angular identifiers built-in services always start with $ (e.g. $http)
For hands-on practice all of the code mentioned here I suggest you open this nice JS editor tool http://jsfiddle.net/ in different tab of your browser.
3. Let's diagnosis our sample calculator code given below to understand directives and controller.
Ok enough talk, now lets a look at this simple example. Open http://jsfiddle.net in your browser in different tab and test the code.
Ok enough talk, now lets a look at this simple example. Open http://jsfiddle.net in your browser in different tab and test the code.
The code is for just a simple calculator in Angular JS way. There will be an input box and two buttons, Square and Cube. We will input number in the input field and result should be Square or Cube according we press the button.
Write this code in the jsfiddle html panel ( I am telling you to write not to copy paste because writing code much and much will let you to understand clearly )
<body ng-app="myApp">
<div ng-controller="myController">
Input number : <input ng-model="myModel" />
<button ng-click="myClickSquare()">Square</button>
<button ng-click="myCLickCube()">Cube</button>
<p>Result : {{result}}</p>
</div>
</body>
and Write this code in the jsfiddle javascript panel
var myApp = angular.module('myApp', []);
myApp.controller('myController', ['$scope', function($scope){
$scope.myClickSquare = function(){
$scope.result = $scope.myModel * $scope.myModel;
};
$scope.myCLickCube = function(){
$scope.result = $scope.myModel * $scope.myModel * $scope.myModel;
}
}]);
Run the code and In jsfiddle result panel you will see an input box with Square and Cube button. Enter the desiring number and press one of the button. Nice! huh! you will see the result bottom regarding the button you pressed.
Ok, lets diagnosis the code what Angular JS is telling about them before we jumping over the Service details.
If you are new in Angular JS you probably get confused first what are these newly coming markup attributes doing here, like :
ng-app
ng-controller
ng-model
ng-click and {{ }} expression
ng-app, ng-controller, ng-model, ng-click these are called directives and known to Angular JS by HTML compiler ($compile). We are using these directives with their names like, ng-app ="myApp", ng-controller="myController" etc. for referencing purposes to utilize the support of principles given by Angular JS behind the model-view-controller design patterns.
Directives = Directives are reusable UI elements. At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children. Angular comes with a set of these directives built-in, like ngBind, ngModel, and ngView. Besides the built in directives you can also create your own directive. It is best to know how Angular's HTML compiler determines when to use a given directive. Say when we will use <input /> tag it matches the ngModel directive.
An angular directive comes in four flavor in terms of appearance
a. A new html element <date-picker></date-picker>
b. A attribute on an element <div date-picker></div>
c. As a class <div class="date-picker"></div>
d. As comment <!--directive: date-picker -->
Best Practices = Prefer using the dash-delimited format (e.g. ng-bind for ngBind, ng-moel for ngModel, ng-view for ngView etc. ). Prefer using directives via tag name and attributes over comment and class names. Doing so generally makes it easier to determine what directives a given element matches. Prefer using directives via tag name <date-picker></date-picker> and attributes <div date-picker></div> over comment and class names. Doing so generally makes it easier to determine what directives a given element matches.
Write this code in the jsfiddle html panel ( I am telling you to write not to copy paste because writing code much and much will let you to understand clearly )
<body ng-app="myApp">
<div ng-controller="myController">
Input number : <input ng-model="myModel" />
<button ng-click="myClickSquare()">Square</button>
<button ng-click="myCLickCube()">Cube</button>
<p>Result : {{result}}</p>
</div>
</body>
and Write this code in the jsfiddle javascript panel
var myApp = angular.module('myApp', []);
myApp.controller('myController', ['$scope', function($scope){
$scope.myClickSquare = function(){
$scope.result = $scope.myModel * $scope.myModel;
};
$scope.myCLickCube = function(){
$scope.result = $scope.myModel * $scope.myModel * $scope.myModel;
}
}]);
Run the code and In jsfiddle result panel you will see an input box with Square and Cube button. Enter the desiring number and press one of the button. Nice! huh! you will see the result bottom regarding the button you pressed.
Ok, lets diagnosis the code what Angular JS is telling about them before we jumping over the Service details.
If you are new in Angular JS you probably get confused first what are these newly coming markup attributes doing here, like :
ng-app
ng-controller
ng-model
ng-click and {{ }} expression
ng-app, ng-controller, ng-model, ng-click these are called directives and known to Angular JS by HTML compiler ($compile). We are using these directives with their names like, ng-app ="myApp", ng-controller="myController" etc. for referencing purposes to utilize the support of principles given by Angular JS behind the model-view-controller design patterns.
Directives = Directives are reusable UI elements. At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children. Angular comes with a set of these directives built-in, like ngBind, ngModel, and ngView. Besides the built in directives you can also create your own directive. It is best to know how Angular's HTML compiler determines when to use a given directive. Say when we will use <input /> tag it matches the ngModel directive.
An angular directive comes in four flavor in terms of appearance
a. A new html element <date-picker></date-picker>
b. A attribute on an element <div date-picker></div>
c. As a class <div class="date-picker"></div>
d. As comment <!--directive: date-picker -->
Best Practices = Prefer using the dash-delimited format (e.g. ng-bind for ngBind, ng-moel for ngModel, ng-view for ngView etc. ). Prefer using directives via tag name and attributes over comment and class names. Doing so generally makes it easier to determine what directives a given element matches. Prefer using directives via tag name <date-picker></date-picker> and attributes <div date-picker></div> over comment and class names. Doing so generally makes it easier to determine what directives a given element matches.
For details about directives you can see developer guide in their official site https://docs.angularjs.org/guide.
I will come up with one of my post about directive details shortly.
Enough for directives. Now lets the time to diagnosis the JS code that we wrote in jsfiddle javascript panel.
Angular JS encourage the use of Model-View-Controller design pattern to decouple the code and to separate concerns. The view is the projection of the model through the HTML Template. In our example above the view component is constructed by Angular in the markup within the body tag as we applied attribute <body ng-app="myApp">. We have added a directive called ng-controller which attaches a myController controller to the DOM at this point. The expression in curly braces in the HTML Template {{result}} denote bindings which is referring to our application model, which is setup in our myController controller.
in this line myApp.controller('myController', ['$scope', function($scope) { } ] ) ; we declared a controller called myController which is same in the view template ng-controller = "myController" and registered it in an Angular JS module, myApp in this line of code var myApp = angular.module('myApp', [ ] ) ; ( ng-app="myApp" ) . Notice that our ng-app directive (on the <html> tag) now specifies the myApp module name as the module to load when bootstrapping the Angular application.
Now take a close look what is happening insight the controller construction function that is used to augment the Angular scope. When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller's constructor function. A new child scope will be available as an injectable parameter to the Controller's constructor function as $scope.
In our calculator example above a data model ( Square and Cube calculation and result ) is now instantiated within the myController controller and bindings the data through $scope to output in view template where we set { { result } } . We have now realized that the controller allows us to establish data-binding between the model and the view by attaching the calculator data to the $scope that was injected into our controller function.
4. Its time to understand Angular JS services.
You have noticed already besides the data bindings to model and view in our calculator example code controller also has to concerned about the calculation logic but separation of concern is the main concentration while designing an Angular JS application.
Controller must be responsible for binding model data to views using $scope. It does not contain logic to fetch the data or manipulating it. So we will create our custom Angular JS service to handle our sample calculation functionality as a separate logical unit and later we will show how to inject our this custom service object whenever we want to use them.
Before we go further to create our custom service object we should familiar with some Angular JS dependency injection terms.
Explicit Dependency Injection
A component should explicitly define its dependencies using Inline array injection annotation (preferred) methods like the following controller component :
myApp.controller(' myController ', [ '$scope', 'calculation', function($scope, calculation ) {
---
} ] );
Implicit Dependency Injection
Even if you don't annotate your dependencies, Angular's DI can determine the dependency from the name of the parameter :
myApp.controller(' myController ', function($scope, calculation ) {
---
} ) ;
Services can have also their own dependencies
Lets we have a custom factory service myCalculation registered with our myApp module which have also dependencies services provided by Angular JS internally :
myApp.factory( 'myCalculation ', [' $location ' , ' $window ' , ' $http' , function($http ) {
---
} ] ) ;
Angular JS internal service components
Angular JS internally provide many services that we can use within any component as a dependency like the following :
myApp.factory( 'myCalculation ', [' $location ' , ' $window ' , ' $http' , function($http ) {
---
} ] ) ;
there are other useful services such as $route, $animate, $filter etc. You can know details Angular JS internal services to their site https://docs.angularjs.org/api/ng/service
Creating Angular JS custom services
There are two simple ways to declare Angular JS services , one is service( ) method and the another is factory( ) method. They are defined by registering their name and method with an angular module. Both service function and factory function generates the single object or function that represents the service to the rest of the application. The object or function returned by the service is injected into any component (controller, service, filter or directive) that specifies a dependency on the service.
Say, we are going to create a myCalculator service using service ( ) function for our sample calculator Angular JS example mentioned above.
Using service( ) method we can declare and register our custom service myCalculator with myApp module and injecting it as a dependency with the myController component like the following :
var myApp = angular.module('myApp', [ ]);
myApp.controller ( 'myController', ['$scope', myCalculator, function($scope, myCalculator) {
} ] ).
service ('myCalculator', function ( ) {
this.method1 = function ( ) {
return expression;
} ;
this.method2 = function ( ) {
return expression;
} ;
} };
Lots of description. Now we will modify our code of the sample calculator by separating its calculation logical unit from the controller to a service method single object and will inject the service as a dependency within the controller like the painting service hired by interior design controller that we have given real world example at the top of this article.
So, open your jsfiddle JS editor tool and write the modified code give below in jsfiddle HTML panel.
<body ng-app="myApp">
<div ng-controller="myController">
Input number : <input ng-model="myModel" />
<button ng-click="myClickSquare ( myModel ) ">Square</button>
<button ng-click="myCLickCube ( myModel ) ">Cube</button>
<p>Result : { { result } }</p>
</div>
</body>
Take a closer look that we parametrized the ng-click attribute method with the ng-model value just by passing its name for getting the user input value to process inside the service object .
now in jsfiddle JavaScript panel write also the following code.
var myApp = angular.module('myApp', []);
myApp.controller('myController', ['$scope', 'myCalculator', function($scope, myCalculator){
$scope.myClickSquare = function(clickSquareValue){
$scope.result = myCalculator.square(clickSquareValue);
};
$scope.myCLickCube = function(clickCubeValue){
$scope.result = myCalculator.cube(clickCubeValue);
}
}]).
service('myCalculator', function( ){
this.square = function(clickSquareValue ) {
return clickSquareValue*clickSquareValue;
};
this.cube = function(clickCubeValue ) {
return clickCubeValue*clickCubeValue*clickCubeValue;
};
});
See! How we separated the service function/object as a single logical unit from the controller and injected it as a dependency within the controller construction component ?
To define Angular JS service factory for our calculator application we can declare and assign methods to it like the following.
var myApp = angular.module('myApp', [ ]);
myApp.controller ( 'myController', ['$scope', myCalculator, function($scope, myCalculator) {
} ] ).
factory ('myCalculator', function ( ) {
var data= { } ;
data.method1 = function ( ) {
return expression;
} ;
data.method2 = function ( ) {
return expression;
} ;
return data;
} };
{ { Try to taste it by doing yourself of the remaining tasks. } }
This is just beginning and we have understand why should we need Angular JS services regarding separation concern, how we can create or define or declare services function / object and will use them as a dependency within the Angular JS components. If you found this article is helpful please feel free to like or post your comments. Thanks.
My Next Article : Step by Step guide creating SPA template using twitter bootstrap and Angular JS.
Saifulmasud
22th May 2014
Angular JS encourage the use of Model-View-Controller design pattern to decouple the code and to separate concerns. The view is the projection of the model through the HTML Template. In our example above the view component is constructed by Angular in the markup within the body tag as we applied attribute <body ng-app="myApp">. We have added a directive called ng-controller which attaches a myController controller to the DOM at this point. The expression in curly braces in the HTML Template {{result}} denote bindings which is referring to our application model, which is setup in our myController controller.
in this line myApp.controller('myController', ['$scope', function($scope) { } ] ) ; we declared a controller called myController which is same in the view template ng-controller = "myController" and registered it in an Angular JS module, myApp in this line of code var myApp = angular.module('myApp', [ ] ) ; ( ng-app="myApp" ) . Notice that our ng-app directive (on the <html> tag) now specifies the myApp module name as the module to load when bootstrapping the Angular application.
Now take a close look what is happening insight the controller construction function that is used to augment the Angular scope. When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller's constructor function. A new child scope will be available as an injectable parameter to the Controller's constructor function as $scope.
In our calculator example above a data model ( Square and Cube calculation and result ) is now instantiated within the myController controller and bindings the data through $scope to output in view template where we set { { result } } . We have now realized that the controller allows us to establish data-binding between the model and the view by attaching the calculator data to the $scope that was injected into our controller function.
4. Its time to understand Angular JS services.
You have noticed already besides the data bindings to model and view in our calculator example code controller also has to concerned about the calculation logic but separation of concern is the main concentration while designing an Angular JS application.
Controller must be responsible for binding model data to views using $scope. It does not contain logic to fetch the data or manipulating it. So we will create our custom Angular JS service to handle our sample calculation functionality as a separate logical unit and later we will show how to inject our this custom service object whenever we want to use them.
Before we go further to create our custom service object we should familiar with some Angular JS dependency injection terms.
Explicit Dependency Injection
A component should explicitly define its dependencies using Inline array injection annotation (preferred) methods like the following controller component :
myApp.controller(' myController ', [ '$scope', 'calculation', function($scope, calculation ) {
---
} ] );
Implicit Dependency Injection
Even if you don't annotate your dependencies, Angular's DI can determine the dependency from the name of the parameter :
myApp.controller(' myController ', function($scope, calculation ) {
---
} ) ;
Services can have also their own dependencies
Lets we have a custom factory service myCalculation registered with our myApp module which have also dependencies services provided by Angular JS internally :
myApp.factory( 'myCalculation ', [' $location ' , ' $window ' , ' $http' , function($http ) {
---
} ] ) ;
Angular JS internal service components
Angular JS internally provide many services that we can use within any component as a dependency like the following :
myApp.factory( 'myCalculation ', [' $location ' , ' $window ' , ' $http' , function($http ) {
---
} ] ) ;
there are other useful services such as $route, $animate, $filter etc. You can know details Angular JS internal services to their site https://docs.angularjs.org/api/ng/service
Creating Angular JS custom services
There are two simple ways to declare Angular JS services , one is service( ) method and the another is factory( ) method. They are defined by registering their name and method with an angular module. Both service function and factory function generates the single object or function that represents the service to the rest of the application. The object or function returned by the service is injected into any component (controller, service, filter or directive) that specifies a dependency on the service.
Say, we are going to create a myCalculator service using service ( ) function for our sample calculator Angular JS example mentioned above.
Using service( ) method we can declare and register our custom service myCalculator with myApp module and injecting it as a dependency with the myController component like the following :
var myApp = angular.module('myApp', [ ]);
myApp.controller ( 'myController', ['$scope', myCalculator, function($scope, myCalculator) {
} ] ).
service ('myCalculator', function ( ) {
this.method1 = function ( ) {
return expression;
} ;
this.method2 = function ( ) {
return expression;
} ;
} };
Lots of description. Now we will modify our code of the sample calculator by separating its calculation logical unit from the controller to a service method single object and will inject the service as a dependency within the controller like the painting service hired by interior design controller that we have given real world example at the top of this article.
So, open your jsfiddle JS editor tool and write the modified code give below in jsfiddle HTML panel.
<body ng-app="myApp">
<div ng-controller="myController">
Input number : <input ng-model="myModel" />
<button ng-click="myClickSquare ( myModel ) ">Square</button>
<button ng-click="myCLickCube ( myModel ) ">Cube</button>
<p>Result : { { result } }</p>
</div>
</body>
Take a closer look that we parametrized the ng-click attribute method with the ng-model value just by passing its name for getting the user input value to process inside the service object .
now in jsfiddle JavaScript panel write also the following code.
var myApp = angular.module('myApp', []);
myApp.controller('myController', ['$scope', 'myCalculator', function($scope, myCalculator){
$scope.myClickSquare = function(clickSquareValue){
$scope.result = myCalculator.square(clickSquareValue);
};
$scope.myCLickCube = function(clickCubeValue){
$scope.result = myCalculator.cube(clickCubeValue);
}
}]).
service('myCalculator', function( ){
this.square = function(clickSquareValue ) {
return clickSquareValue*clickSquareValue;
};
this.cube = function(clickCubeValue ) {
return clickCubeValue*clickCubeValue*clickCubeValue;
};
});
See! How we separated the service function/object as a single logical unit from the controller and injected it as a dependency within the controller construction component ?
To define Angular JS service factory for our calculator application we can declare and assign methods to it like the following.
var myApp = angular.module('myApp', [ ]);
myApp.controller ( 'myController', ['$scope', myCalculator, function($scope, myCalculator) {
} ] ).
factory ('myCalculator', function ( ) {
var data= { } ;
data.method1 = function ( ) {
return expression;
} ;
data.method2 = function ( ) {
return expression;
} ;
return data;
} };
{ { Try to taste it by doing yourself of the remaining tasks. } }
This is just beginning and we have understand why should we need Angular JS services regarding separation concern, how we can create or define or declare services function / object and will use them as a dependency within the Angular JS components. If you found this article is helpful please feel free to like or post your comments. Thanks.
My Next Article : Step by Step guide creating SPA template using twitter bootstrap and Angular JS.
Saifulmasud
22th May 2014