(转载)从Java角度理解Angular之入门篇：npm, yarn, Angular CLI

本系列从Java程序员的角度，带大家理解前端Angular框架。

本文是入门篇。笔者认为亲自动手写代码做实验，是最有效最扎实的学习途径，而搭建开发环境是学习一门新技术最需要先学会的技能，是入门的前提。

作为入门篇，本文重点介绍Angular的开发、编译工具：npm, yarn, Angular CLI，它们就像Java在中的Maven，同时顺便介绍一些Angular的概念。学习之后，希望你能够在自己的环境下练习、探索、编写出自己的第一个基于Angular的Web应用。

在开始介绍之前，先了解下一些背景知识，理解单页应用与传统基于模板的多页应用在Web开发思路的不同。

什么是单页应用（Single Page Application，SPA）

单页应用是Web前端发展的主流趋势。

服务端渲染

传统的Web前端是多页应用的，客户端浏览器向服务器提交请求，服务端通过处理HTML模板（如PHP,ASP,JSP等），生成HTML文本返回给浏览器，浏览器重新渲染并且展示。HTML完全有后端决定，因此称为“服务端渲染”。客户端每次拿到都是一个HTML页面，这样一个Web应用就有很多页面，因此叫多页应用。

服务器 ----(html页面)---> 浏览器

• 1

由于浏览器每次都要解析整个HTML并渲染，因此效率较低，每次即使更新一个数据也要在网络上传输整个HTML文本，占用更多的带宽。

客户端渲染

不同于传统多页应用，在SPA应用中，客户端浏览器向服务器提交请求，服务端返回数据（通常是json格式）给浏览器，浏览器中的js更新相应部分的DOM，从而更新展示。渲染的过程是在客户端浏览器完成的。

服务器 ----(json数据)---> 浏览器

• 1

优点：

1. 局部刷新。无需每次都进行完整页面请求。
2. 天然的前后端分离。后端不再有渲染展示逻辑，只要专注业务逻辑并能够向前端提供数据；而前端只关注如何展示数据、处理用户交互，提高用户体验。这很像C/S架构，富客户端，只不过客户端是浏览器中的js脚本。
3. 计算量转移。原本需要后端渲染的任务转移给了前端，减轻了服务器的压力。

缺点：

1. 首次打开较慢。由于是富客户端(js脚本)，当客户端首次打开网页，需要先下载一堆js和css后才能看到页面。对于这一点，SPA也有应对方案，比如可以（1）分拆打包（把js拆成多个包，首屏用到的先传）；（2）先传个友好的加载页面；（3）同构（第一次加载是采用后端渲染，以后用前端渲染）。
2. 不方便搜索引擎。传统的搜索引擎会从HTML中抓取数据，导致前端渲染的页面无法被抓取。不过这一点，随着SPA的流行，Google爬虫也可以像浏览器一样理解js脚本了。

流行的SPA框架

流行的SPA框架有React, Vue, Angular。本文基于Angular 2/4/5+（不是Angular 1.x或AngularJS）。

node.js

就像Java开发需要JDK，Angular开发需要node.js。Java编译出来的字节码需要Java虚拟机JRE执行，而如果想在浏览器以外执行JavaScript代码，也需要类似的虚拟机平台，也就是node.js。

类似JDK，node.js下载之后也不需要安装，只要加到PATH路径下即可。这里需要node.js是因为很多前端开发工具是有JavaScript写成的，如npm，它们需要node.js这个虚拟机。

项目依赖管理工具

像Java中的maven，开发Angular可以使用npm或者yarn。其中npm是node.js自带的，可以直接使用。

另外，npm还有maven不具备的能力，它可以从网上下载并安装软件，类似于Linux中的yum。比如，yarn可以通过npm下载安装：

npm install --global yarn

• 1

npm作为项目依赖管理有个缺点，它没有本地仓库，对同一个依赖，不管其他项目是否已经下载过，只要这个项目没有，它都从网上下载。下载后存在每个项目下的node_modules/路径下。相比，maven有本地仓库，对同一个依赖只会下载一次，存在~/.m2/repository/下。

与npm不同的是，yarn无需互联网连接就能安装本地缓存的依赖项，它提供了离线模式。只要其他项目已经下载过，就不会上网下载，但依然会拷贝到项目下的node_modules/路径。另外，yarn的运行速度得到了显著的提升，整个安装时间也变得更少。所以推荐使用yarn管理项目依赖。

