How to create a service in Angular? 5 ways to find out!

This article will introduce to you Angular 5 ways to create services. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

config configuration block

The running of Angular applications is mainly divided into two parts: app.config() and app.run( ), config is the stage where you set up any providers so that the application can use the correct services. Note that only providers can be injected in the configuration block (the only two exceptions are $provide and $injector). And provider can only be injected in config. Among the five ways Angular injects services, only services injected through provider and constant can depend on config.

app.controller('MyController', function ($httpProvider) {
	//错误，无法在控制器中注入服务提供者
});
app.config(function ($http) {
	//错误，配置块中只能注入服务
});

Related recommendations: "angularjs tutorial"

About some built-in services

Controller functions can be injected Yes, but the controller itself cannot be injected into anything. However, there is a built-in AngularJS service called $controller, which is responsible for setting up your controller. When calling myMod.controller(...), you actually Is the provider that accessed this service.

Code:

myMod.controller('MainController', function($scope) {
  // ...
});

actually does the following:

myMod.config(function($controllerProvider) {
  $controllerProvider.register('MainController', function($scope) {
// ...
  });
});

Similar to filter and directive, filter will use a service called $filter and its provider $filterProvider, and the directive uses a service called $compile and its provider $compileProvidr.

5 injection methods of service

factory()

The dependency injector will use the factory function to create an instance of the service , the factory function returns an object.

myModule.factory('myService', function () {
	var myService = {};
	//添加myService的一些属性和方法
	return myService;
});

service()

Service injection passes a function to the service, and then uses the new operation of javascript to generate a service, that is to say, attach the attribute to this. That’s it. When using this method, be careful of the this trap of JavaScript. This does not always point to the execution function itself, but may also point to the top-level object window.

myModule.service('myService', function () {
	this.foo = 'bar';
});

provider()

In fact, the factory and service we mentioned above are implemented as syntactic sugar on the provider, and the service injected through the provider can be used as a provider When used in a configuration block, the provider must implement a $get attribute.

myMod.provider('greeting', function() {
  var text = 'Hello, ';

  this.setText = function(value) {
     text = value;
  };

  this.$get = function() {
     return function(name) {   //$get必须实现，可以返回一个函数或者一个对象
         alert(text + name);
     };
  };
});

myMod.config(function(greetingProvider) {
  greetingProvider.setText("Howdy there, ");
});

myMod.run(function(greeting) {
  greeting('Ford Prefect');
});

constant(name,value)

constant is mainly used to register a constant, value is a value or json object, usually this constant is mainly used for configuration and frequently used The data of constantly configured services can be injected into config.

angular.module('myApp', [])
.constant('apiKey', '123123123')
.config(function(apiKey) {
// 在这里apiKey将被赋值为123123123
// 就像上面设置的那样
})

value(name,value)

value is mainly used to store some data or methods for use. If this data or method needs to be modified, use value To create a service, the parameter value is a value or json object. In addition, it cannot be relied on in config.

serviceApp.value('myConfig',{
    name:'code_bunny',
    age:12,
    getId:function(){
        return 1
    }
});

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of How to create a service in Angular? 5 ways to find out!. For more information, please follow other related articles on the PHP Chinese website!