{"id":18659,"date":"2015-03-30T15:28:28","date_gmt":"2015-03-30T09:58:28","guid":{"rendered":"https:\/\/2thenew.online\/blog\/?p=18659"},"modified":"2017-08-03T15:57:45","modified_gmt":"2017-08-03T10:27:45","slug":"configurable-service-in-angularjs","status":"publish","type":"post","link":"https:\/\/2thenew.online\/blog\/configurable-service-in-angularjs\/","title":{"rendered":"Configurable Service in AngularJS"},"content":{"rendered":"

Angular<\/a> provide services for handling non-view logic, communication with server(back-end) and can holds data & state. These services are singleton objects that can be used to share and organize code. For doing so, angular provides us five cool ways to make a service on the bases of once need.<\/p>\n

Following are the five approaches that can be used to create a service in angular:<\/p>\n

1) Value<\/p>\n

[code language=”javascript”]app.value(‘name’, ‘Vibhor Kukreja’);[\/code]<\/p>\n

2) Constant<\/p>\n

[code language=”javascript”]app.constant(‘name’, ‘Vibhor Kukreja’);[\/code]<\/p>\n

3) Factory<\/p>\n

[code language=”javascript”]app.factory(‘myService’, function(){
\n return{
\n getName: function() {
\n return ‘Vibhor Kukreja’;
\n }
\n }
\n});[\/code]<\/p>\n

4) Service<\/p>\n

[code language=”javascript”]app.service(‘myService’, function() {
\n var name = ‘Vibhor Kukreja’;
\n this.myName = function() {
\n return name;
\n }
\n});[\/code]<\/p>\n

5) Provider<\/p>\n

[code language=”javascript”]app.config(function($provide){
\n\t\t$provide.provider(‘myService’, function(){
\n\t\t\treturn {
\n\t\t\t\t$get: function() {
\n\t\t\t\t\treturn {
\n\t\t\t\t\t\tname: ‘Vibhor Kukreja’
\n\t\t\t\t\t\t}
\n\t\t\t\t\t}
\n\t\t\t\t}
\n\t\t});
\n});[\/code]<\/p>\n

All these approaches have their own key use cases. Depending upon the use case, one can pick an approach to implement a service.<\/p>\n

The main focus of the blog is on the Provider approach of Angular Services.<\/p>\n

The provider approach allows us to make a service from a much lower level, which makes the service to be configurable. In this, we have a function that returns an object with a function named $get.
\nThe angular calls this $get function once to create your service(since it is singleton) at the start application<\/p>\n

Now, we can configure the service with the provider approach before it gets created.<\/p>\n

[code language=”javascript”]app.config(function($provide){
\n\t$provide.provider(‘myService’, function(){
\n\t\tvar msg;
\n\t\treturn {
\n\t\t\tmyConfig: function(greet) {
\n\t\t\t\t\tmsg = greet;
\n\t\t\t},
\n\t\t\t$get: function() {
\n\t\t\t\treturn {
\n\t\t\t\t\tname: msg + ‘ Vibhor Kukreja’
\n\t\t\t\t\t}
\n\t\t\t\t}
\n\t\t\t}
\n\t});
\n});<\/p>\n

app.config(function (myServiceProvider)) {
\n\tmyServiceProvider.myConfig(‘Hello’);
\n}[\/code]<\/p>\n

The thing that we need to remember is that, the $get function is only called once, at the time of application configuration phase<\/a>. And once you have used the service on run-time then you can’t re-configure it.<\/p>\n

Hope this will help.<\/p>\n

Read Further on AngularJS Series<\/span><\/p>\n