AngularJS服务示例
今天，我们将介绍一个名为AngularJS Services的重要Angular概念。
在上一教程中，我们通过一个简单的示例介绍了AngularJS路由功能。
AngularJS服务
Angular服务是执行某些任务的单例对象。
我们还使用AngularJS服务在整个应用程序中组织和共享代码。
Angular服务遵循单一职责原则(SRP)，并使用依赖项注入(DI)连接在一起。
单一责任原则确保每个对象仅具有单一责任。
例如，控制器负责将模型数据连接到视图。
如果我们使用控制器执行其他逻辑，则将违反单一责任原则。
因此，应该将业务逻辑抽象到服务中，并在需要时将其注入。
这使应用程序更易于管理和测试。
Angular提供了一些有用的服务，例如$http，$log，$filter等。
内置服务始终以$为前缀。
在此AngularJS服务教程中，我们将创建自己的Angular服务。
创建和注册Angular服务
Angular服务是通过将它们注册到要其中运行的模块来创建的。
有三种创建Angular服务的方法。
他们正在使用Factory，Service和Provider。
首先，使用以下语法创建名为app的模块：
var app = angular.module("app", []);
使用Factory的AngularJS服务
创建服务的最常见方法是使用模块的Factory API。
我们使用工厂方法创建一个对象，向其添加属性并返回相同的对象。
以后可以将其注入到控制器，服务，过滤器或者指令之类的组件中。
这是使用Factory服务的一般语法。
app.factory('factoryName',function(){
return factoryObj;
});
使用服务创建Angular服务
这是用new关键字实例化的。
您将获得传递给服务的函数实例。
该对象实例成为AngularJS注册的服务对象，并注入到所需的组件中。
我们使用此关键字将属性和功能添加到该服务对象。
与工厂方法不同，此方法不返回任何内容。
这是使用"服务"的一般语法。
app.service('serviceName',function(){ });
使用提供程序的AngularJS服务示例
提供程序是您可以传递给.config()函数的唯一服务。
如果要在服务对象可用之前为其提供模块范围的配置，则使用提供程序。
它使用$get()函数返回值。
这是创建和配置Provider的一般语法。
//syntax for creating a provider
app.provider('providerName',function(){ });
//syntax for configuring a provider
app.config(function(providerNameProvider){});
AngularJS服务示例
下面的示例演示工厂，服务和提供者服务的用法。
我们将开发一个示例消息服务，该服务将使用所有这些服务API打印出一条消息。
下面显示的代码(index.html)是我们的视图。
我们需要使用Service API获取serviceMsg，factoryMsg和providerMsg，并使用控制器将数据连接到此视图。
<html>
<head>
<title>AngularJS Services Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<div>
<div ng-app="mainApp" ng-controller="myController">
<p>Message From Service: {{serviceMsg}}</p>
<p>Message From Factory: {{factoryMsg}}</p>
<p>Message From Provider:{{providerMsg}}</p>
</div>
</div>
</body>
</html>
下面显示的代码定义了应用程序中使用的服务和控制器。
main.js
var app = angular.module('mainApp', []);
//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("Hello, I'm From Provider");
});
//defining controller
app.controller('myController', function ($scope, myService, myFactory, configurable) {
$scope.serviceMsg = myService.setMessage("Hello, I'm From Service");
myFactory.setMessage("Hello, I'm From Factory ");
$scope.factoryMsg = myFactory.message;
$scope.providerMsg= configurable.message;
});
AngularJS服务示例代码说明
使用angular.module('mainApp'，[]);创建了一个名为mainApp的模块；
在模块中使用service方法定义了服务，您可以看到我们如何向服务对象添加属性和功能以获取消息。
我们使用this关键字将属性添加到服务对象。在模块中使用工厂方法定义了服务，并返回了服务对象。
在模块中使用提供者方法定义了服务，并使用$get()函数获取消息。
使用模块中的config()函数配置提供程序以设置消息。
定义了一个控制器，并将所有服务注入到该控制器。
设置出厂和维修信息。
最后，控制器使用$scope将所有消息连接到视图。
