[关闭]
@carlchen 2017-04-27T05:44:15.000000Z 字数 6710 阅读 1611

第一章：Angular 2.x 从0到1 前言

史上最简单Angular 2.x教程，大叔都学会了

作者：王芃 wpcfan@gmail.com
前端Angular2教程

前言 —— 一个大叔码农的Angular2创世纪

作为一个出生于70年代的大叔，我在软件这个领域已经摸爬滚打了16年：从程序员、项目经理、产品经理、项目总监到部门管理等各个角色都体验过。深深地了解这个行业发展的速度之快是其他行业无法比拟的：从编程语言、各种平台、各种框架、设计模式到各类开源工具、组件林林种种，要学习的东西实在太多，变化太快。

但万变不离其宗，名词变化虽多，但透射的本质其实是趋同的：那就是程序员受不了代码的折磨，千方百计的想让这个工作更简单，更能应对变化。比如说，面向对象编程（Object-Oriented Programming）理念的提出其实是牺牲了部分性能换来代码层次结构的清晰，因此也催生了C++，Java，C#等一系列优秀的面向对象编程语言；后来程序员们发现在实际的逻辑中，往往不是像对象树那样可以划分的那么清楚。还有一些类似安全、日志等功能其实是撒在系统各个角落的，然后，面向切面的编程（Aspect-Oriented Programming）应运而生。再后来一部分科学家发现现有的编程语言做分析或数据计算实在太麻烦，明明要计算的逻辑很清晰，却要用一大堆的对象封装赋值，函式编程（Functional Programming）出现了。最近几年被产品经理逼疯的程序员认为强类型语言改动起来太慢太繁琐，于是动态脚本类语言大行其道。

但仔细分析一下，这些不是互斥的，其实好的元素都会被慢慢吸收到各自的语言、平台上面去的。比如C#、Java也采纳了函式编程的一些特点，比如Lamda表达式，.Net和Java平台上也拥有动态脚本语言。本书写的Angular2就是在JavaScript这种脚本语言基础上引入了TypeScript，进而可以享受面向对象编程和强类型语言的优点；引入了依赖性注入（Dependency Injection）这种在强类型语言中被证明非常有用的设计模式；通过引入Rx，让Javascript拥有了函式编程的能力。

在本书中，我们通过做一个待办事项列表的小应用来逐渐体会这些优点。同时建议学习一些其他框架，比如React或Vue，参照后你会发现很多事情其实异曲同工。希望年轻的你和大叔的我一起学习，一起面对这个迅速成长的行业！

                                        王芃

第一章：认识Angular 2.0

Angular2简介

Angular 2 是Google推出的一个跨平台全终端的框架，和目前比较火的React和Vue.js相比，有如下优点：

  1. 由于Google的目的是推出一个完整解决方案，所以官方默认提供的类库（比如routing，http，依赖性注入（DI）等）非常完整，无需自己选择。React的一大痛点就是选择太多导致在配置寻找组件和类库的过程中消耗太多精力，当然从另一方面看这也是其优势，选择众多且自由。
  2. 官方支持TypeScript（微软出品，是JavaScript的超集，是 JavaScript 的强类型版本）作为首选编程语言，使得开发脚本语言的一些问题可以更早更方便的找到。
  3. RxJS友好使得响应式编程在Augular2中变得极为容易（Google开发的框架依赖这么多的微软的产品，可见微软的转型还是很成功的）
  4. 支持NativeScript甚至ReactNative等进行原生Android/iOS应用开发（React支持React Native）
  5. 支持服务器端渲染（React也支持）

但总体来讲，个人认为Angular2更适合从原生App开发或后端Java/.Net等转型过来开发前端的程序员，因为它的开发模型更接近于传统强类型语言的模式，加上官方内建的组件和类库比较完整，有官方中文网站 https://angular.cn ，学习曲线要低一些。有过Angular 1.x 开发经验的同学要注意了，虽然只有一个版本号的差距，但2.x和1.x是完全不同的，不要奢望1.x的应用会平滑迁移到2.x。

Angular 支持大多数常用浏览器，包括下列版本：

Chrome Firefox Edge IE Safari iOS Android IE Mobile
45以上 40以上 13以上 9以上 7以上 7以上 4.1以上 11以上

环境配置要求

