Angular应用由Ts和Html两部分构成，本文介绍第一部分。

Angular Ts的封装

　　Ts是Angular的代码部分，用于编写页面逻辑。

依赖注入( Dependency Injection )

　　Ioc(Inversion of Control)已经成为.Net Core服务端编程的标配，Ioc解耦了类和依赖类之间的创建关系，让你开发出低耦合高内聚的系统。

　　有了Ioc，你就可以面向抽象编程，注入依赖的接口，直接使用即可，而不用关心这个对象是如何创建出来的，也不用关心它具体是什么类型。

　　Angular革命性的把Ioc引入到客户端脚本编程，从这里也可以看出，Angular实际上更适合具有服务端编程经验的开发人员。

　　依赖注入是Ioc的一种使用模式，最常见的是构造方法依赖注入，将依赖对象定义在构造方法参数上，运行时，Ioc框架会把依赖对象“推送”进来，从使用的角度看，业务代码并不知道Ioc的存在，业务代码未与Ioc框架耦合，极易测试，代码也极度清爽，这一度让依赖注入成为Ioc的代名词，也是Ioc的推荐用法。

　　当在Angular中使用依赖注入，有没有什么缺陷呢？下面来看个例子。

　　这段代码需要发送Http请求，所以从构造方法注入了Http。

　　你必须要精确的知道Angular的哪个类提供了Http服务，并且需要知道这个类在什么路径下。并不是每个类都像Http这么简短易记，这增加了大脑的负荷。

　　对于专业Angular前端人员，这算不上什么缺陷，不过它确实增加了小团队使用Angular的学习成本。

　　对于这个例子，哪怕你知道注入Http类，也清楚它的路径，但可能仍然引入了未知的Bug。Angular还提供了一个叫HttpClient的类，它在@angular/common/http路径下，HttpClient提供了拦截等高级机制，用来取代@angular/http包。如果你团队的一部分人使用HttpClient，并对Http进行了拦截，比如设置全局Token，另一部分人使用Http类发送请求，就会导致潜在的BUG。

　　现在你清楚了对Angular API进行封装的必要性。

　　封装是一种隐藏实现细节的手段，封装以后，你的注意力将从Angular Api转移到自己的业务上。

　　对于Http请求，理想的API可能长成这样。 

　　首先，你并没有从@angular/common/http引入HttpClient，更没有在构造方法上注入它。这解决了需要记忆API的问题。

　　其次，你并不清楚util.http封装的具体类型是什么，这统一了团队的API调用，也方便你在未来需要更换实现时不至于挨处查找。　　

　　我在前几年使用EasyUi时也封装了这样的Helper，通过直接引用并简单包装就完成了任务。 

　　Helper往往表现为静态方法，面对Angular的Ioc体系，封装Helper变得很棘手，如何把需要的对象依赖注入到Helper静态方法中呢？ 

　　你如果直接import引入Angular API，这样封装出来的Helper行为上可能是错的，比如HttpClient的拦截机制，import创建的HttpClient实例脱离了Ioc框架，这将导致拦截失效。 

　　一种办法是避开静态方法，你可以注入Util类，这样就可以拿到Angular Ioc容器中的相关实例了，这确实是个办法。 

　　不过你如果希望使用静态方法，有没有办法现实呢？ 

服务定位器( Service Locator )

　　依赖注入威名远播，以至于很多人并不清楚它还有个同父异母的弟弟 —— 服务定位器。

　　服务定位器是Ioc的另一种使用模式，你可以在代码中主动调用Ioc容器方法“拉取”依赖对象，这会导致你的代码与Ioc框架耦合，让代码也更难测试。

　　服务定位器俨然成为一种反模式，那么它是否已经一无是处了呢？

　　我发现在大多数情况下，并不需要服务定位器，但在某些情况下，它却非常有用。

　　哪种情况需要服务定位器？当你无法使用依赖注入时，就该它出手了。

　　比如静态方法，你就无法使用依赖注入，通过服务定位器方式仍然可以访问Ioc，这对于封装框架Helper有非常重大的意义，我会在本系列后续文章介绍服务定位器在.Net Core服务端封装上的应用。 

　　Util Angular Helper大量使用了服务定位器，以更简单的方式提供常用API。 

Util Angular Helper介绍

• Helper

　　它位于/Typings/util/common/helper.ts，包含一些常用操作，比如空值判断，类型转换等，helper.ts内部将操作委托给lodash等第三方js库。

• IocHelper

　　它位于/Typings/util/angular/ioc-helper.ts。

　　IocHelper内部保存了Angular Ioc容器实例，以方便其它Helper以服务定位器的方式来访问Ioc容器。

　　由于Angular Ioc具有分级特性，所以保存了模块级和组件级两种容器，对于获取路由参数等操作，必须从组件容器获取实例，否则将导致错误的行为。

　　在什么位置设置Angular Ioc容器呢？

　　模块级容器在AppModule根模块中设置，组件级容器需要在每个组件设置，这造成了不便，尚未找到更优雅的方式。

　　下面演示了IocHelper的用法。

let client = util.ioc.get<HttpClient>(HttpClient);

• HttpHelper

　　对于业务操作，使用得最频繁的Angular Api莫过于发送Http请求，从服务端获取Json数据,或将表单数据传递给服务端处理。

　　Util通过HttpHelper，WebApi，Form三个Helper从不同层次对Http操作进行了封装。

　　HttpHelper位于/Typings/util/angular/http-helper.ts，对Angular HttpClient进行了简单包装，提供原始Http操作。