01_Angular 4 概述.docx

Angular的概述一、 Angular是什么Angular是由谷歌开发与维护一个开发跨平台应用程序的Web前端开发框架，同时适用于手机与桌面。二、 发展史1. Angular是Google推出的Web前端开发框架，从12年发布起就受到了强烈的关注，他首次提出了双向绑定的概念，让人耳目一新，就在2016年9月中旬，时隔4年，Google正式发布了Angular的第二代开发框架Angular 2，2017年3月推出了Angular4。Angular的故事：首先是Angular的发家史，首先在09年的时候，这两位帅哥Misko和Adam在业余时间创造了Angular，当时Misko接受了一个叫做Feedback的项目，经过6个月的迭代，代码量已经达到了17000行，维护起来非常的艰难，所以Misko就想用他手上的Angular去重写这个项目，那么重写的结果怎么样呢？代码量从17000行，惊人的减少到了1500行，并且前后也只花了3周的时间。所以可以看出这个Angular的开发效率是非常非常的高。那么这次事件之后呢，Misko的主管就十分看好这个项目，决定正式立项，并且组件专职的团队来开发和维护，而且把Angular这个开发框架正式命名为AngularJS。从这里，Angular就开始进入了快速迭代。2. AngularJS的痛点3. Angular 2特性 令人兴奋的是，早在14年3月份，官方博客就有提及新Angular的开发计划，而且很快，就在同年的9月份，在NG-Europe大会上，Angular 2 正式亮相。这里值得一提的是，官方不再用AngularJS来命名新的的框架，而是直接采用Angular，把后面的JS去掉了。Angular 2经过两年的迭代开发，经过了版本，也经过了版本，在2016年9月正式对外发布了，真的是千呼万唤始出来。Angular的版本更新的非常快，2017年3月发布了Google团队又发布了最新的Angular 4，现在Angular 4的热乎气还没过呢，Angular 5 又要出来了，不过你也不用太过担心，因为不论是Angular 4 还是Angular 5，其内核依然是Angular 2。三、 SPA单页应用（Single Page Application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说模块化的开发和设计显得相当重要。Angular是一款优秀的前端js框架，用它可以轻松构建SPA(Single Page Application，单页面应用程序) ，它的特征是：具有mvc的架构模式，便于模块化开发，自动化双向数据绑定和特有的指令系统。它最大限度的解放了Dom操作，让js代码更专注于业务逻辑的实现，通过简单的指令，结合页面结构和逻辑数据，通过自定义指令，实现组件化编程，代码结构更合理，维护成本更低。四、 Angular 架构概览Angular 是一个用 HTML 和 JavaScript 或者一个可以编译成 JavaScript 的语言（例如 Dart 或者 TypeScript ），来构建客户端应用的框架。该框架包括一系列库，有些是核心库，有些是可选库。我们是这样写 Angular 应用的：用 Angular 扩展语法编写 HTML模板， 用组件类管理这些模板，用服务添加应用逻辑， 用模块打包发布组件与服务。然后，我们通过引导根模块来启动该应用。 Angular 在浏览器中接管、展现应用的内容，并根据我们提供的操作指令响应用户的交互。当然，这只是冰山一角。后面我们将学习更多的细节。不过，目前我们还是先关注全景图吧。这个架构图展现了 Angular 应用中的 8 个主要构造块： 模块 (module) 组件 (component) 模板 (template) 元数据 (metadata) 数据绑定 (data binding) 指令 (directive) 服务 (service) 依赖注入 (dependency injection)接下来我按顺序并结合图来讲解一下。1. 模块 (module)Angular 应用是模块化的，并且 Angular 有自己的模块系统，它被称为Angular 模块或NgModules。Angular 或者 Ionic 新建的项目，都会存在一个根模块，默认名是 AppModule。如果你使用了模块化来创建应用，包括 AppModule，每个都会存在一个 NgModule 装饰器的类(虽然他很像 java 中的注解，但是他的官方命名叫装饰器)。我们新建的页面，如果不使用懒加载，都要在 NgModule 中先声明后使用。下面举个例子，简单介绍一下 NgModule 中的内容/app.module.tsimport NgModule from angular/core;import BrowserModule from angular/platform-browser;NgModule( imports: BrowserModule , providers: Logger , declarations: AppComponent , exports: AppComponent , bootstrap: AppComponent )export class AppModule imports 本模块声明的组件模板需要的类所在的其它模块。 providers 服务的创建者，并加入到全局服务列表中，可用于应用任何部分。 declarations 声明本模块中拥有的视图类。Angular 有三种视图类：组件、指令和管道。 exports declarations 的子集，可用于其它模块的组件模板。 bootstrap 指定应用的主视图（称为根组件），它是所有其它视图的宿主。只有根模块才能设置 bootstrap 属性。在图中的意义：看图左上角，模块是用来接收一个用来描述模块属性元数据对象的。2. 组件 (component)、模板 (template)、元数据 (metadata)这次我们把这三点一起来讲，先看一下这段代码/ponent.tsComponent(selector: hero-list,templateUrl: ./ponent.html,providers: HeroService )export class HeroListComponent implements OnInit /* . . . */组件是构成整个Angular应用的基础单元，而且这些组件层层嵌套，自上而下的形成一个组件树，大家对组件有了一个感性的认识，那么一个组件里面到底包含什么东西？组件内部包含有JavaScript逻辑，还自带有JavaScript和CSS的渲染自己，所以每个组件都能独自的完成各自的功能。虽然每个组件各司其职，但组件以树的形式来组织，意味着组件之间不可能是孤立的存在，他们之间有着完善的通信机制。每个组件都可以定义自己的输入、输出属性，这些属性称为了组件对外的接口，负责与上下游的组件进行交互。组件就是一个类，是Angular的核心。Component是组件元数据装饰器，用来修饰一个组件，他能接受一个配置对象， Angular 会基于这些信息创建和展示组件及其视图。 selector：CSS 选择器，它告诉 Angular 在父级 HTML 中查找 hero-list 标签，创建并插入该组件。 templateUrl：组件 HTML 模板的模块相对地址，如果使用 template 来写的话是用“”这个符号来直接编写 HTML 代码。 providers：组件所需服务的依赖注入。template模板就是那段 HTML 代码，可以用 templateUrl 引入外面的，也可以用 template 直接写。metadata元数据装饰器用类似的方式来指导 Angular 的行为。 例如 Input、Output、Injectable 等是一些最常用的装饰器，用法就不在这里展开了。在图中的意义：看图中间那一块，模板、元数据和组件共同描绘出这个视图。3. 数据绑定 (data binding)这里一共展示四种数据绑定，看一下示例代码：1) /插值表达式 显示组件的属性的值/li2) /属性绑定 把父组件selectedHero的值传到子组件的hero属性中，也可以把组件中的属性绑定到模板中元素的dom属性上。hero-detail hero=selectedHero/hero-detail3) /事件绑定 用户点击英雄的名字时调用组件的selectHero方法li (click)=selectHero(hero)/li4) /双向绑定 数据属性值通过属性绑定从组件流到输入框。用户的修改通过事件绑定流回组件，把属性值设置为最新的值input (ngModel)=可能大家对各种括号看的眼花了，总结一下：1. 双花括号是单向绑定，传递的是值。方向是组件 - 模板。2. 方括号是单向绑定，传递的是属性。方向是父组件 - 子组件。3. 圆括号是事件绑定，处理点击等活动（action）。4. 方括号套圆括号是双向绑定，方向是组件 - 模板。在图中的意义：看图中间那一块，数据绑定给模板和组件提供数据交互的方式。4. 指令 (directive)严格来说组件就是一个指令，但是组件非常独特，并在 Angular 中位于中心地位，所以在架构概览中，我们把组件从指令中独立了出来。我们这里提到的指令有两种类型：结构型 structural 指令和属性 attribute 型指令。放一下原文证明一下组件确实算是一个指令：While a component is technically a directive, components are so distinctive and central to Angular applications that this architectural overview separates components from directives.Two other kinds of directives exist: structural and attribute directives.1) 结构型指令是 ngFor、ngIf 这种的，通过在 DOM 中添加、移除和替换元素来修改布局。2) 属性型指令是 ngModel 这种的，用来修改一个现有元素的外观或行为。Angular 还有少量指令，它们或者修改结构布局（例如 ngSwitch ）， 或者修改 DOM 元素和组件的各个方面（例如 ngStyle 和 ngClass）。在图中的意义：看图右上角那一块，组件是一个带模板的指令，只是扩展了一些面向模板的特性。5. 服务 (service)官方文档的概念：服务是一个广义范畴，包括：值、函数，或应用所需的特性。服务没有什么特别属于 Angular 的特性。Angular 对于服务也没有什么定义，它甚至都没有定义服务的基类，也没有地方注册一个服务。这就像你在 iOS 或者 Android 里单独建了一个类叫 httpService ，封装了网络请求服务一样，不是具体的什么东西，就是一个概念了解下就行。在图中的意义：看图左下角角那一块，服务是用来封装可重用的业务逻辑。6. 依赖注入 (dependency injection)依赖注入是提供类的新实例的一种方式，还负责处理类所需的全部依赖。大多数依赖都是服务。 Angular 使用依赖注入来提供新组件以及组件所需的服务。比如我们要给某组件导入 HomeService 这个服务，看这段代码：constructor(private service: HeroService) .这个constructor就是构造函数，依赖注入在 constructor 中进行。你也许会觉得前面写上 private、public（在构造函数内写上public会自动创建类的成员变量） 之类的很怪，这是 TypeScript 语法比较特殊，习惯就好。当 Angular 创建组件时，会首先为组件所需的服务请求一个注入器 injector。我们必须先用注入器 injector 为 HeroService 注册一个提供商 provider（服务）。看一下下面的代码，意思就是我们必须在 providers 写上才能用（如果不在组件中注册，则需要在模块中注册）Component( selector: hero-list, templateUrl: ./ponent.html, providers: HeroService )在图中的意义：看图左下角角那一块，依赖注入主要用来导入服务。最后给大家推荐一些学习资源Angula