ng-起步

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

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

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

Step 0. 安装依赖环境

安装 Node.js

• 下载地址
• 安装
• 确认 Node.js 环境

安装 npm

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

安装 Python

• 下载地址
• Windows 32 位
• Windows 64位
• 确认 Python 环境

安装 C++ 编译工具

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

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

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

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

安装 cnpm

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

Step1. 安装脚手架工具 Angular CLI

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

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

cnpm i -g @angular/cli

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

ng --version

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

Angular CLI: 8.3.23
Node: 12.10.0
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.803.23
@angular-devkit/core         8.3.23
@angular-devkit/schematics   8.3.23
@schematics/angular          8.3.23
@schematics/update           0.803.23
rxjs                         6.4.0

安装失败解决方案

• 在 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 删不掉，爆出路径过长之类的错误，请尝试用一些文件粉碎机之类的工具强行删除。
• 无论你用什么开发环境，安装的过程中请仔细看错误日志。很多人没有看错误日志的习惯，报错的时候直接懵掉，根本不知道发生了什么。

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

ng new my-app

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

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

Step 3. Serve the application

使用脚手架工具初始化项目完成之后，我们就可以启动开发模式了：

# 或者 npm start
ng serve

注意：

1. 在项目根目录下执行
2. 看好是 serve 不是 server
3. 该命令默认会开启一个服务占用 4200 端口，如果想要修改可以通过 --port 参数来指定，例如 ng serve --port 3000

接下来我们打开浏览器，访问：http://localhost:4200/ 。成功即可在浏览器中看到如下页面：

Step 4. 体验一下 Angular

找到 ./src/app/app.component.ts 文件，将 AppComponent 组件类中的 title 修改如下（记得保存哦）：

export class AppComponent {
  title = '你的第一个 Angular 应用';
}

你会发现浏览器随之刷新

标题样式太丑了，来让我们打开 src/app/app.component.css 文件并写入以下内容：

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

浏览器随之刷新

是不是很酷！