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 就会使用默认浏览器打开。↓

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190113G0Q8OA00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动