【1】Angular（简称ng）起步

一、Angular 是什么？

image.png

Angular（读音['æŋgjʊlə]）是一套用于构建用户界面的 JavaScript 框架。由 Google 开发和维护，主要被用来开发单页面应用程序。

• 类似于 Vue.js
  • MVVM（数据驱动视图思想）
  • 组件化
  • 模块化
  • 指令
  • ......
• 由 Google 开发和维护
• 开发单页面应用程序（SPA）

特性

• MVVM
• 组件化
• 模块化
• 指令
• 服务
• 依赖注入
• TypeScript
• ...

发展历史

起源

2009年，Misko hevery 和 Adam abrons 在业余时间打造了 GetAngular

Misko hevery	Adam abrons

Misko Hevery 接手了 Google 内部的一个项目 Feedback ，该项目经过6个月的迭代代码量已经达到了17000行。项目的开发和维护已经变得非常的困难。所以Misko 就决定用 GetAngular 重写这个项目。

结果就是小伙子成功了，使用 GetAngular 之后该项目从17000行缩减到了1500行，前后仅仅使用了三周时间。

image.png

Misko 领导一看，小伙子厉害啊，同时也看到了 GetAngular 所带来的商业价值，所以决定把 GetAngular 正式立项，组织专职团队开发和维护。

Abrons 后来离开了这个计划，但在 Google 工作的 Hevery 和一些谷歌员工如 Igor Minár 和 Vojta Jína 等则继续开发维护此库。

由于已不再是个人项目，所以开发团队将 GetAngular 重新命名为了 AngularJS 。

image.png

至此，AngularJS 就进入了漫长的发展迭代阶段。

• 经过了3年的发展，AngularJS 在2012年6月份，1.0.0 版本正式推出。
• AngularJS 在1.2之后的版本不再支持 IE 6和7
• AngularJS 在 1.3 之后不再支持 IE8
• AngularJS 在 1.5 增加了类似组件化的开发方式
  • 为过渡到 Angular2 做铺垫
• AngularJS 1.x.x 当前已发布到了 1.6.x

困境

• 饱受诟病的性能问题
  • 脏检查
• 落后于当前 Web 发展理念
  • 例如组件化
  • 模块化支持不好
• 对移动端支持不够友好

Angular 2 横空出世

Angular 1.x 由于问题太多，历史包袱太重，重构几乎不可能。

不过早在2014年3月，官方博客就有提及开发新版本 Angular 的计划。

2014年9月下旬一个大会上，Angular2 正式亮相。

2016年9月15号，Angular2 正式发布。

由于 ng2 几乎完全重写了 ng1 ，所以官方把2之后的版本都称之为 Angular。

image.png

Angular 2 之后的正式 Logo：

image.png

新版本发布了，那用户如何从 1 升级到 2 呢？

image.png

那到底要不要更新呢？

image.png

ng2 相比 ng1

• 移除了 controller+$scope 的设计方式，改用了当前主流的组件化构建
• 相比 ng1 性能更好
• 优先为移动端设计
• 更贴合未来标准
  • EcmaScript 6
  • Web Component
• TypeScript
• 反正就是更现代化，更好了......

现状

• 自 Angular 2 之后，官方承诺之后的版本都会兼容到 Angular 2
• 当前 Angular 最新发布版为 5.x.x
• 新版的 Angular 在 Github 上也已收获了 3万+ ☆
• 使用量低于 React 和 Vue

那我为什么要学习使用 Angular ？

任何一种技术或者框架，一定要有自己的特色，如果跟别人的完全一样，解决的问题也和别人一样，那存在的意义和价值就会遭到质疑。

• 企业需求
• 增加职业竞争力
• 技术的本质思想都是一样的，也许你在其它技术中无法理解的事物，在这门课程中你能找到答案。

这里我们要明白技术只是工具，主要目的还是用来帮助我们解决业务问题。
作为开发人员，我们对待技术的态度应该博学开放，多学习和了解不同技术。
只有当你见得东西多了才能有自己的想法，才不会人云亦云，不至于迷失在技术更新迭代的浪潮之中！

学习 Angular 的一些建议

image.png

• 读官方文档
• 写 demo 测试
• 写小项目练手
• 参与实际项目开发经验
• 日积月累......

这是一个知识开放的时代，我们每个人都拥有一本《九阴真经》，至于你如何利用它产生价值则需要一些方式。我们学习技术就像武侠练功一样，希望大家像郭靖一样拥有坚韧不拔的精神，锲而不舍的探索下去，终成一代大侠。

[图片上传失败...(image-659d53-1599489076676)]

在金庸武侠中，男主角练就上层武功的方法有很多，有意外服用了灵丹妙药的，有机缘巧合得到前辈几十年功力的，有被别人打通任督二脉的，还有武功为什么厉害没有原因的（小说开始就设定东邪、西毒、南帝、北丐、中神通武功厉害，没有为什么），但是郭靖，却是靠自己的努力一步步争取到的。在郭靖成功的每一步上，都有他付出的无数汗水。

郭靖资质愚钝，学习武功，靠的是坚韧不拔；结交朋友，靠的是坦诚相待；树立威望，靠的是侠肝义胆。所以我想，《武穆遗书》和《九阴真经》也只有到了诚朴质实的人手里，才能有号令天下的作用。金毛狮王有屠龙刀，灭绝师太有倚天剑，周芷若两者皆有，但是他们的江湖地位却没有因此提高，也没有人听从他们的号召；只有侠之大者，为国为民的郭靖，能够一统江湖纷争，力挫异族入侵中华的企图。

相关链接

• 维基百科 - Angular
• AngularJS 1.x.x 官网
• Angular 官网
• Angular Github
• Angular 官方文档
• Angular 官方教程
• Angular APi文档

二、开发环境搭建

内容纲要

• 安装 Angular CLI 开发工具
• 使用 Angular CLI 初始化 Angular 项目
• 简单体验 Angular

[站外图片上传中...(image-afbe56-1599489076676)]

目前，无论你使用什么前端框架，都必然要使用到各种 NodeJS 工具，Angular 也不例外。与其它框架不同，Angular 从一开始就走的“全家桶”式的设计思路，因此 @angular/cli 这款工具里面集成了日常开发需要使用的所有 Node 模块，使用 @angular/cli 可以大幅度降低搭建开发环境的难度。

Angular CLI 类似于 Vue CLI，是 Angular 官方开发的一个脚手架工具，专门用来开发构建 Angular 应用程序。

• Angular 应用程序初始化
• 内置开发服务器
• 代码变更浏览器自动刷新
• 创建组件、指令、服务等集成工具
• 测试和维护
• ......

Step 1. 安装依赖环境

• Node 6.9.0 or higher
• NPM 3 or higher
• Python
• C++ 编译工具

1>安装 Node.js

• 下载地址：https://nodejs.org/en/download/
• 安装
• 确认 Node.js 环境

2>安装 npm

• npm 会随着 Node 的安装被一起安装
• 确认 npm 环境

3>安装 Python

• 下载地址：https://www.python.org/downloads/release/python-2714/
• Windows 32 位：https://www.python.org/ftp/python/2.7.14/python-2.7.14.msi
• Windows 64位：https://www.python.org/ftp/python/2.7.14/python-2.7.14.amd64.msi
• 确认 Python 环境

4>安装 C++ 编译工具

Angular CLi 在 Windows 上同时依赖 C++ 编译工具，所以我们这里也需要单独安装。

当然如果你的机器安装了 Visual Studio（注意，不是 Visual Studio Code）

执行下面的命名安装 C++ 编译工具：

npm install --global --production windows-build-tools

注意： Windows Vista / 7 依赖 .NET Framework 4.5.1

[站外图片上传中...(image-d6ca8c-1599489076676)]

5>安装 cnpm

npm i -g cnpm --registry=https://registry.npm.taobao.org

Step 2 . 安装脚手架工具 Angular CLI

Angular CLI 是 Angular 官方开发的一个类似于 Vue CLI 的脚手架开发工具，它帮我们集成了 webpack 打包、开发服务器、单元测试、自动编译、部署等功能特性。

使用它的第一步就是先安装：

cnpm i -g @angular/cli

安装结束之后我们可以通过在命令行输入以下命令测试是否安装成功：

ng --version

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.6.3
Node: 8.9.4
OS: win32 x64
Angular:
...

安装失败解决方案

• 在 Windows 平台上安装 @angular/cli 会报很多 error，那是因为 @angular/cli 在 Windows 平台上面依赖 Python 和 Visual Studio 环境，而很多开发者的机器上并没有安装这些东西
• 以及 node-sass 模块被墙的问题，强烈推荐使用 cnpm 进行安装，可以非常有效地避免撞墙

npm i -g cnpm --registry=https://registry.npm.taobao.org

cnpm i -g @angular/cli

• 如果安装失败，请手动把全局的 @angular/cli 删掉： cnpm uninstall -g @angular/cli
• 如果 node_modules 删不掉，爆出路径过长之类的错误，请尝试用一些文件粉碎机之类的工具强行删除。
• 无论你用什么开发环境，安装的过程中请仔细看错误日志。很多同学没有看错误日志的习惯，报错的时候直接懵掉，根本不知道发生了什么。

使用帮助

ng help

Setp 3. 使用脚手架工具初始化项目

ng new <项目名称>

Angular CLI 将会自动帮你把目录结构创建好，并且会自动生成一些目录文件

请特别注意：Angular CLI 在自动生成好项目骨架之后，会立即自动使用 npm 来安装所依赖的 Node 模块，所以这里你懂的，一道墙又会阻止我们通往自由的道路，所以这里如果初始化很慢或者失败，请自己手动 Ctrl + C 终止掉，然后进入初始化好的项目根目录使用 cnpm 来安装。

Setp 4 . 启动开发服务

ng serve

ng serve 默认占用 4200 端口号，可以通过下面选项配置：

ng serve --port 4201

一些常见的坑

@angular/cli 这种“全家桶”式的设计带来了很大的方便，同时也有一些人不太喜欢，因为很多底层的东西被屏蔽掉了，开发者不能天马行空地自由发挥。比如：@angular/cli 把底层 webpack 的配置文件屏蔽掉了，很多喜欢自己手动配 webpack 的开发者就感到很不爽。

对于国内的开发者来说，上面这些其实不是最重要的，国内开发者碰到的坑主要是由两点引起的：

1. 第一点是网络问题：比如 node-sass 这个模块你很有可能就装不上，原因你懂的。
2. 第二点是开发环境导致的问题：国内使用 Windows 平台的开发者比例依然巨大，而 @angular/cli 在 Windows 平台上有一些非常恶心的依赖，比如它需要依赖 python 环境、Visual Studio 环境。

所以，如果你的开发平台是 Windows，请特别注意：

1. 如果你知道如何给 npm 配置代理，也知道如何翻墙，请首选 npm 来安装 @angular/cli。
2. 否则，请使用 cnpm 来安装 @angular/cli，原因有三：1、cnpm 的缓存服务器在国内，你装东西的速度会快很多；2、用 cnpm 可以帮你避开某些模块装不上的问题，因为它在服务器上面做了缓存；3、cnpm 还把一些包都预编译好了缓存在服务端，不需要把源码下载到你本地去编译，所以你的机器上可以没有那一大堆麻烦的环境。
3. 如果安装失败，请手动把 node_modules 目录删掉重试一遍，全局的 @angular/cli 也需要删掉重装，cnpm uninstall -g @angular/cli。
4. 如果 node_modules 删不掉，爆出路径过长之类的错误，请尝试用一些文件粉碎机之类的工具强行删除。
5. 无论你用什么开发环境，安装的过程中请仔细看 log。很多朋友没有看 log 的习惯，报错的时候直接懵掉，根本不知道发生了什么。

关于编辑器的选择

如你所知，一直以来，前端开发领域并没有一款特别好用的开发和调试工具。

• WebStorm 很强大，但是吃资源很严重。
• Sublime Text 插件很多，可惜要收费，而国内的企业还没有养成花钱购买开发工具的习惯。
• Chrome 的开发者工具很好用，但是要直接调试 TypeScript 很麻烦。

所以，Visual Studio Code（简称 VS Code）才会呈现出爆炸性增长的趋势。它是微软开发的一款编辑器，完全开源免费。VS Code 底层是 Electron，界面本身是用 TypeScript 开发的。对于 Angular 开发者来说，当然要强烈推荐 VS Code。最值得一提的是，从1.14开始，可以直接在 VS Code 里面调试 TypeScript 代码。

插件推荐：

谷歌浏览器开发插件, augury
vscode 插件， Angular Snippets (Version 9)

三、简单介绍

创建组件，指令，过滤器和服务

ng g c components/child
// ng generate component 组件名
angular创建一个组件
ng g s service/search
创建一个服务名字为search放入到service文件夹

• 创建组件别名
  ng g component new-cmp
  ng g component ../newer-cmp
  ng g component feature/new-cmp
  //将会生成到 src/app/feature/new-cmp

angular-cli 将会自动关联 components, directives and pipes 到 app.module.ts.

# 创建组件
ng generate component my-new-component

# 创建组件别名
ng g component my-new-component # using the alias

# components support relative path generation
# if in the directory src/app/feature/ and you run
ng g component new-cmp
# your component will be generated in src/app/feature/new-cmp
# but if you were to run
ng g component ../newer-cmp
# your component will be generated in src/app/newer-cmp
# if in the directory src/app you can also run
ng g component feature/new-cmp
# and your component will be generated in src/app/feature/new-cmp

可辅助创建资源的功能列表：

Scaffold	Usage
Component	ng g component my-new-component
Directive	ng g directive my-new-directive
Pipe	ng g pipe my-new-pipe
Service	ng g service my-new-service
Class	ng g class my-new-class
Guard	ng g guard my-new-guard
Interface	ng g interface my-new-interface
Enum	ng g enum my-new-enum
Module	ng g module my-module

angular-cli will add reference to components, directives and pipes automatically in the app.module.ts. If you need to add this references to another custom module, follow this steps:

1. ng g module new-module to create a new module
2. call ng g component new-module/new-component

This should add the new component, directive or pipe reference to the new-module you've created.

切换包管理器

# 默认为 npm
ng set --global packageManager=npm

# 将包管理器设置为 yarn
ng set --global packageManager=yarn

# 将包管理器设置为 cnpm
ng set --global packageManager=cnpm

一个angualr项目的启动过程

image.png

目录结构

  ├── e2e 端到端测试（暂且不关心）
  ├── node_modules npm安装的第三方包
  ├── src 存放业务源码
  ├── .angular-cli.json AngularCLI脚手架工具配置文件
  ├── .editorconfig 针对编辑器的代码风格约束
  ├── .gitignore Git仓库忽略配置项
  ├── karma.conf.js 测试配置文件（给karma用的，暂且不用关心）
  ├── package.json 项目包说明文件
  ├── protractor.conf.js 端到端测试配置文件（暂且不用关心）
  ├── README.md 项目说明文件
  ├── tsconfig.json TypeScript配置文件
  └── tslint.json TypeScript代码风格校验工具配置文件（类似于 eslint）

npm scripts 介绍

...
  "scripts": {
      "ng": "ng", 运行查看 Angular CLI 脚手架工具使用帮助
      "start": "ng serve", 运行开发模式
      "build": "ng build --prod", 运行项目打包构建（用于发布到生成环境）
      "test": "ng test", 运行karma单元测试
      "lint": "ng lint", 运行TypeScript代码校验
      "e2e": "ng e2e" 运行protractor端到端测试
    },
  ...

.angular-cli.json 文件

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "project": {
      "name": "my-app"
    },
    "apps": [
      {
        "root": "src", 源码根目录
        "outDir": "dist", 打包编译结果目录
        "assets": [ 存放静态资源目录
          "assets",
          "favicon.ico"
        ],
        "index": "index.html", 单页面
        "main": "main.ts", 模块启动入口
        "polyfills": "polyfills.ts", 用以兼容低版本浏览器不支持的 JavaScript 语法特性
        "test": "test.ts", 测试脚本
        "tsconfig": "tsconfig.app.json",
        "testTsconfig": "tsconfig.spec.json",
        "prefix": "app", 使用脚手架工具创建组件的自动命名前缀
        "styles": [ 全局样式文件
          "styles.css"
        ],
        "scripts": [], 全局脚本文件
        "environmentSource": "environments/environment.ts",
        "environments": {
          "dev": "environments/environment.ts",
          "prod": "environments/environment.prod.ts"
        }
      }
    ],
    "e2e": { 端到端测试相关配置
      "protractor": {
        "config": "./protractor.conf.js"
      }
    },
    "lint": [ TypeScript代码风格校验相关配置
      {
        "project": "src/tsconfig.app.json",
        "exclude": "**/node_modules/**"
      },
      {
        "project": "src/tsconfig.spec.json",
        "exclude": "**/node_modules/**"
      },
      {
        "project": "e2e/tsconfig.e2e.json",
        "exclude": "**/node_modules/**"
      }
    ],
    "test": { karma单元测试相关配置
      "karma": {
        "config": "./karma.conf.js"
      }
    },
    "defaults": { 默认后缀名
      "styleExt": "css",
      "component": {}
    }
  }

