• 1. 摘要
• 2. NgModule举例、说明
• 3. Angular CLI生成模块
• 4. 延迟加载模块
• 5. 总结

环境:

• Angular CLI: 11.0.6
• Angular: 11.0.7
• Node: 12.18.3
• npm : 6.14.6
• IDE: Visual Studio Code

1. 摘要

模块(NgModule)是Angular的核心概念之一。模块(NgModule)用于组织业务代码，按照自己的业务场景，把组件、服务、路由打包到模块里面。

模块(NgModule)的主要作用：

1. NgModule 组织业务代码，开发者可以利用 NgModule 把关系比较紧密的组件组织到一起。
2. NgModule 用来控制组件、指令、管道等的可见性，处于同一个NgModule 里面的组件默认互相可见，而对于外部的组件来说，只能看到NgModule 导出（exports）的内容。这样就实现了封装，只暴露希望暴露的组件、服务给调用者。
3. NgModule 是 @angular/cli 打包的最小单位。打包的时候，@angular/cli 会检查所有 @NgModule 和路由配置，如果你配置了异步模块，cli 会自动把模块切分成独立的 chunk（块）。在 Angular 里面，打包和切分的动作是 @angular/cli 自动处理的，不需要你干预。当然，如果需要，你也可以修改angular的编译配置，基于Webpack 配一个环境出来，自定义打包规则。
4. NgModule 是 Router 进行异步加载的最小单位，Router 能加载的最小单位是模块，而不是组件。当然，也可以一个模块里面只放一个组件是。

2. NgModule举例、说明

前文说过，Angular中任何的Component、service，都必须属于一个NgModule。所以，使用AngularCLI生成的框架程序，自动生成的组件，也是属于一个Component的，并且标记为启动模块。
这样，angular站点启动后，会以这个模块为入口，根据配置加载各个模块。

下面以默认生成的启动模块为例，进行解释：

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

