• 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）。

• 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文件可读取，从而为应用程序提供了更好的安全性。

本文由博客群发一文多发等运营工具平台 OpenWrite 发布

(Based on Angular 10)

0. 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. 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环境

# 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

npm install -g @angular/cli

检查本地angular环境

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一致。

# 创建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

• 1. 第三方UI库的选择

• 2. Angular Material

• 2.1.1. 优点

• 2.1.2. 缺点

• 2.1. 优缺点

• 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. 根目录下执行下面命令：

ng add @angular/material

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

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

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

3. 总结

1. 第三方组件各有优缺点

2. 根据公司、项目的需求去选择

3. Angular Material升级更容易，官方支持。

• 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. 摘要

• 2. 路由（Router）基本用法

• 2.1. 准备

• 2.2. 注册路由

• 2.3. html中的用法

• 2.4. ts 代码中的用法

• 3. 接收参数

• 3.1. 路径中的参数

• 3.2. 参数（QueryParameter）中的参数

• 4. URL路径显示格式

• 5. 部署中遇到的问题

• 6. 总结

环境:

• Angular CLI: 11.0.6

• Angular: 11.0.7

• Node: 12.18.3

• npm : 6.14.6

• IDE: Visual Studio Code

1. 摘要

简单来说地址栏中，不同的地址（URL）对应不同的页面，这就是路由。同时，点击浏览器的前进和后退按钮，浏览器就会在你的浏览历史中向前或向后导航，这也是基于路由。

在 Angular 里面，Router 是一个独立的模块，定义在 @angular/router 模块中，

1. Router 可以配合 NgModule 进行模块的延迟加载（懒加载）、预加载操作（参考《Angular入门到精通系列教程（11）- 模块(NgModule)，延迟加载模块》）；

2. Router 会管理组件的生命周期，它会负责创建、销毁组件。

对于一个新的基于AngularCLI的项目，初始化时可以通过选项，将AppRoutingModule默认加入到app.component.ts中。

2. 路由（Router）基本用法

2.1. 准备

我们首先创建2个页面，用于说明路由的使用：

ng g c page1
ng g c page2

使用上面AnuglarCLI命令，创建Page1Component, Page2Component 2个组件。

2.2. 注册路由

//src\app\app-routing.module.ts
const routes: Routes = [
  {
    path: 'page1',
    component: Page1Component
  },
  {
    path: 'page2',
    component: Page2Component
  },
];

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

可以看到，简单的路由注册，只需要path和component2个属性，分别定义路由的相对路径，以及这个路由的响应组件。

2.3. html中的用法

<a routerLink="page1">Page1</a> |
<a routerLink="page2">Page2</a> 

在html模板中，直接使用routerLink属性，标识为angular的路由。执行代码，可以看到 Page1和Page2 两个超链接，点击可以看到地址栏地址改为http://localhost:4200/page2或http://localhost:4200/page1， 页面内容在page1和page2中切换

2.4. ts 代码中的用法

有时候，需要根据ts中的业务逻辑，进行跳转。ts中，需要注入Router实例，如

constructor(private router: Router) {}

跳转代码：

  // 跳转到 /page1
  this.router.navigate(['/page1']);

  // 跳转到 /page1/123
  this.router.navigate(['/page1', 123]);

3. 接收参数

3.1. 路径中的参数

一般来说，我们把参数作为url中的一段，如/users/1, 代表查询id是1的用户，路由定义为"/users/id" 这种风格。

针对我们的简单页面，比如我们的page1页面可以传id参数，那么我们需要修改我们的routing为：

const routes: Routes = [
  {
    path: 'page1/:id',    //接收id参数
    component: Page1Component,
  },
  {
    // 实现可选参数的小技巧。 这个routing处理没有参数的url
    path: 'page1',        
    redirectTo: 'page1/',   // 跳转到'page1/:id'
  },
  {
    path: 'page2',
    component: Page2Component,
  },
];

ts代码读取参数时， 首先需要注入ActivatedRoute，代码如下：

constructor(private activatedRoute: ActivatedRoute) {}

ngOnInit(): void {
  this.activatedRoute.paramMap.subscribe((params) => {
    console.log('Parameter id: ', params.get('id'));

    // 地址 http://localhost:4200/page1/33   
    // 控制台输出：Query Parameter name:  33

    // 地址 http://localhost:4200/page1/     
    // 控制台输出：Query Parameter name:   (实际结果为undefined)
  });
}

3.2. 参数（QueryParameter）中的参数

参数还有另外一种写法，如http://localhost:4200/?name=cat, 即URL地址后，加一个问号'?', 之后再加参数名和参数值（'name=cat'）。这种称为查询参数(QueryParameter)。

取这查询参数时，和之前的路由参数类似，只是paramMap改为queryParamMap，代码如下：