main.js

• 描述：模块化启动入口
• 职责：加载启动根模块

AppModule

• 描述：项目根模块
• 职责：把组件、服务、路由、指令等组织到一起，设置启动组件为根组件

AppComponent

• 描述：项目根组件
• 职责：替换掉 index.html 文件中的 节点

其它资源

• 资源

• 指令

• 路由

• 服务

• ……

• 目录结构

• npm scripts 介绍

• .angular-cli.json 文件

• main.js

• AppModule

• AppComponent

• 其它资源

在脚手架项目中使用 SASS 预处理器

SASS 是一款非常好用的 CSS 预编译器，Bootstrap 官方从4.0开始已经切换到了 SASS。

如果想要在脚手架项目中使用 SASS 预处理器，我们需要自己手动修改一些配置文件，请按照以下步骤依次修改：

• angular-cli.json 里面的 styles.css 后缀改成 .scss

11.png

当你后面再使用 ng g c *** 自动创建组件的时候，默认就会生成 .scss 后缀的样式文件了。

• angular-cli.json 里面的 styleExt 改成 .scss

22.png

• src 下面 styles.css 改成 styles.scss

33.png

• app.component.scss

44.png

• app.component.ts 里面对应修改

55.png

改完之后，重新 ng serve，打开浏览器查看效果。

SASS 的 API 请参考官方网站 。

SASS 只是一个预编译器，它支持所有 CSS 原生语法。利用 SASS 可以提升你的 CSS 编码效率，增强 CSS 代码的可维护性，但是千万不要幻想从此就可以不用学习 CSS 基础知识了。

更新 Angular CLI

其它

切换包管理器

# 默认为 npm 
ng set --global packageManager=npm
# 将包管理器设置为 yarn
ng set --global packageManager=yarn
# 将包管理器设置为 cnpm
ng set --global packageManager=cnpm

详细参考文档

https://github.com/angular/angular-cli/wiki