AngularJS services
are JavaScript functions for specific tasks, which can be reused throughout the
application.
Creating and Registering
Angular Services
1)AngularJS services using
Factory
2)Create angular services
using Service
3)AngularJS services example
using Provider
AngularJS Services Example
Output
AngularJS Services Example
code description
It is easily
maintainable and testable.
Inbuilt or predefined services
are always prefixed with $ symbol.AngularJS provides many inbuilt services for
example, $https:, $route, $window, $location etc. Each service is responsible
for a specific task for example, $https: is used to make ajax call to get the
server data. $route is used to define the routing information and so on.
Notes:
Most AngularJS services interact with the controller, model or custom directives. However, some services interact with view (UI) also for UI specific tasks.
Notes:
Most AngularJS services interact with the controller, model or custom directives. However, some services interact with view (UI) also for UI specific tasks.
Creating and Registering
Angular Services
There are three ways to
create an angular service. They are Factory, Service and Provider.
First, create a module
named app using the following syntax:
var app =
angular.module("app", []);
1)AngularJS services using
Factory
The most
common way to create a service is by using the Module’s Factory API. We use the factory method to create an object, add
properties to it and return the same object.
Syntax:
app.factory('factoryName',function(){
return factoryObj;
});
2)Create angular services
using Service
This is
instantiated with the new keyword. You will be provided with an instance of the
function passed to the service..
We use this
keyword to add properties and functions to this service object and it does not
return anything.
Syntax:
app.service('serviceName',function(){
});
3)AngularJS services example
using Provider
Providers are
the only service you can pass into your .config() function.
Providers are used when you want to provide module-wide configuration for your
service object before making it available. It returns value by using $get() function.
Syntax
for creating a provider
app.provider('providerName',function(){
});
Syntax for configuring a provider
app.config(function(providerNameProvider){});
AngularJS Services Example
The following
example demonstrates the usage of factory, service and provider services. The
code shown below (demo.html) is our view. We need to get the serviceMsg,
factoryMsg and providerMsg using the Service APIs and we use
controller to write the data to this view.
Demo.html
<html>
<head>
<title>AngularJS Services
Example</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script
src="lpdemo.js"></script>
</head>
<body>
<div>
<div ng-app="myApp"
ng-controller="myController">
<p><b>ServiceDemo:
</b>{{serviceMsg}}</p>
<p><b>FactoryDemo
</b>{{factoryMsg}}</p>
<p><b>ProviderDemo</b>{{providerMsg}}</p>
</div>
</div>
</body>
</html>
lpdemo.js
var app
= angular.module('myApp', []);
//define a service named myService
app.service('myService',
function () {
this.message = '';
this.setMessage = function (newMessage)
{
this.message = newMessage;
return this.message;
};
});
//define factory named 'myFactory'
app.factory('myFactory',
function () {
var obj = {};
obj.message = '';
obj.setMessage = function (newMessage) {
obj.message = newMessage;
};
return obj;
});
//Defining a provider 'configurable'
app.provider('configurable',
function () {
var returnMessage = '';
this.setMessage = function (newMessage) {
returnMessage = newMessage;
};
this.$get = function () {
return {
message: returnMessage
};
};
});
//configuring provider
app.config(function
(configurableProvider) {
configurableProvider.setMessage("Hi
this is Provider Example");
});
//defining controller
app.controller('myController',
function ($scope, myService, myFactory, configurable) {
$scope.serviceMsg =
myService.setMessage("Hi,this is Service Example");
myFactory.setMessage("Hi,this is Factory
Example ");
$scope.factoryMsg = myFactory.message;
$scope.providerMsg= configurable.message;
});
Output
ServiceDemo: Hi,this is Service Example
FactoryDemo Hi,this is Factory Example
ProviderDemoHi this is Provider Example
AngularJS Services Example
code description
1. Created
a module named myApp using angular.module(‘myApp’,
[]);
2. Defined
a service using service method in the module and you
can see how we added properties and function to the service object for getting
the message. We used this keyword to add the properties to the service
object.
3. Defined
a service using factory method in the module and
returned the service object.
4. Defined
a service using provider method in the module and
used $get() function to get the message.
5. Configured
the provider using the config() function in the
module to set the message.
6. Defined
a controller and all the services are injected to the controller.
7. Set
the factory and service messages.
8. Finally
controller wire all the messages to the view using $scope.
Python is an open-source, high level, interpreted programming language which offers great opportunities for object-oriented programming. Choosing a python training program from Red Prism Group, which is best training institute for python in noida.
ReplyDelete