仓库

maven有中央仓库，也可以创建私服；npm,yarn同样都有，可以配置：

npm config set registry http://registry.npmjs.org/
yarn config set registry https://registry.yarnpkg.com/

• 1
• 2

科学上网

国内用户可以通过淘宝镜像提高下载速度：

npm config set registry https://registry.npm.taobao.org
yarn config set registry https://registry.npm.taobao.org

• 1
• 2

代理

如果上网需要代理的话，可以在~/.bashrc加入如下内容：

######################
# User Variables (Edit These!)
######################
username="myusername"
password="mypassword"
proxy="mycompany:8080"

######################
# Environement Variables
# (npm does use these variables, and they are vital to lots of applications)
######################
export HTTPS_PROXY="http://$username:$password@$proxy"
export HTTP_PROXY="http://$username:$password@$proxy"
export http_proxy="http://$username:$password@$proxy"
export https_proxy="http://$username:$password@$proxy"
export all_proxy="http://$username:$password@$proxy"
export ftp_proxy="http://$username:$password@$proxy"
export dns_proxy="http://$username:$password@$proxy"
export rsync_proxy="http://$username:$password@$proxy"
export no_proxy="127.0.0.10/8, localhost, 10.0.0.0/8, 172.16.0.0/12, 192.168.0.0/16"

######################
# npm Settings
######################
npm config set registry http://registry.npmjs.org/
npm config set proxy "http://$username:$password@$proxy"
npm config set https-proxy "http://$username:$password@$proxy"
npm config set strict-ssl false
echo "registry=http://registry.npmjs.org/" > ~/.npmrc
echo "proxy=http://$username:$password@$proxy" >> ~/.npmrc
echo "strict-ssl=false" >> ~/.npmrc
echo "http-proxy=http://$username:$password@$proxy" >> ~/.npmrc
echo "http_proxy=http://$username:$password@$proxy" >> ~/.npmrc
echo "https_proxy=http://$username:$password@$proxy" >> ~/.npmrc
echo "https-proxy=http://$username:$password@$proxy" >> ~/.npmrc

######################
# yarn Settings
######################
yarn config set registry https://registry.yarnpkg.com/
yarn config set proxy "http://$username:$password@$proxy"
yarn config set https-proxy "http://$username:$password@$proxy"
yarn config set strict-ssl false

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43

脚手架

脚手架可以简化开发，创建工程框架。比如maven可以使用archetype:generate来创建基于maven约定的java工程。

脚手架创建的项目，一般包含以下内容： 
1. 编译脚本、依赖定义 
2. 源代码路径及样例 
3. 单元测试路径及样例 
4. 资源路径 
5. 环境配置（开发环境、生产环境、测试环境） 
6. 编译目标路径（编译后生成）

Angular脚手架

Angular CLI是Angular官方提供的命令行工具，可以帮助我们创建项目、编译、测试、运行，就像Java界的Maven，另外还可以创建组件、管道、指令、服务、模块、类、接口、枚举。。。

可以用npm安装Angular CLI：

npm install --global @angular/cli

• 1

创建Angular项目：

ng new <project_name>

• 1

脚手架会帮我们创建以下文件：