Angular2需要node.js和npm，我们下面的例子需要node.js 6.x.x和npm 3.x.x，请使用 node -v 和 npm -v 来检查。由于众所周知的原因，http://npmjs.org 的站点访问经常不是很顺畅，这里给出一个由淘宝团队维护的国内镜像 http://npm.taobao.org/ 。安装好node后，请输入npm config set registry https://registry.npm.taobao.org

和官方快速起步文档给出的例子不同，我们下面要使用Angular团队目前正在开发中的一个工具--Angular CLI 。这是一个类似于React CLI和Ember CLI的命令行工具，用于快速构建Angular2的应用。它的优点是进一步屏蔽了很多配置的步骤、自动按官方推荐的模式进行代码组织、自动生成组件/服务等模板以及更方便的发布和测试代码。由于目前这个工具还在beta阶段，安装时请使用 npm install -g @angular/cli@latest 命令。

IDE的选择也比较多，免费的Visual Studio Code 和 Atom，收费的有WebStorm。我们这里推荐采用 Visual Studio Code，可以到 https://code.visualstudio.com/ 下载 Windows/Linux/MacOS 版本。

安装完以上这些工具，开发环境就部署好了，下面我们将开始Angular2的探险之旅。

第一个小应用 Hello Angular

那么现在开启一个terminal（命令行窗口），键入 ng new hello-angular

angular-cli创建新项目

如上图所示，这个命令为我们新建了一个名为“hello-angular”的工程，进入该工程目录，键入 code . 可以打开IDE看到如下目录

VSCode管理工程

使用Mac的用户可能发现找不到我们刚才使用的命令行的 code，您需要通过IDE安装一下，点击F1，输入install，即可看到“在Path中安装code命令”，选择之后就ok了。

Mac用户需要安装命令行

文件目录结构

大概了解了文件目录结构后，我们重新回到命令行，在应用根目录键入 ng serve 可以看到应用编译打包后server运行在4200端口。

使用ng serve运行应用

打开浏览器输入 http://localhost:4200 即可看到程序运行成功啦！

第一次运行应用

自动生成的太没有成就感了是不是，那么我们动手改一下吧。保持运行服务的命令窗口，然后进入VSCode，打开 src/app/app.component.ts 修改title，比如： title = 'This is a hello-angular app';，保存后返回浏览器看一下吧，结果已经更新了，这种热装载的特性使得开发变得很方便。

第一次小修改

第一个组件

那么我们来为我们的app增加一个Component吧，在命令行窗口输入 ng generate component login --inline-template --inline-style 。 顾名思义，参数generate是用来生成文件的，参数component是说明我们要生成一个组件，login呢是我们的组件名称，你可以自己想个其他有意思的名字。后面的两个参数是告诉angular-cli：生成组件时，请把组件的HTML模板和CSS样式和组件放在同一个文件中（其实分开文件更清晰，但第一个例子我们还是采用inline方式了）。

是不是感觉这个命令行太长了？幸运的是Angular团队也这么想，所以你可以把上面的命令改写成 ng g c login -it -is ,也就是说可以用generate的首字母g来代替generate，用component的首字母c来代替component，类似的--inline-template的两个词分别取首字母变成-it

CLI生成新组件

angular-cli为我们在\src\app目录下生成了一个新文件夹login，在login目录下生成了2个文件，其中 login.component.spec.ts 是测试文件，我们这里暂时不提。另一个是 login.component.ts 这个就是我们新建的Component了。

Angular提倡的文件命名方式是这样的：组件名称.component.ts ，组件的HTML模板命名为： 组件名称.component.html，组件的样式文件命名为： 组件名称.component.css,大家在编码中尽量遵循Google的官方建议。

我们新生成的Login组件源码如下

  1. import { Component, OnInit } from '@angular/core';
  3. //@Component是Angular提供的装饰器函数，用来描述Compoent的元数据
  4. //其中selector是指这个组件的在HTML模板中的标签是什么
  5. //template是嵌入（inline）的HTML模板，如果使用单独文件可用templateUrl
  6. //styles是嵌入（inline）的CSS样式，如果使用单独文件可用styleUrls
  7. @Component({
  8.   selector: 'app-login',
  9.   template: `
  10.     <p>
  11.       login Works!
  12.     </p>
  13.   `,
  14.   styles: []
  15. })
  16. export class LoginComponent implements OnInit {
  18.   constructor() { }
  20.   ngOnInit() {
  21.   }
  23. }

那么这个组件建成后，我们怎么使用呢？注意上面的代码中@Component修饰配置中的 selector: 'app-login'，这意味着我们可以在其他组件的template中使用 <app-login></app-login> 来引用我们的这个组件。