this.activatedRoute.queryParamMap.subscribe((params) => {
  console.log('Query Parameter name: ', params.get('name'));

  // 地址 http://localhost:4200/page1?name=cat
  // 控制台输出：Query Parameter name:  cat

  // 地址 http://localhost:4200/page1/
  // 控制台输出：Query Parameter name:   (实际结果为undefined)
});

4. URL路径显示格式

不同于传统的纯静态（html）站点，angular中的url不是对应一个真实的文件（页面），因为anuglar接管的路由（Routing）处理，来决定显示那个Component给终端用户。为了针对不同的场景，angular的URL路径显示格式有2中：

1. http://localhost:4200/page1/123

2. http://localhost:4200/#/page1/123

默认是第一种，不加#的。如果需要，可以在app-routing.ts中，加入useHash: true, 如：

// app-routing.ts
@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule],
})

5. 部署中遇到的问题

同样，因为anuglar接管的路由（Routing）处理，所以部署时，部署到iis, nginx等等的服务器，都会有不同的技巧（要求），详细参考：
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode    

6. 总结

1. angular默认不支持可选路由（e.g. /user/:id?),但是我们可以定义2个路由，指向同一个Component来实现这个，达到代码复用；（或者使用redirectTo）

2. 可以使用useHash参数，实现augular路径前加一个#；

3. 读取参数时，都需要subscribe订阅一下，不能直接读取。

4. 打包后部署问题，查看官方wifi （https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode）

---------------- END ----------------

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

• 1. 摘要

• 2. 路由守卫（Route Guards）

• 2.1. 创建路由守卫

• 2.2. 控制路由是否可以激活

• 2.3. 控制路由是否退出（离开）

• 3. 总结

环境:

• Angular CLI: 11.0.6

• Angular: 11.0.7

• Node: 12.18.3

• npm : 6.14.6

• IDE: Visual Studio Code

1. 摘要

在我们的实际的业务开发过程中，我们经常会遇到如下需求：

1. 需要限制某些 URL 的可访问性，例如，对于系统管理界面，只有那些拥有管理员权限的用户才能打开。

2. 当用户处于编辑界面时，在没有保存就离开时，需要提示用户是否放弃修改。

针对以上场景，Angualr使用路由守卫（Route Guards）来实现。

2. 路由守卫（Route Guards）

2.1. 创建路由守卫

Angular CLI提供了命令行工具，可以快速创建路由守卫框架文件：ng generate guard auth。 执行后，Angular CLI会问我们需要实现哪些接口，我们直接勾选即可：

? Which interfaces would you like to implement? (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) CanActivate
 ( ) CanActivateChild
 ( ) CanDeactivate
 ( ) CanLoad

说明：

1. CanActivate: 控制路由是否可以激活

2. CanActivateChild: 控制子路由是否可以激活

3. CanDeactivate: 控制路由是否可以退出

4. CanLoad: 控制模块（module）是否可以被加载

比较经常使用的是1、3，分别控制进入和退出。 按照上面配置，AngularCLI自动生成如下代码，return true; 替换为我们实际的代码即可。return false; 表示不允许跳转，或者取消离开当前页面。

// auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate, CanDeactivate<unknown> {
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return true;
  }
}

在canActivate方法中，我们还可以使用跳转。如页面判断是否已经登录，如果没有登录，跳转到Login页面：

this.router.navigate(['/login']);
return false;

2.2. 控制路由是否可以激活

控制路由是否可以激活，需要定义在定义路由的地方，增加canActivate属性。如果需要，还可以增加data属性， 比如告诉我们的AuthGuard进入当前路由需要验证哪些权限。data属性是可选的。

const routes: Routes = [
  {
    path: "page1",
    component: Page1Component,
    data: { permissions: ['YourPage1Permission'] },  // 传入参数给AuthGuard，可选
    canActivate: [AuthGuard]
  },
  {
    path: "page2",
    component: Page2omponent,
    data: { permissions: ['YourPage2Permission'] },  // 传入参数给AuthGuard，可选
    canActivate: [AuthGuard]
  }
]  

2.3. 控制路由是否退出（离开）

和控制路由是否可以激活类似，在路由定义出增加 canDeactivate，并制定相应的Guard守卫即可。这里不再举例

3. 总结

1. 通过路由守卫（Route Guards）实现控制URL的进入和离开;

2. Angular CLI可以辅助我们创建guard文件;

---------------- END ----------------

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

环境:

• Angular CLI: 11.0.6

• Angular: 11.0.7

• Node: 12.18.3

• npm : 6.14.6

• IDE: Visual Studio Code

1. 概要

当我们完成angular的开发后，如何部署到服务器呢？

2. 编译打包

2.1. 基本打包命令

基于Angular CLI生成的Angular项目，默认会有2个环境配置文件

└──myProject/src/environments/
               └──environment.ts
               └──environment.prod.ts