|-- package.json                   # 编译脚本、依赖包管理，类似maven的pom.xml。
|-- src                            # 原代码，类似maven的src/main/java
|   |-- app                        # 该应用的模块路径，angular支持模块化！
|   |   |-- app.component.css      # 组件样式（作用域只在该组件内部有效）
|   |   |-- app.component.html     # 组件模板（视图）
|   |   |-- app.component.spec.ts  # 组件单元测试
|   |   |-- app.component.ts       # 组件控制代码（控制器）
|   |   |-- app.module.ts          # 模块管理代码
|   |-- assets                     # 资源文件夹，类似maven的src/main/resources
|   |-- environments
|   |   |-- environment.prod.ts    # 生产环境配置
|   |   `-- environment.ts         # 开发环境配置
|   |-- favicon.ico                # 网页的图标
|   |-- index.html                 # 网页的HTML，使用根组件（一般无需修改）
|   |-- main.ts                    # 入口代码，引导根模块（一般无需修改）
|   |-- styles.css                 # 全局样式
|   |-- test.ts                    # 单元测试入口（一般无需修改）
|   |-- ...
|-- tsconfig.json                  # typescript配置，比如开发使用的ES版本，编译生成的目标ES版本（默认是ES5,即目前广泛的javascript，一般无需修改)
|-- tslint.json                    # typescript的语法规则，方便IDE检查（一般无需修改）
|-- node_modules                   # 项目的依赖包仓库，相当于maven的本地仓库
|-- dist                           # 编译时才生成的目标文件夹（拷贝里面内容到Web服务器即可使用），相当于maven工程下的target目录
|-- .gitignore                     # git ignore（一般无需修改，node_modules和dist以默认排除）
...

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24

依赖管理

当我们需要更新项目依赖时，可以修改package.json文件，然后运行yarn install。它会解析package.json并下载还没有的依赖。这种方式跟maven完全一样。

添加/删除依赖

还可以用命令行来添加/删除依赖：

yarn add/remove <package_name>[@<version>] [--dev/-D]

• 1

[]表示可选的，不写为最新版本。命令执行后会自动更新package.json文件。--dev或-D表示包只是开发时候需要，最终产品打包是不包含的，类似与Maven中的provided scope。

开发阶段：运行

对于前后端分离的应用，前端开发与后端独立开，前端应用在没有启动后端服务器的情况下也应该能够运行。

Angular CLI提供支持，如下：

ng serve [--host 0.0.0.0] [--port 4200]

• 1

[]表示可选的，不写端口号默认为4200。打开浏览器，输入localhost:4200可以看到你开发的网页。

代码更新检测

代码文件更新不需要重启服务，当文件内容变化时，网页会自动刷新，开发者可以看到更新后的页面。

Mock 后端服务

在后端服务还没有准备好之前，当前端需要向后端服务发出请求（GET/POST/PUT/DELETE），让后端更新数据，并且返回给前端时，可以造个假的。

可以安装一个json-server，

npm install --global json-server

• 1

写个json文件，把假数据填上去。启动json服务：

json-server <your_mock_data.json> [--port 3000]

• 1

就可以作为服务器接受客户端的RESTful请求（GET/POST/PUT/DELETE）了。

单元测试

像mvn test，Angular CLI可以一键运行所有单元测试：

ng test

• 1

编译成目标文件

像mvn compile，Angular CLI可以一键运行编译导出目标文件（默认为ES5，即传统的javascript）：

ng build [-prod]

• 1

可选参数-prod表示生产环境，输出目标会小很多。输出目标为dist文件夹：

$ ls -l dist
total 413
-rw-r--r-- 1 weliu 1049089   3293 Jan 15 08:50 3rdpartylicenses.txt
-rw-r--r-- 1 weliu 1049089   5430 Jan 15 08:50 favicon.ico
-rw-r--r-- 1 weliu 1049089    597 Jan 15 08:50 index.html
-rw-r--r-- 1 weliu 1049089   1445 Jan 15 08:50 inline.08a75f8119356113a22d.bundle.js
-rw-r--r-- 1 weliu 1049089 341557 Jan 15 08:50 main.e25b64f979f240da775b.bundle.js
-rw-r--r-- 1 weliu 1049089  61268 Jan 15 08:50 polyfills.65fe1626e31e03d17f8e.bundle.js
-rw-r--r-- 1 weliu 1049089      0 Jan 15 08:50 styles.d41d8cd98f00b204e980.bundle.css

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

不如maven compile的地方，是ng build就只做编译，在编译前也不会先去下载未缓存的依赖包，因此完整的编译前需要手动调用yarn install。

部署

将编译生成的dist文件夹中的所有文件放在Web服务器即可。

也可以与服务端代码一起编译，打成一个包，方便部署。

与Java后端一起部署（使用Maven）

对于使用Spring Boot的后端Java代码，只提供RESTful的数据服务，可以打包成一个独立可执行的jar/war包：

$ cd back-end
$ mvn clean package
...
BUILD SUCCESS
...

$ ls target/
...
my-web-server.war
...

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

目前这个war包还只是一个提供RESTful的数据服务器，还没有网页界面。

可以写个脚本把前端编译后dist中的内容，通过jar命令打包进上面的war包（或者jar包），脚本很简单，如下：

$ cat add_to_war.sh
cd dist/
jar uf ../../back-end/target/my-web-server.war *

• 1
• 2
• 3

这样就war包就带有网页界面了，可以放在Tomcat服务器下部署，或者直接启动（Spring Boot默认会内嵌Tomcat服务器）：

java -jar back-end/target/my-web-server.war

• 1

以上过程，可以写一个总的编译脚本build.sh，一键编译整个前后端应用：

# build back-end by maven or gradle
cd back-end
mvn clean package  # or: gradle clean build

# build back-end by yarn and Angular CLI
cd ../front-end
yarn install -prod
ng build -prod

# add to war by jar command
cd dist/
jar uf ../../back-end/target/my-web-server.war *

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

与Java后端一起部署（使用Gradle）

如果使用Gradle编译打包整个前后端应用，就更简单，因为已经有Gradle插件com.moowork.node直接支持。

在前端Angular项目（比如名为front-end)中，加入build.gradle文件，内容如下：

plugins {
  id "com.moowork.node" version "0.13"
}

apply plugin: 'java'

// configure gradle-node-plugin
node {
  version = '6.5.0'
  npmVersion = '3.10.7'
  // If true, it will download node using above parameters.
  // If false, it will try to use globally installed node.
  download = false // true
  workDir = file("${project.projectDir}/node")
}
task compileTypeScript(type: NpmTask) {
  // install the express package only
  args = ['run-script', "tsc"]
}

// clean node/node_modules/dist
task npmClean(type: Delete, group: 'node') {
  final def webDir = "${project.projectDir}"
  //delete "${webDir}/node"
  //delete "${webDir}/node_modules"
  delete "${webDir}/dist"
}

clean.dependsOn(npmClean)

task npmStart(type: NpmTask) {
  args = ['start']
  group = "node"
  dependsOn("npmInstall")
}

task npmBuild(type: NpmTask) {
  args = ['run', 'build']
  group = "node"
  dependsOn("npmInstall")
}

jar {
  dependsOn("npmBuild")
  from(fileTree("dist")) {
    into "META-INF/resources"
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48

在前端Angular项目的根目录中直接执行：

gradle build

• 1

就可以编译、打包，在Gradle约定的输出目录build/libs/下生成目标jar文件，包含所有Web资源。

front-end
|   build
|   |-- libs
|   |   |-- front-end-0.0.1.jar

• 1
• 2
• 3
• 4

在后端Java项目back-end中的build.gradle中加入对前端Angular项目的依赖即可。

dependencies {
  compile project(":front-end")
  ...

• 1
• 2
• 3

为了一键编译、打包整个前后端工程，可以在前后端项目的父目录中加入build.gradle:

task wrapper(type: Wrapper) {
  gradleVersion = '3.0'
}

• 1
• 2
• 3

和settings.gradle：

rootProject.name = 'my-web-product'
include 'front-end'
include 'back-end'

• 1
• 2
• 3

在此根目录中，可以一键直接执行：

gradle build

• 1

这样编译、打包整个前后端工程，在后端项目中生成最终包含Web资源的文件：

my-web-product
|   back-end
|   |   build
|   |   |-- libs
|   |   |   |-- my-web-product-0.0.1.war

• 1
• 2
• 3
• 4
• 5

可以看到，就像maven或gradle一样，Angular CLI可以帮我们创建脚手架、编译、测试、运行，但她的能力可远不只这些，在开发过程中依然是个好助理，比如可以帮我们创建：组件、服务、管道、指令、模块等等。

组件

组件是一个独立的、可复用的、可组合的UI控件，网页界面就是一系列组件的有机结合。

组件由组件名、视图、控制器组成。

组件相当于面向对象中的“类”，组件实例相当于“对象”。在Angular中，组件就是一个装饰了@Component注解的类。

脚手架创建组件

下面语句创建一个名为hello的组件（同时自动将组件注册到模块app.module.ts中，这样同模块的其它组件才可以使用)：

ng g[enerate] c[omponent] hello [--inline-template] [--inline-style] [--spec false]

• 1

[]为可选，默认情况下生成下面几个文件：

src
|   app
|   |-- hello
|   |   |-- hello.component.css      # 组件样式（作用域只在该组件内部有效）
|   |   |-- hello.component.html     # 组件模板（视图）
|   |   |-- hello.component.spec.ts  # 组件单元测试
|   |   |-- hello.component.ts       # 组件控制代码（控制器）

• 1
• 2
• 3
• 4
• 5
• 6
• 7

嫌文件太多，也可以把HTML模板和CSS都内联进TypeScript，并且不创建单元测试：

src
|   app
|   |-- hello
|   |   |-- hello.component.ts       # 组件全部代码：控制器、视图、样式

• 1
• 2
• 3
• 4

内联了模板、CSS的文件hello.component.ts长这个样子：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-hello',   // 组件选择器（组件名）
  template: `              // 组件模板（视图）
    <p>
      hello works!
    </p>
  `,
  styles: []               // 样式CSS（作用域只在该组件内部有效）
})
export class HelloComponent implements OnInit { // 组件控制代码（控制器）

  constructor() { }

  ngOnInit() {
  }

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

可以在模块内其它组件HTML模板中使用该组件：

<app-hello></app-hello>

• 1

服务

前端与后端交互的代码逻辑，在Angular中一般设计成一个服务。服务是一个可以依赖注入的（非常像Spring），容器管理的类。

Angular CLI可以帮我们生成一个服务的代码，下面的命令在src/app/services/目录下创建一个名为job的服务（同时自动将组件注册到模块app.module.ts中，这样同模块的其它组件才可以使用）：

ng g[enerate] s[ervice] services/job [--spec false]

• 1

创建的文件为：src/app/services/job.service.ts。添加代码后可以与后端进行交互（GET/POST/PUT/DELETE)。

import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Server } from '../model/server';
import { JobDetail } from '../model/job.detail';

@Injectable()
export class JobService {

  private readonly headers = new Headers({
    'Content-Type': 'application/json'
  });

  constructor(private http: Http) {}

  jobs(host: string, port: number): Observable<JobDetail[]> {
    return this.get('jobs', {
      host: host,
      port: port
    });
  }

  runJob(job: string[], servers: Server[]) {
    if (job.length === 0 || servers.length === 0) {
      return;
    }
    const serverHostPorts = servers.map(server => `${server.host}:${server.port}`);
    console.log(`run job ${job} on servers ${serverHostPorts}`);
    this.post('run', {
      job: job,
      hostPorts: serverHostPorts
    }).subscribe();
  }

  private get(action: string, params: any = {}): Observable<any> {
    return this.http.get(`api/${action}`, {
      headers: this.headers,
      params: params
    })
    .map(res => res.json());
  }

  private post(action: string, data: any = {}, params: any = {}): Observable<any> {
    return this.http.post(`api/${action}`, data, {
      headers: this.headers,
      params: params
    });
  }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48

虽然Angular CLI都会给服务类修饰@Injectable注解，但并不是服务的标识，也不是必要的。它的作用是让Angular框架能够向该类注入其它服务，比如构造函数中Http服务就是由Angular框架通过依赖注入进来的。这种机制与Spring非常相似。

Angular是基于rxjs的，操作http会得到一个可观察对象Observerable<any>，异步编程、事件处理都非常简单。熟悉RxJava的同学觉得非常亲切。

Angular是一个类似于Spring的框架，其容器管理服务和组件，所有服务都是可以依赖注入的（只提供构造器注入，这也是不可变成员变量的最佳实践）。所有，在组件或其它服务中使用服务就非常简单，只要在构造函数把服务传进来即可，下面演示了servers组件使用上面定义的job服务：

@Component({
  selector: 'app-servers',
  templateUrl: './servers.component.html',
  styleUrls: ['./servers.component.css']
})
export class ServersComponent {

  jobs: JobDetail[] = [];

  constructor(private jobService: JobService) {
    jobService.jobs().subscribe(jobs => this.jobs = jobs);
  }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

下面演示rxjs的好处，比如我们想每隔5秒，异步地去服务器请求数据，拿到后刷新jobs控件，一句话搞定：

constructor(private jobService: JobService) {
  Observable.interval(5000).subscribe(evt =>
    jobService.jobs().subscribe(jobs => this.jobs = jobs));
｝

• 1
• 2
• 3
• 4

管道

先看个例子来理解管道，比如我们在控制器typescript文件中有一个成员变量（字符串数组类型）：

command: string[] = ['java', '-jar', 'hello.jar'];

• 1

在视图html模板中显示：

<div>
  {{ command }}
</div>

• 1
• 2
• 3

会看到显示的内容是：

java, -jar, hello.jar

• 1

这是string[]类型的toString()方法输出的，但逗号很不好看，希望它输出是这样的：

java -jar hello.jar

• 1

有两种办法，第一种是直接在html中（{{ }}里面可以是一个表达式）：

<div>
  {{ command.join(' ') }}
</div>

• 1
• 2
• 3

第二种办法可以创建一个名叫join的管道，类型Linux管道一样使用：

<div>
  {{ command | join: ' ') }}
</div>

• 1
• 2
• 3

Angular CLI有创建管道的方法，下面的命令在src/app/pipes目录下创建了一个叫join的管道（同时自动将组件注册到模块app.module.ts中，这样同模块的其它组件才可以使用)：

ng g[enerate] p[ipe] pipes/join [--spec false]

• 1

由注解@Pipe修饰的类称为管道类，在生成的src/app/pipes/join.pipe.ts中，我们在加入transform方法中加入join的逻辑。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'join'   // 管道的名字以供HTML模板使用
})
export class JoinPipe implements PipeTransform {

  transform(input: any, character: string = ''): string {
    if (!Array.isArray(input)) {
      return input;
    }
    return input.join(character);
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

内置管道

当然，Angular提供的内置管道非常好用，看下面的代码：

class Server {
  host: string;
  port: number;

  toString(): string {         // 作用完全等同Java的toString方法
    return `${host}:${port}`;  // 与Kotlin一样也支持模板字符串语法
  }
}
myServer: Server = {           // 用json直接赋值，比Java方便不少吧
  host: "127.0.0.1",           // 如果变量名或者赋值类型的值写错了，类型系统会提示出错
  port: 8080
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

HTML模板：

<div>{{ myServer }}</div>

• 1

显示结果为：

127.0.0.1:8080

• 1

如果想要把下面的对象myServer按照json格式打印出来，可以用json管道：

<div>{{ myServer | json }}</div>

• 1

显示结果为：

{
  "host": "127.0.0.1",
  "port": 8080
}

• 1
• 2
• 3
• 4

如果上面的json是服务端发送过来的，那么结果是一个rxjs可观察对象Observable<Server>，

myServer$: Observable<Server> = http.get('api/server').map(res => res.json());

• 1

Observable类型的变量名以$结尾，是Angular的一种编程习惯，因为rxjs使用频率太高，这是为了区分普通对象和可观察对象。

可以不需要在代码中手动订阅，也不需要考虑什么时候去解除订阅，在HTML模板中用async管道，

<div>{{ myServer$ | async }}</div>

• 1

当可观察对象有新值(onNext)时会在网页中更新，显示结果为：

127.0.0.1:8080

• 1

就像Linux中的管道一样，Angular的管道也可以级联，上面的结果很容易以json格式显示出来：

<div>{{ myServer$ | async | json }}</div>

• 1

显示结果为：

{
  "host": "127.0.0.1",
  "port": 8080
}

• 1
• 2
• 3
• 4

模块

可以看到，Angular CLI可以帮我们创建组件、服务、管道、指令等，非常方便，它们都有共同的特点，就是都会更改模块定义文件（app.module.ts）。

那么，什么是模块？

类似于Java 9或OSGi的模块化，Angular应用天生就是模块化，概念都是差不多的。模块，就是在类和包之上在做封装，通常把协同完成某个功能的一组组件、服务作为一个整体，就是一个模块。打个比方，如果把模块想象成一个班级，那么组件、服务就是班上的同学。

模块具有封装性和隔离性，模块外部无法访问模块内部的组件、服务，除非导入该模块。这一点，用过OSGi或Eclipse RCP很熟悉，一个模块相对于一个Eclipse插件。如果想在一个插件中使用另一个插件的类，常用的做法是在插件声明文件MANIFEST.MF中声明为Require-Bundle（当然Eclipse不只这一种方法，比如还可以动态导入、或只import包名让OSGi容器自动去匹配插件，目前Angular模块化还做不到这一点）。

Angular CLI脚手架创建的src/app/app.module.ts，定义了一个由注解@NgModule装饰的类（模块类），用于管理该模块。这个文件就好比Eclipse插件中的MANIFEST.MF。一个模块类的代码如下：

import { BrowserModule } from '@angular/platform-browser';

@NgModule({                   // 模块类的标识由该注解决定
  declarations: [             // 声明组件、管道、指令，类型由具体类的注解来区分，用Angular CLI创建时会自动填入
    AppComponent, MyPipe, MyDirective ...
  ],
  imports: [                  // imports指定要导入的模块，这样才可以使用其它模块内的组件、指令、管道、服务
    BrowserModule, ...
  ],
  providers: [                // 声明服务，只有声明的服务才会被`Angular`框架创建出来，才能注入到其它服务或组件
    MyService, ...            // 用Angular CLI创建时会自动填入
  ],
  bootstrap: [AppComponent]   // 引导组件
})
export class AppModule { }    // 模块类定义

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

一个Angular应用中可以有多个模块，用Angular CLI可以很容易创建一个模块：

ng g module your-new-module-name

• 1

Angular CLI创建TypeScript类

创建普通类：

ng g class my-new-class

• 1

创建接口：

ng g interface my-new-interface

• 1

创建枚举：

ng g enum my-new-enum

• 1

IDE

免费版本推荐使用微软的Visual Studio Code (VSCode), 很好用，但有条件一定要买付费的IDE：JetBrain的WebStorm。原因就跟Java IDE的选择一样，要免费的Eclipse，还是商业使用需付费的IntelliJ IDEA，看你或你的公司是不是土豪。

笔者是穷屌丝，使用VSCode，编写Angular代码，推荐安装下面的插件：

1. Angular 5 Snippets：Angular开发必备，这里我使用的是Angular 5。
2. TSLint：TypeScript基于最佳实践的编程规范检测插件（类似于Java的CheckStyle），以红线实时提示你的不规范代码。
3. TypeScript Importer：在编写TypeScript代码时，当你使用一个新的类，自动插入import语句。

Typescript类型系统非常好的地方是IDE的提示非常好，比如能提示出类有哪些方法、哪些属性，再加上语法和方法与Java太像，使用起来非常自然、亲切。

总结

读到这里，相信你已经有了Angular的开发环境，并且对一些Angular的概念有了初步理解，能够与服务端一起编译并部署到Web服务器上。

也许你会问我，有那么多Web前端框架，为什么偏爱Angular？

选择Angular的原因

笔者作为一个Java背景的软件开发人员，选择Angular的原因有：

使用TypeScript编程

TypeScript，其实并不是一种新语言，她仍然还是JavaScript，是一种带有类型系统的、面向对象版本的JavaScript，是ES6/7/8+的超集:

1. 语法类似Java/Kotlin，很多语言特性、关键字、类方法名都是一样的；
2. 类型系统可以在编译期做检查，避免敲错字；
3. 类型系统可以帮助IDE分析代码，代码跳转、引用分析、出错实时提醒等；
4. 类型系统可以提高代码的可读性、可维护性、类型安全性，调用方法时可以避免传入不期望的类型；
5. TypeScript是ES6+的超集，是ES6规范的实现，在未来的浏览器很可能直接支持；
6. TypeScript可以直接编译成ES5运行于旧浏览器，在现有版本的Angular是默认编译目标，无需引入任何编译依赖和配置；
7. TypeScript与其编译出的ES5 javascript代码是一一对应的，很多时候就是类型擦除，无需额外库，不像Kotlin.js那么重。
8. 拼爹时代，这点还是要考虑的：微软的TypeScript，加上谷歌的Angular，非常看好它的前景。
9. JavaScript编写的库可以在TypeScript使用，缺乏类型声明部分，社区以提供大量第三方js库的类型定义，一般不需要自己做，当然，想自定义个类型也不难。

如果你是Java程序员，应该会赞成这句话：“TypeScript一点都不难，JavaScript才叫难！”。

当然如果你真的不习惯写类型，那不写也可以，因为TypeScript是ES6+的超集，ES6+的代码在TypeScript完全合法，不过就没有了编译时类型检查，IDE也不会帮你跳转和引用分析，也不会做方法提示，你能接受缺乏类型安全机制的痛苦吗？我不能！

很像Spring Boot框架

Angular框架很像Spring Boot框架(都无需额外配置)，有组件、服务、依赖注入、基于注解的配置，容器管理组件、服务的生命周期等特性；

基于rxjs

rxjs可以方便编写异步响应式代码、处理事件总线、大量可组合的操作符、等等（其实就是流行的RxJava的TypeScript版本）。

模块化

模块化对于构建大型复杂的Web系统来说尤为重要。

所以

对于Java、Kotlin等静态强类型语言背景的开发人员来说，Angular学习门槛较低，因为很多特性、概念都太Java了。

而对于JavaScript、Python等动态语言背景的开发人员，入手React, Vue可能更容易，因为它们都是基于ES6的无类型系统。

——- 本博客所有内容均为原创，转载请注明作者和出处 ——-

作者：刘文哲

联系方式：liuwenzhe2008@qq.com

博客：http://blog.csdn.net/liuwenzhe2008

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/liuwenzhe2008/article/details/79125406