现在我们打开 hello-angular\src\app\app.component.html 加入我们的组件引用

  1. <h1>
  2.   {{title}}
  3. </h1>
  4. <app-login></app-login>

保存后返回浏览器，可以看到我们的第一个组件也显示出来了。

image_1b27qsmhp1nlrb8g1uh6cp71qcj9.png-19kB

一些基础概念

这里我们粗略介绍一些Angular的基础概念，这些基础概念在后面的章节中会更详细的讲解。

什么是模块？

简单来说模块就是提供相对独立功能的功能块，每块聚焦于一个特定业务领域。Angular内建的很多库是以模块形式提供的，比如FormsModule封装了表单处理，HttpModule封装了Http的处理等等。

每个Angular应用至少有一个模块类 —— 根模块，我们将通过引导根模块来启动应用。按照约定，根模块的类名叫做AppModule，被放在 app.module.ts 文件中。我们这个例子中的根模块位于 hello-angular\src\app\app.module.ts

  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { NgModule } from '@angular/core';
  3. import { FormsModule } from '@angular/forms';
  4. import { HttpModule } from '@angular/http';
  6. import { AppComponent } from './app.component';
  7. import { LoginComponent } from './login/login.component';
  9. @NgModule({
  10.   declarations: [
  11.     AppComponent,
  12.     LoginComponent
  13.   ],
  14.   imports: [
  15.     BrowserModule,
  16.     FormsModule,
  17.     HttpModule
  18.   ],
  19.   providers: [],
  20.   bootstrap: [AppComponent]
  21. })
  22. export class AppModule { }

@NgModule装饰器用来为模块定义元数据。declarations列出了应用中的顶层组件，包括引导性组件AppComponent和我们刚刚创建的LoginComponent。在module里面声明的组件在module范围内都可以直接使用，也就是说在同一module里面的任何Component都可以在其模板文件中直接使用声明的组件，就想我们在AppComponent的模板末尾加上 <app-login></app-login> 一样。

imports引入了3个辅助模块：

providers列出会在此模块中“注入”的服务（Service），关于依赖性注入会在后面章节中详细解释。

bootstrap指明哪个组件为引导性组件（本案例中的AppComponent）。当Angular引导应用时，它会在DOM中渲染这个引导性组件，并把结果放进index.html的该组件的元素标签中（本案例中的app-root）。

  1. <!doctype html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>HelloAngular</title>
  6.   <base href="/">
  8.   <meta name="viewport" content="width=device-width, initial-scale=1">
  9.   <link rel="icon" type="image/x-icon" href="favicon.ico">
  10. </head>
  11. <body>
  12.   <app-root>Loading...</app-root>
  13. </body>
  14. </html>

引导过程

Angular2通过在main.ts中引导AppModule来启动应用。针对不同的平台，Angular提供了很多引导选项。下面的代码是通过即时（JiT）编译器动态引导，一般在进行开发调试时，默认采用这种方式。

  1. //main.ts
  2. import './polyfills.ts';
  4. // 连同Angular编译器一起发布到浏览器
  5. import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  6. import { enableProdMode } from '@angular/core';
  7. import { environment } from './environments/environment';
  8. import { AppModule } from './app/';
  10. if (environment.production) {
  11.   enableProdMode();
  12. }
  13. //Angular编译器在浏览器中编译并引导该应用
  14. platformBrowserDynamic().bootstrapModule(AppModule);

另一种方式是使用预编译器（AoT - Ahead-Of-Time）进行静态引导，静态方案可以生成更小、启动更快的应用，建议优先使用它，特别是在移动设备或高延迟网络下。使用static选项，Angular编译器作为构建流程的一部分提前运行，生成一组类工厂。它们的核心就是AppModuleNgFactory。引导预编译的AppModuleNgFactory的语法和动态引导AppModule类的方式很相似。

  1. // 不把编译器发布到浏览器
  2. import { platformBrowser } from '@angular/platform-browser';
  4. // 静态编译器会生成一个AppModule的工厂AppModuleNgFactory
  5. import { AppModuleNgFactory } from './app.module.ngfactory';
  7. // 引导AppModuleNgFactory
  8. platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

本节代码：https://github.com/wpcfan/awesome-tutorials/tree/chap01/angular2/ng2-tut

下一节我们再继续，记住大叔能学会的你也能。

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注