@NgModule({
  declarations: [
    AppComponent,
    MyComponentComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• declarations，用来放组件、指令、管道的声明；
• imports，用来导入外部模块。比如当前模块需要调用其他模块的组件，需要加入到这里。比如上面例子，导入了Browser和Routing 2个模块。
• providers，需要使用的第三方或者其他模块的Service 都放在这里；
• bootstrap，定义启动组件。 一个可以启动的Angular项目（如果只是一个Library除外），需要定义一个启动组件。
• exports, 声明的组件、指令和管道可以在导入了本模块的模块下任何组件的模板中使用。 导出的这些可声明对象就是该模块的公共 API。换句话说，其他模块想用本模块中定义的内容，需要在这里声明。
• entryComponents， 如果其他模块想要动态加载本模块中的组件到视图中， 那么，这些组件需要写入entryComponents。

3. Angular CLI生成模块

AngularCLI是一个很好很强大的工具集，可以帮助我们生成很多基础代码、文件， 包括创建一个模块，并且可以制定参数。

1

ng generate module <name> [options]

详情参考https://angular.io/cli/generate#module。

几个简单的例子：

1. 创建feature1模块： ng generate module feature1
2. 创建feature2模块， 并且带路由：ng generate module feature2 --routing
3. 创建一个延迟加载的feature3模块(延迟加载模块，参考下面章节)： ng generate module feature3 --route feature3 --module app.module

说明： ng generate module xxx 可以简写为 ng g m xxx

4. 延迟加载模块

延迟加载使得应用程序在启动时不被载入，而是结合路由配置，在需要时才动态加载相应模块。这样 Angular 就不需要在第一个界面从服务器下载所有的文件，直到请求它，才下载相应的模块。这对提供性能和减少首屏的初始下载文件尺寸有巨大的帮助，而且它可以很容易设置。

举例来说，上文创建了3个模块，主程序模块以及feature1、feature2会被打成一个包（js），feature3会被单独打一个包（js），当用户访问/feature3/* 的地址后，才会加载feature3这个包（js），否则永远不会请求、加载feature3的模块，从而提高性能（首页加载时间）。当一个项目大到一定程度时，最好考虑把某些模块设置为延迟加载模块。

延迟加载的路由定义（angular CLI会自动生成）：

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

// src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'feature3',
    loadChildren: () =>
      import('./feature3/feature3.module').then((m) => m.Feature3Module),
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

最后复习一下生成延迟加载模块的命令ng generate module feature3 --route feature3 --module app.module，或者简写为 ng g m feature3 --route feature3 --module app.module。

5. 总结

1. Angular项目，就是模块（NgModule）的一个集合，任组件、服务等必须包含在一个模块中。
2. 延迟加载模块用于提高首页加载性能。
3. Angular CLI命令，生成模块。

—————- END —————-

======================

• 1. 摘要
• 2. 生命周期及顺序
• 3. 响应生命周期事件
• 4. 主要生命周期事件
  • 4.1. 初始化事件 ngOnInit()
  • 4.2. 实例销毁 ngOnDestroy()
• 5. 总结

环境:

• Angular CLI: 11.0.6
• Angular: 11.0.7
• Node: 12.18.3
• npm : 6.14.6
• IDE: Visual Studio Code

1. 摘要

当 Angular 实例化组件类并渲染组件视图及其子视图时，组件实例的生命周期就开始了。生命周期一直伴随着变更检测，Angular 会检查数据绑定属性何时发生变化，并按需更新视图和组件实例。当 Angular 销毁组件实例并从 DOM 中移除它渲染的模板时，生命周期就结束了。当 Angular 在执行过程中创建、更新和销毁实例时，指令就有了类似的生命周期。

你的应用可以使用生命周期钩子方法来触发组件或指令生命周期中的关键事件，以初始化新实例，需要时启动变更检测，在变更检测过程中响应更新，并在删除实例之前进行清理。

2. 生命周期及顺序

1. ngOnChanges(): 当 Angular 设置或重新设置数据绑定的输入属性时响应。
2. ngOnInit(): 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。
3. ngDoCheck(): 每次执行变更检测时的 ngOnChanges() 和 首次执行变更检测时的 ngOnInit() 后调用。
4. ngAfterContentInit(): 当 Angular 把外部内容投影进组件视图或指令所在的视图之后调用。
5. ngAfterContentChecked(): ngAfterContentInit() 和每次 ngDoCheck() 之后调用
6. ngAfterViewInit(): 当 Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用。
7. ngAfterViewChecked(): ngAfterViewInit() 和每次 ngAfterContentChecked() 之后调用。
8. ngOnDestroy(): 每当 Angular 每次销毁指令/组件之前调用，清理释放资源。

3. 响应生命周期事件

我们以通过实现一个或多个 Angular中定义的生命周期钩子接口来响应组件或指令生命周期中的事件。每个接口都有唯一的一个钩子方法，它们的名字是由接口名再加上 ng 前缀构成的。例如：

1
2
3
4
5
6
7
8
9

@Component()
export class DemoComponent implements OnInit {
  constructor() { }

  // implement OnInit's `ngOnInit` method
  ngOnInit() { 
      // do something here
  }
}

说明：
1） 通过生命周期钩子接口来响应生命周期中的事件，需要在类名之后，声明实现(implements) 具体的钩子接口。然后代码中定义个钩子函数才能被执行。如 ngOnInit() 对应 接口OnInit 。
2） 可以实现多个钩子接口，例如 export class DemoComponent implements OnInit, OnDestroy {

4. 主要生命周期事件

4.1. 初始化事件 ngOnInit()

使用 ngOnInit() 方法执行以下初始化任务:

1. 逻辑稍复杂，不适合放到构造函数中的逻辑
2. 初始化中的数据访问逻辑
3. 处理需要根据父组件传入参数（@Input）进行初始化的逻辑

4.2. 实例销毁 ngOnDestroy()

把清理逻辑放进 ngOnDestroy() 中，这个逻辑就必然会在 Angular 销毁该指令之前运行。下列逻辑可言放到ngOnDestroy()：

• 取消订阅可观察对象和 DOM 事件。
• 停止 interval 计时器。
• 反注册该指令在全局或应用服务中注册过的所有回调。
• 释放其他占有的资源。

5. 总结

1. 使用生命周期事件钩子函数，别忘了类名后面implements 相应的接口，否则不生效；
2. 初始化代码，区分哪些放构造函数，哪些放 ngOnInit()；
3. 可以精简的钩子事件方法来避免性能问题；
4. ngOnChanges()发生的非常频繁，加入复杂逻辑会影响性能；

—————- END —————-

======================

• 1. 摘要
• 2. 父传子 @Input()
  • 2.1. 子组件定义@Input()
  • 2.2. 父组件传递变量给子组件
• 3. 子传父 @Output()
  • 3.1. 子组件定义@Output
  • 3.2. 父组件订阅事件
• 4. 总结

环境:

• Angular CLI: 11.0.6
• Angular: 11.0.7
• Node: 12.18.3
• npm : 6.14.6
• IDE: Visual Studio Code

1. 摘要

组件之间传递数据，最主要的就是父子组件之间传递数据， 例如：

1
2
3

<parent-component>
  <child-component></child-component>
</parent-component>

父组件传入数据给子组件，同时，子组件数据发生变化是，希望能够通知父组件。

Angular 中，@Input() 和 @Output() 为子组件提供了一种与其父组件通信的方法。 @Input() 允许父组件更新子组件中的数据。相反，@Output() 允许子组件向父组件发送数据。

2. 父传子 @Input()

2.1. 子组件定义@Input()

子组件中的 @Input() 装饰器表示该属性可以从其父组件中获取值。

例如：

1
2
3

export class ChildComponent {
  @Input() message: string;
}

1. 增加@Input() 装饰器的变量，除了数据可以从父组件传入后，其他逻辑和普通变量一致；
2. 子组件的html代码中，既可使用message这个变量， 例如：

1
2
3

<p>
  Parent says: {{message}}
</p>

2.2. 父组件传递变量给子组件

当父组件调用子组件时，可以把父组件的变量（如messageToChild） 传递给子组件

1

<child-component [message]="messageToChild"></child-component>

子组件中，可以更改message这个传入的变量，但是其作用域只在子组件中，父组件拿不到更改后的结果。（如何传给父组件，请接着看）

3. 子传父 @Output()

Angular通过事件（Event）来实现子组件通知父组件数据的改变，父组件需要订阅该事件。

3.1. 子组件定义@Output

子组件定义@Output

1
2
3
4
5
6
7
8
9
10
11

export class ChildComponent {

  // EventEmitter ，这意味着它是一个事件
  // new EventEmitter<string>() - 
  // 使用 Angular 来创建一个新的事件发射器，它发出的数据是 string 类型的。
  @Output() newItemEvent = new EventEmitter<string>();

  addNewItem(value: string) {
    this.newItemEvent.emit(value);
  }
}

子组件当数据发生变化时，调用这个addNewItem方法既可。例如，html中

1
2

<label>Add an item: <input #newItem></label>
<button (click)="addNewItem(newItem.value)">Add to parent's list</button>

3.2. 父组件订阅事件

1. 父组件的ts代码中，增加一个处理上面事件的方法，例如

1
2
3

addItem(newItem: string) {
    // logic here
}

2. 父组件的html中，订阅该事件。

1

<child-component (newItemEvent)="addItem($event)"></child-component>

事件绑定 (newItemEvent)='addItem($event)' 会把子组件中的 newItemEvent 事件连接到父组件的 addItem() 方法。

4. 总结

1. 使用@Input() 和 @Output() 可以很方便的实现父子组件之间的数据传递、共享。
2. 可以同时使用 @Input() 和 @Output()

—————- END —————-

======================

• 1. 摘要
• 2. https://update.angular.io/
• 3. 总结

环境:

• Angular CLI: 11.0.6
• Angular: 11.0.7
• Node: 12.18.3
• npm : 6.14.6
• IDE: Visual Studio Code

1. 摘要

近些年Web技术飞速发展，新的类库、框架如雨后春笋般不断涌现，而每个类库也不断的更新、升级，甚至是不再兼容的升级。笔者之前维护的一个6年项目，是用jQueryMobile开发的，估计入门web开发比较短的同学都没有听说过吧。另外，就拿Angular来说，从2.0开始，使用ts开发，不再兼容1.0 版本。从2.0开始，命名为Angular，1.0的叫angularJS, 2个版本彻底切割。而这也是angular流失很多用户的其中一个原因。

针对这些问题，Angular专门提供了版本升级的指导方案，非常详细、准确（Angular每半年发布一个主版本，这个也是必须的）。

2. https://update.angular.io/

https://update.angular.io/ 是官方的angular升级指导页面，你可以选择你的项目的版本，以及要升级到的版本；同时可以选择项目使用的技术，比如是否使用了Angular Material （这也是之前推荐这个UI框架的原因–升级方便），是否和AngualrJS同时使用等等。之后，自动提示升级步骤。

升级主要通过 ng update xxx 来实现， ng update 命令不同于npm命令，npm update相当于 npm+更改配置（代码），也就是说，再更新完node-modules之后，ng update会自动更新配置文件，甚至是代码中的基本的import的代码，实现自动升级、更新。

举例，10.2升级到11.1，如果没有涉及到复杂的anuglar技术，大致的升级步骤是：

• Run ng update @angular/core @angular/cli which should bring you to version 11 of Angular.
• Run ng update @angular/material.
• Angular now requires TypeScript 4.0. ng update will migrate you automatically.
• Support for IE9, IE10, and IE mobile has been removed. This was announced * in the v10 update.

3. 总结

• Angular虽然更新、升级比较频繁（从某种意义上也是优点），但是升级部分确实做得最完善的
• UI框架，@angular/material可以实现和Angular的同步升级，其他第三方框架，都会有演示，时间不等
• 个人不推荐使用最新的版本，不做小白鼠。可以使用之前发布的一个版本，比如现在是v11，那么我们就使用v10。更稳定，同时网上资料也多。
• 及时更新angular版本，免得技术债欠的越来越多而导致无法升级。
• 这个升级指导也是相对的，如果你对Angular有些特殊的用法，或者没有安装官方推荐方式使用，升级也是比较麻烦的。
• 升级时，如果跨多版本，建议一个版本一个版本的升级，每升级一次，执行UT或者把站点跑起来试试，以防出错。

—————- END —————-

======================

• 1. 第三方UI库的选择
• 2. Angular Material
  • 2.1. 优缺点
    • 2.1.1. 优点
    • 2.1.2. 缺点
  • 2.2. 引入到项目
• 3. 总结

环境:

• Angular CLI: 11.0.6
• Angular: 11.0.7
• Node: 12.18.3
• npm : 6.14.6
• IDE: VSCode

1. 第三方UI库的选择

Angular开发，除非你只有简单一两个页面，否则引入第三方UI库就是必不可少的。而具体用哪个库，就需要考虑多方面的东西了。比如：

1. 流行程度
2. 版本更新情况 （是否能跟进anuglar更新，bug是否及时修复）
3. UI风格，是否适用于项目
4. 入手难易程度
5. 文档完善程度

市面上有很多Angular可用的类库，可用根据项目、企业情况去选择。简单列一下可选的UI库。

1. Angular Material: angular 官方UI库。https://material.angular.io/
2. clarity: 国外的一套比较流行的框架， https://clarity.design/。
3. NG-ZORRO: 阿里Ant Design的Angular版本。 https://ng.ant.design/docs/introduce/en
4. Element Angular：国内非常流行的基于Vue的Element，同样有Angular版本。 https://element-angular.faas.ele.me/
5. Kendo UI。很多很强大，只是要收费。https://www.telerik.com/kendo-angular-ui

2. Angular Material

2.1. 优缺点

2.1.1. 优点

• 官方UI组件
• 最标准的Material实现
• 紧跟Angular核心组件的更新进度
• 官方支持与Angular的同步升级

2.1.2. 缺点

• 组件不像其他框架那么多，但是基本够用
• 风格不是特别像国内的框架

2.2. 引入到项目

1. 根目录下执行下面命令：

1

ng add @angular/material

2. import 到页面所属的module，或者是app.module.ts中。

1
2
3
4
5
6
7
8
9

// import MatSliderModule
import { MatSliderModule } from '@angular/material/slider';

…
@NgModule ({....
  imports: [...,
  MatSliderModule,
…]
})

3. 总结

1. 第三方组件各有优缺点
2. 根据公司、项目的需求去选择
3. Angular Material升级更容易，官方支持。

@[TOC]

• 1. 本地开发环境搭建
  • 1.1. node.js
  • 1.2. Angular CLI
• 2. 开发工具 - Visual Studio Code
• 第一个Anuglar项目
  • 创建第一个anuglar项目
  • Angular CLI常用命令
• 在线实战项目
  • 新手项目：Basic Angular app
  • 入门项目：Tour of Heroes

了解了一些Angular的基本概念后，如果想进一步学习Angular，接下来让我们来搭建本地开发环境，并从一个入门项目了解Angular的基本用法。

环境:

• Angular CLI: 11.0.6
• Angular: 11.0.7
• Node: 12.18.3
• npm : 6.14.6
• IDE: VSCode

1. 本地开发环境搭建

本地开发环境搭建只需要node.js, 和Angular CLI。

1.1. node.js

官网（https://nodejs.org/）下载最新的LTS（Long Time Support)版本的node.js，安装。

说明：

1. LTS（Long Time Support)版本, 官方会支持更长时间，比如打补丁，改bug等。相对更稳定、靠谱。
2. node.js 安装后，同时会安装npm

检查本地node.js, npm环境

1
2
3
4

# node.js 版本
node -v
# npm 版本
npm -v

1.2. Angular CLI

angular-cli又称 Angular脚手架，是angular开发团队自行维护的一个开发工具，用于快速生成项目或者组件的框架以提高效率。可以方便的生成angular app、component、service 等等， 并且可以通过参数，按照自己的需求去创建。可以说是angular开发必不可少的利器。(参考：https://cli.angular.io/)

npm安装最新版本@angular/cli

1

npm install -g @angular/cli

检查本地angular环境

1

ng v

说明：

1. 该命令如果在非angular项目下执行，返回全局的Angular CLI环境版本
2. 在angular项目下执行, 返回当前angular项目使用的angular，angular CLI，以及核心angular组件的版本。
3. 全局Angular CLI版本有何能与项目的Angular CLI版本不一致，不冲突。项目中，使用项目制定的CLI版本。

2. 开发工具 - Visual Studio Code

推荐使用，Visual Studio Code （VSCode），微软开发的，可以说是现今为止最好的免费的Angular开发工具。并且有很多非常好用的插件。

推荐插件：

• Angular Language Service： Angular语法自动提示, Angular开发必备。 This extension provides a rich editing experience for Angular templates, both inline and external templates.
  This extension is brought to you by members of the Angular team. It is fantastic at helping write solid code in the html templates.
• Prettier - 代码自动格式化插件。VS Code plugin for prettier/prettier, which formats code consistently. Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
• Code Spell Checker - 语法检查插件. 注释可以写中文，变量名不行吧，如果拼写不对不好看吧。所以推荐把这个语法检查插件装上。
• GitLens - GIT 辅助插件。If you use git, this is quite helpful. GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.
• Markdown All in One： 如果用Markdown写东西，这个东西一定要有，增加了对MD文件的很多支持，比如生成目录(TOC)， 目录编号等。

第一个Anuglar项目

创建第一个anuglar项目

使用Anuglar CLI可以很轻松的创建angular项目。使用的Angular版本与当前环境的Anuglar CLI一致。

1
2
3
4
5
6

# 创建angular项目，项目名 ·my-ngular-app·
ng new my-ngular-app
# 进入项目目录
cd my-ngular-app
# 启动angualar项目
ng serve

说明

1. ng 是angular CLI的简称
2. ng serve: 启动angular项目。

Angular CLI常用命令

1. ng serve: 启动angular项目。默认情况下，angular CLI检测代码改动，如果文件改动，自动编译更改部分代码，然后重新加载（reload）页面。
2. ng build: 编译代码，默认输出到根目录下的dist目录。
3. ng test： 执行单元测试（Unit Test）

在线实战项目

Angular官方提供了2个新手入门项目，并且都是基于StackBlitz（针对 Web 开发者的在线 IDE），可以不使用本地环境，直接基于Web学习和练习Angular。

新手项目：Basic Angular app

• https://angular.io/start

入门项目：Tour of Heroes

• https://angular.io/tutorial

(Based on Angular V8.x ~ 11.x)

1. Angular-CLI
   Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell.

It is the MUST have tool to write Angular code, so make sure you are familiar with its commands.

1. IDE
   1.1 Visual Studio Code
   Visual Studio Code: Best and free IDE for web developing.
   Plugins:

Angular Language Service - This extension provides a rich editing experience for Angular templates, both inline and external templates.
This extension is brought to you by members of the Angular team. It is fantastic at helping write solid code in the html templates.
Prettier - VS Code plugin for prettier/prettier, which formats code consistently. Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
Code Spell Checker - A basic spell checker that works well with camelCase code.
The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.
GitLens - If you use git, this is quite helpful. GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.
1.2 Alternatives
Atom by GitHub
Sublime Text 3
PyCharm
IntelliJ IDEA
Webstorm
There are may alternatives, you can choose which you are familiar with.
*

2. UI Framework
   2.1 Angular Material
   Angular Material is Material Design components for Angular.
   There are many alternatives. But Angular Material is the official one from Angular, and Angular also give detail upgrade solution on Angular plus Angular Material in https://update.angular.io/.

For future upgrade reason, this is your best choice.

3. State Management - NgRx
   @ngrx/store is RxJS powered global state management for Angular applications, inspired by Redux. Store is a controlled state container designed to help write performant, consistent applications on top of Angular.

NgRx Store is mainly for managing global state across an entire application.

4. Code Reuse
   4.1 Angular libraries
   Angular libraries should what you need.

Many applications need to solve the same general problems, such as presenting a unified user interface, presenting data, and allowing data entry. Developers can create general solutions for particular domains that can be adapted for re-use in different apps. Such a solution can be built as Angular libraries and these libraries can be published and shared as npm packages.

An Angular library is an Angular project that differs from an app in that it cannot run on its own. A library must be imported and used in an app.

You can easily reuse your Angular library or also submit your library into npm server.

4.2 Alternatives - Angular custom elements
Note that libraries are intended to be used by Angular apps. To add Angular functionality to non-Angular web apps, you can use Angular custom elements.

Angular elements are Angular components packaged as custom elements (also called Web Components), a web standard for defining new HTML elements in a framework-agnostic way.

• 1. 基本概念

1. 基本概念

1. Kubernetes 是为生产环境而设计的容器调度管理系统，对于负载均衡、服务发现、高可用、滚动升级、自动伸缩等容器云平台的功能要求有原生支持。
2. 由于 Kubernetes 在 K 和 s 间有 8 个字母，因此常简称 K8s。
3. K8s 系统最核心的两个设计理念：一个是容错性，一个是易扩展性。

—————- END —————-

======================

Angular入门到精通系列教程（2） - 基本概念

• 1. Angular （Angular2）v.s. AngularJS
• 2. 检查本地环境的版本
• 3. TypeScript
• 4. Angular CLI
• 5. Angular 的版本
• 6. Angular 版本如何升级
• 7. 依赖注入（dependency injection）
• 8. 编译-AOT和JIT的区别

环境:

• Angular CLI: 11.0.6
• Angular: 11.0.7
• Node: 12.18.3
• npm : 6.14.6
• IDE: VSCode

1. Angular （Angular2）v.s. AngularJS

Angular最早期的版本，也叫AnugularJS，使用javascript开发；新的版本，才叫Angular，也称为Angular2，使用typescript开发，Angular和AngularJS是不兼容的（当然，官方也有2个版本的集成方案）。

2. 检查本地环境的版本

检查npm, node 版本:

• npm 版本：npm -v
• node版本： node -v
• angular、angular CLI全局、本地版本 ng --version

3. TypeScript

Angular要求开发语言必须为TypeScript。TypeScript有很多好处，比如引入了类、接口的概念，比如强类型，可以在写代码时（编译时）就能检查到一些错误，避免只有代码在执行时才发现异常。

如果没用过TypeScript，不要害怕TypeScript这个新的概念，只要你有javascript经验，直接入手，没有任何难度。只需要用到class、interface等东西时，参考一下别人如何使用，或者查一下typescript文档即可。

4. Angular CLI

angular-cli又称 Angular脚手架，是angular开发团队自行维护的一个开发工具，用于快速生成项目或者组件的框架以提高效率。可以方便的生成angular app、component、service 等等， 并且可以通过参数，按照自己的需求去创建。可以说是angular开发必不可少的利器。
参考：https://cli.angular.io/

ng generate: 新建component、service、pipe, class 等
ng new: 新建angular app
ng update: 升级angular自身，以及依赖
ng version： 显示anuglar cli全局版本、以及本地的angular cli、angular code等的版本
ng add: 新增第三方库。会做2件事，1）基于npm安装node_modules, 2）自动更改配置文件，保证新的依赖正常工作

总结一下，Angular的开放，离不开AngularCLI。

5. Angular 的版本

不同于Angular2+Angular的不兼容， Angular 2.0 之后会保证向下兼容。官方的版本发布计划是：

• 每 6 个月发布一个主版本（第一位版本号，主版本）
• 每个主版本发布 1 ~ 3 个小版本（第二位版本号，Feature 版本号）
• 每周发布一个补丁版本（第三位版本号，Hotfix 版本号）

6. Angular 版本如何升级

Angular CLI提供了升级命令(ng update)，同时，官网（https://update.angular.io/）也有升级指南。选择从哪个版本升级到哪个版本后，会给出一步一步的升级命令，直接执行就好。

7. 依赖注入（dependency injection）

依赖注入是Angular实现的一种应用程序设计模式， 是Angular的核心概念之一。

依赖就是具有一系列功能的服务(service)， 应用程序中的各种组件和指令（derictives）可能需要服务的功能。 Angular提供了一种平滑的机制，通过它我们可以将这些依赖项注入我们的组件和指令中。因此，我们只是在构建依赖关系，这些依赖关系可以在应用程序的所有组件之间注入。

使用依赖注入还有以下好处，

1. 不需要实例化，（new 实例）。不需要关心class的构造函数里需要什么参数
2. 一次注入（app module通过Providers注入），所有组件都可以使用。而且是用同一个service实例（Singleton），也就是说一个service里的数据是共分享的，可以用于组件间数据传递。

8. 编译-AOT和JIT的区别

每个Angular应用程序都包含浏览器无法理解的组件和模板。 因此，在浏览器内部运行之前，需要先编译所有Angular应用程序。

Angular提供两种编译类型：

1. JIT(Just-in-Time) compilation
2. AOT(Ahead-of-Time) compilation

区别在于，在JIT编译中，应用程序在运行时在浏览器内部进行编译；而在AOT编译中，应用程序在构建期间进行编译。
显而易见，AOT编译好处多多，因而是Angular的默认编译方式。主要优点

由于应用程序是在浏览器内部运行之前进行编译的，因此浏览器会加载可执行代码并立即呈现应用程序，从而加快了呈现速度。

在AOT编译中，编译器将与应用程序一起发送外部HTML和CSS文件，从而消除了对那些源文件的单独AJAX请求，从而减少了ajax请求。

开发人员可以在构建阶段检测并处理错误，这有助于最大程度地减少错误。
AOT编译器将HTML和模板添加到JS文件中，然后再在浏览器中运行。 因此，没有多余的HTML文件可读取，从而为应用程序提供了更好的安全性。

• 1. 概述
• 2. 框架比较
• 3. 为什么国内Angular不是很流行

1. 概述

总的来说一句话，如果你是老大，你可以选择用什么；如果你不是，那么，老大让用什么，你就用什么。

• 前端框架Angular,Vue,React三选一，没有第四种。 （当然，如果只是一两个简单的页面，纯JS、jquery足够了）。
• 国内的话，React和vue更流行一点，国外的话React和Angular更流行。
• Vue 中文资料更多一些
• Angular有些资源访问受限或者较慢（防火墙问题）

2. 框架比较

网上比较的文章太多了，如果想了解，baidu、google一下吧，这个就不再多说了。

3. 为什么国内Angular不是很流行

只说些个人看法，更多原因请自行搜索。

1. Angular有些资源访问受限或者较慢（防火墙问题）
2. 上手难度稍大，或者说需要更多的时间培训才能开发。
3. Angular对anuglarJS（1.0版本）不支持（虽然后期推出了兼容方案）， 伤了很多人的心。不过这个难免，一个组件、框架的升级，如果一直背负的早期债务，很难有更好的提升。
4. TypeScript。Angular是第一个吃螃蟹的，完全抛弃了js，转入Typscript，得罪的很多js的铁杆粉丝，以及惧怕ts的人。不过现在看来，typescript才是前端的趋势。vue3也声称用typescript重写了，并打算更完美的支持typescript。
5. 大而全的框架。选择Angular的话，它自带了很多东西，路由、表单、动画、http请求等等，需要更多的时间去学习和理解。而其他框架，很多组件都是有备选方案，或者第三方提供的（如vue使用axios处理http请求），让人觉得了解框架更简单。
6. 版本升级较快。每半年一个主版本，优缺点共存吧。
7. 恶性循环：用的人少 》 聊的人少 》 资源少 》 用的人更少。
8. vue更符合国人的习惯，考虑了一些小的常用细节。比如自带支持避免一个按钮点击多次（修饰符once，@click.prevent.once）。