Angular5 笔记

总结一下 Angular5 的笔记。

Angular 官方地址：https://angular.io/（全英文）

英文不好的朋友可以访问中文版：https://www.angular.cn/

Angular 官方网站源代码：https://github.com/angular/angular

一般框架也好，插件也好，使用之前看官方文档才是正道。一般官方文档是最详细的，也是更新最及时的。

准备：使用 Angular 之前我们要安装一下 Angular-cli 方便运行一些命令，安装这个脚手架又要使用 npm，所以就要先安装 Node，打开 Node.js 官网：https://nodejs.org/en/ 下载 LTS 版本即可。然后双击安装，一直下一步就可以了。安装完成之后可以测试一下是否安装成功：打开 cmd，输入 node -v 和 npm -v。↓

显示了版本号，就证明安装成功了，接下来可以安装 Angular-cli 了。

使用 npm install -g @angular/cli 来安装，-g 代表全局安装，会添加到系统环境变量里面。

1.安装好之后打开文件资源管理器，新建或者打开一个文件夹，用来存储新建的 Angular 项目。↓

2.然后在地址栏直接输入 cmd，然后回车，就可以在当前位置打开 cmd 窗口。↓

回车之后：↓

3.然后我们来新建一个 Angular 项目，输入 ng new 项目名字，例如： ng new test-pro，然后回车，Angular-cli 会自动帮助我们新建一个项目。↓

创建完毕。↓

4.接下来使用 VSCode 打开项目。直接在这个界面使用鼠标把你要打开的文件夹拖进来即可。↓

5.打开文件夹之后，先运行一下看看效果。在 VSCode 里面按 Ctrl + ~ 打开终端，输入 ng serve 如果不加 -p 就是默认 4200 端口，想改成其他的端口，就需要使用 -p + 端口号。例如：ng serve -p 1779。↓

然后回车等待 build 成功即可。↓

这时候打开浏览器，输入：http://localhost:1779/ 回车即可。↓

6.我们回到 VSCode 去看看源代码。先打开 index.html ↓

这个文件是最先被加载的，如果觉得两个空格缩进不太好看，可以打开 .editorconfig 这个文件，把 indent_size = 2 改成 indent_size = 4 即可。

这个 index.html 文件是一个标准的 html 文件，有「文档头声明」，有 head、meta、title...... 等标签。这里面最重要是是 body 里面的 app-root 标签，这个标签会去加载我们写的 app.component.html，然后放到这里来显示。

7.打开 app.component.css、app.component.html 和 app.component.ts。↓

这个 css 文件是 app component 的样式文件，所有的样式定义都可以卸载这里面。↓

这个 html 文件是 app component 的 html 元素，会被加载到 index.html 的 app-root 这个标签里面，展示在页面上。↓

这个 ts 文件是 app component 所有的逻辑代码，变量，方法等，都在这里面定义。↓

8.使用 Angular 的一个好处就是，它是实时加载的，你在编辑器里面改了代码，只需要 Ctrl + S 保存一下，它就会自动 serve 起来，然后浏览器页面也会自动刷新。

9.这个 app component 是默认的一个根 component，我们可以新建其他的 component 然后通过路由来控制什么时候加载哪一个 component，这样就是所有的代码都在一个页面里面，只不过是控制什么时候显示什么时候不显示，这叫 SPA（Single Page Application）。

这里由于新建的时候没有加上 --routing 参数，所以没有自耦定生成路由，可以手动创建。不过建议创建的时候加上 --routing，就是创建的命令为：ng new test-pro --routing

这个文件就是 app routing，里面可以配置什么样的路由导航到哪个 component 上面去。

10.我们在 app 文件夹下面新建一个 test componet，在 cmd 终端里面使用 cd 命令切换到 app 文件夹，或者在资源管理器打开 app 文件夹然后输入 cmd 来切换。然后输入 ng g componet 名字 -m 要添加的 module。componet 可以缩写为 c，module 是模块，如果不加 -m 就会默认添加到 app.module。每一个模块由很多的 component （组件）组成。比如我们创建一个 test component：↓

所有的文件，和修改后的 app module：↓

11.我们先把路由定义一下，打开 app-routing-module.ts，修改 routes 这个数组，默认是空的，我们改成 包含 test component 的。↓

然后打开 app.component.html 我们可以看到 angular-cli 已经默认添加了 router-outlet 这个标签，这个标签的作用是在你切换路由的时候把根据路由拿到的 component 加载到这个标签的下面。↓

这时候准备工作已经做完了，我们就可以写一个 a 标签来进行路由的跳转了。这个标签写到哪里都行，就写到 app.component.html 里面吧。使用 routerLink 来控制路由跳转，它的值是一个数组，第一个是要跳转的链接，后面用逗号分隔，可以传多个参数。↓

OK，写完啦，进浏览器看下效果。↓

可以看到一个 a 标签在这等待点击了，点一下它。可以看到浏览器地址栏已经自动拼接了 test，然后我们新建的 test component 里面的 test works （创建 component 的默认字符）也显示了。↓

12.假设我们这个项目已经做完了，要发布了，那肯定不能使用 ng serve 这样去运行了，需要打包。打包命令：ng build --prod --aot --bh 路径。

--prod 是打包成生产版本，压缩并且丑化代码，让代码不可读。

--aot 使用预编译。

--bh 是给 base 标签添加 href 属性，这个不加的话就会导致打包后的页面空白。因为 Angular 打包之后的 index.html 默认是找当前位置根目录下的，加上这个 --bh 才会去找你添加的目录。比如你打包时候加上

--bh /test/ 那么你把打包之后的所有文件放到 test 目录下面，发给任何人，只要他把这个 test 目录放到 C盘，D盘...... 的根目录下面，就可以直接访问了。

build一下：↓

然后打开 test-pro/dist，可以看到所有打包后的文件。然后再新建一个 test 文件夹，把 dist 里面的所有文件复制到 test 文件夹里面去。↓

然后双击 test 文件夹下面的 index.html 就会使用默认浏览器打开。↓