服务 - 封装可复用代码
在Angular2中，服务用来封装可复用的功能性代码。比如Http服务，封装了ajax请求的细节，在不同的组件中，我们只需要调用Http服务的API接口就可以给组件增加ajax请求的功能了：
Angular2中实现一个服务非常简单直接 ： 定义一个类，然后，它就是服务了：
1 class EzAlgo{ 2 add(a,b){return a+b;} 3 sub(a,b){return a-b;} 4 }
上面的代码定义了一个相当弱智的算法服务EzAlgo，它有两个API - add()用来计算两个数的和，sub()用来计算两个数的差 。在示例中，组件EzApp依赖于这个服务：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Service</title> 6 <script type="text/javascript" src="lib/system@0.16.11.js"></script> 7 <script type="text/javascript" src="lib/angular2.dev.js"></script> 8 <script type="text/javascript" src="lib/system.config.js"></script> 9 </head> 10 <body> 11 <ez-app></ez-app> 12 <script type="module"> 13 import {Component,View,bootstrap} from "angular2/angular2"; 14 import {formDirectives} from "angular2/forms"; 15 16 //定义一个简单的算法服务 17 class EzAlgo{ 18 add(a,b) { return a+b; } 19 sub(a,b) { return a-b; } 20 } 21 22 //组件定义 23 @Component({ 24 selector : "ez-app" 25 }) 26 @View({ 27 directives:[formDirectives], 28 template : ` 29 <form> 30 <input type="text" ng-control="a" [(ng-model)]="a"> 31 - 32 <input type="text" ng-control="b" [(ng-model)]="b"> 33 = 34 {{sub()}} 35 </form>` 36 }) 37 class EzApp{ 38 constructor(){ 39 this.a = 37; 40 this.b = 128; 41 //实例化服务对象 42 this.algo = new EzAlgo(); 43 } 44 add(){ 45 var a = +this.a, 46 b = +this.b; 47 return this.algo.add(a,b); 48 } 49 sub(){ 50 var a = +this.a, 51 b = +this.b; 52 return this.algo.sub(a,b); 53 } 54 } 55 56 bootstrap(EzApp); 57 </script> 58 </body> 59 </html>
输出如下：