1. environment.ts: 针对开发环境使用的环境文件

2. environment.prod.ts: 生产环境编译时，将替换原有的environment.ts，然后再打包。 （根目录下的angular.json定义了这个默认行为，有需要，可以进行修改）

AngularCLI刚刚生成2个文件后，如果打开比较2个文件的区别，可以看到开发环境使用的environment.ts文件中，有这么一句production: false。因为，针对生产环境，angular在编译时需要核心考虑效率等问题，而开发环境，要考虑方便开发者进行调试，侧重点不同。

那么针对生产环境如何编译呢？Angular CLI同样提供了命令,

ng build --prod

其中，参数--prod 即告诉编译环境，编译为生产环境包。同样，angular.json中定义了默认的编译参数，如果需要，可以进行修改。主要配置参数如下

"configurations": {
    "production": {
        "fileReplacements": [
        {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.prod.ts"
        }
        ],
        "optimization": true,
        "outputHashing": "all",
        "sourceMap": false,
        "extractCss": true,
        "namedChunks": false,
        "aot": false,
        "extractLicenses": true,
        "vendorChunk": false,
        "buildOptimizer": false,
        "budgets": [
        {
            "type": "initial",
            "maximumWarning": "5mb",
            "maximumError": "10mb"
        }
        ]
    }
}

Angular默认打包到根目录下的dist目录下，生成的文件为纯静态文件（html, css, js)，以及图片文件。

2.2. 打包部署到二级目录

有不少情况，我们的angular web站点不能直接部署到网站的根目录下，需要部署到二级目录下。 比如，不能部署到 http://abc.com下，要求部署到 http://abc.com/demo 这个二级目录下。针对这种情况，就需要修改一下我们的编译参数，修改为：

ng build --prod --deploy-url /demo/ --base-href /demo/

增加 --deploy-url 和 --base-href。

使用场景：比如我们有多个站点，希望使用同一个反向代理， http://site1, http://site2, 分别映射到 http://abc.com/site1, http://abc.com/site2/。 那么为了方便配置，需要把site1， site2都部署到二级目录，如http://site1/site1, http://site2/site2。 然后 http://site1/site1代理到http://abc.com/site1, http://site2/site2代理到http://abc.com/site2/， 免得css、js因为目录级别问题找不到。

3. Angular站点的发布

Angular站点编译打包后，可以方便的发布到已有web服务器，或者打成docker image， 然后发布。

3.1. web服务器发布

因为我们打包后，生成的文件为纯静态文件（html, css, js, 图片等)， 所以打包后的问题，可以直接copy到iis， nginx , apache tomcat等web服务器，或者node.js， java等可以显示静态文件的程序的目录下即可。

3.2. 使用docker发布

如果部署到docker，我们可以基于一个基础的nginx docker， 然后把编译好的angular项目，copy到docker 内的nginx目录下即可。

基本步骤：

1. 准备Dockerfile 文件， docker可以基于nginx:alpine， 将编译好的angular 站点文件复制到 docker 的nginx默认目录 /usr/share/nginx/html

FROM nginx:alpine
COPY . /usr/share/nginx/html

说明： 1) 假设angular打包后的文件，与Dockerfile文件在同一个目录
2) COPY . /usr/share/nginx/html, 两个参数 . 代表当前路径， /usr/share/nginx/html是docker中的目标目录

2. 编译docker。 在Dockerfile目录下，执行

docker build -t your-docker-name .
docker save your-docker-name > your-docker-name.tar
gzip your-docker-name.tar

三条命令分别为：

• 生成docker image， 名字（name）为your-docker-name

• 导出docker image为本地文件， 文件名为 your-docker-name.tar

• 压缩docker image

可以看到，因为angular编译后为纯静态文件，所以使用docker发布非常简单。部署时，只需要复制docker文件到目标机器，解压缩，然后执行 docker load < your-docker-name.tar 即可加载docker image到目标机器。

4. 总结

1. 为生产环境编译，一定要加参数--prod

2. 如果要部署到二级目录，编译时加参数。如部署到/demo二级目录下，加参数： --deploy-url /demo/ --base-href /demo/

3. 使用docker发布,可以选择基本的nginx docker， 然后将编译好的angular文件copy到nginx目录下即可。

---------------- END ----------------

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

环境:

• Angular CLI: 11.0.6

• Angular: 11.0.7

• Node: 12.18.3

• npm : 6.14.6

• IDE: Visual Studio Code

1. 概要

实际的Angular项目，肯定不是一个简单的Hello World程序，会包含很多的功能，很多的文件。那么如何更好的组织这些文件呢？官方给了一个原则，可以供参考：
https://angular.io/guide/styleguide#application-structure-and-ngmodules。
下面，我们来通过一个例子具体解释一下。

2. 目录结构（工程结构）推荐

