Services
In AngularJS, there are five different service types.
- value
- constant
- factory
- service
- provider
Each type of services has its own unique characteristics that makes it useful for handling a certain type of problems. This blog post will talk about value and constant services.
value
value is the simplest of all services. A value service literally provides predefined value to the object.
Below is the service.js. Here we defined a value called message that contains the string "Hello world from value!"
1
2
3
//service.js
angular.module("services", [])
.value("message", "Hello world from value!");
main.js below defines the controller for this app. Notice that services module is injected to this module. This is required because the components defined in the services module are by default not accessible by the root module. Line 2 means that the root module depends on the services module to work.
1
2
3
4
5
//main.js
angular.module("root", ["services"])
.controller("index", ["$scope", "message", function($scope, message) {
$scope.message = message;
}]);
Lastly, is the index.html that will print the message defined by the value in service.js. This index.html will be used throughout this blog post.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- index.html -->
<!DOCTYPE html>
<html ng-app="root">
<head lang="en">
<meta charset="utf-8">
<title>Services-Constant-Value</title>
</head>
<body>
<div ng-controller="index">
<h1>{{message}}</h1>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="service.js"></script>
</body>
</html>
constant
Declaring constant is very similar to how you would declare a value. Below is an example of how constant is declared; referencing from the above example:
1
.constant("message", "Hello World from constant!")
If you were to replace line 3 in the service.js with the above code, you will get Hello World from constant! printed out on your browser. You may be wondering what is the difference between value and constant then since both of them seems to perform similar task?
The difference between them is that constant service is able to be injected to the config() but value cannot. This is because config() are executed before services are instantiated and therefore, we cannot inject the value service because it is yet to be created.
Now, we’ll take a look at a more concrete example on how constant service is injected to the config(). The example below will output Hello world from constant! to your browser.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//service.js
angular.module("services", [])
//.value("message", "Hello world from value!")
.constant("message", "Hello world from constant!")
.provider("greet", function() {
var type;
return {
setType: function (value) {
type = value
},
$get: function(){
return {
message: type,
}
}
}
})
1
2
3
4
5
6
7
8
//main.js
angular.module("root", ["services"])
.config(function (greetProvider, message) {
greetProvider.setType(message)
})
.controller("index", function($scope, greet) {
$scope.message = greet.message;
});
Let’s do some experiment and try to uncomment line 3 and comment line 4. Test out the code on your browser and see what happens.
You will not see the Hello world from constant! output anymore. If you take a look at your console you will see an error message. This is because value service does not exits yet when the config() executes.
I’ll discuss about the remaining three services ( factory, service and provider) in my next post. Stay tuned!