2.1. 总的原则

1. 基于Angular CLI创建模块（module），组件（component）等等的内容；

2. 源代码都放到src 文件夹下；

3. 应用的根目录创建一个 NgModule, 并命名为app.module.ts（例如 /src/app，这个Angular CLI 会自动帮我们做)

4. 组件具有多个伴生文件 (.ts、.html、.css 和 .spec)，建议为它创建一个文件夹;(Angular CLI 会自动帮我们做)

5. 为每一组功能（特性区）创建一个模块（NgModule）；（这个也方便我们应用惰性加载/延迟加载，预加载）

6. 在 src/app/shared 目录中创建名叫 SharedModule 的共享模块，方便其他功能调用；

2.2. 实例

src/ 目录下：
+---app
|   |   app-routing.module.ts
|   |   app.component.css
|   |   app.component.html
|   |   app.component.spec.ts
|   |   app.component.ts
|   |   app.module.ts
|   |   
|   +---feature1
|   |   |   ......
|   |           
|   +---feature1
|   |   |   ......
|   |           
|   +---core
|   |   |   core.module.ts
|   |   |   ....
|   |           
|   \---shared
|       |   shared.module.ts
|       |   
|       +---components
|       +---pipes
|       +---services
|               
+---assets
|       .gitkeep
|       
\---environments
        environment.prod.ts
        environment.ts

说明：

1. 根目录下的NgModule 默认是 app.module.ts, 不要改名，方便阅读

2. app 下，每个目录，同时也都是一个模块-NgModule

3. 一个项目，一般包含多个功能（feature）模块

4. 推荐使用共享模块-SharedModule，将通用的、功能的功能（service/component/pipe等）放到改模块中。 （下文详细介绍）

5. 推荐使用核心模块-CoreModule，可以将项目的一些全局的设置、UI等放到该模块。如header、footer组件，安全组件（服务），上下文存储服务等。

2.3. 共享模块-SharedModule

上文提到，推荐使用共享模块-SharedModule，将通用的、功能的功能（service/component/pipe等）放到改模块中。具体存放内容包括：

1. 共享模块中声明那些可能被特性模块引用的可复用组件(Component)、指令(Directive)和管道(Pipe)。

2. 如果放置服务（Service），由于服务的单例特性，共享模块中只建议放置无状态的服务（Service），对于有状态、或者和业务紧密相关的服务，建议放到CoreModule中。

3. SharedModule 中声明(declarations)和导出(exports)所有组件、指令和管道，方便其他模块调用

4. 共享模块（SharedModule）在项目中处于底层，从逻辑上，只能由其他业务逻辑模块调用，不能调用其他模块；

5. 共享模块（SharedModule）不建议使用延迟加载（惰性加载），因为这样会破坏服务的单例特性；

3. 高级应用 - angular库、工作空间（workspace ）

想一想你是如何安装angular相关的类库的？我们使用的是npm install xxx。那么这些第三方angular库是如何开发的呢？我们是否可以把通用的内容写成Angular类库，然后方便在多个angular项目间共享了？又或者直接发布到官方npm站点？

Angular 从6.0开始，引入了工作区的概念。使用Angular CLI，默认创建的就是一个工作空间(workspace)。一个工作空间(workspace)可以有一个主项目，同时可以有多个子项目。当然这些子项目可以是angular的application， 也可以是Library。Angular的子项目，都在app下的projects 之下，和src目录平级。

这样，一般来说，我们的项目中，除了主程序，还可以包含多个子类库。这样在开发时方便主程序、类库同时开发调试；也可以项目结束后，单独发布类库，实现项目之间的代码共享。

创建子项目也很简单，子项目有2种类型，application（可以启动的）和Library（Angular类库），默认都在projects文件夹下：

1. 创建子Applicaton

ng generate application <name> [options]

2. 创建子类库（Angular Library)

ng generate library <name> [options]

3.1. 目录结构示意

+---projects
|   \---ng-lib-a
|       \---src
|           \---lib
|   \---ng-lib-b
|       \---src
|           \---lib
\---src
    +---app
    |   +---feature1
    |   +---feature2
    |   +---core
    |   |   +---footer
    |   |   \---header
    |   \---shared
    |       +---components
    |       +---pipes
    |       \---services
    +---assets
    \---environments

4. 总结

1. Angular CLI默认创建的Angular项目，实际是一个工作空间（workspace ），在其内部还可以创建多个子项目

2. 子项目可以是Application，也可以是类库（Library）；

3. 对于主项目（一般来说是一个Application），以功能模块的方式进行组织；

4. 公共内容，建议放到共享模块-SharedModule中。

5. 对于功能模块，可以通过惰性加载（延迟）加载，提高首页加载速度；同时通过预加载技术，可以在空闲时间加载这部分模块，使用户体验更好。

---------------- END ----------------

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