13

Angular入门，开发环境搭建，使用Angular CLI创建你的第一个Angular项目

 4 years ago
source link: https://www.cnblogs.com/Can-daydayup/p/14166192.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Angular入门，开发环境搭建，使用Angular CLI创建你的第一个Angular项目

文章正文：

　　最近一直在使用阿里的NG-ZORRO（Angular组件库）开发公司后端的管理系统，写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善。因此这篇文章主要是对这段时间使用Angular做一些小总结，希望可以帮到有需要的同学。

Angular学习前必备基础知识点：

Angular中的生命周期函数：

什么是生命周期函数？
通俗的来说，声明周期函数就是组件创建，组件更新，组件销毁是会触发的一系列方法。
当 Angular 使用构造函数新建一个组件或指令后，就会按下面的顺序在特定时刻调用这些生命周期钩子方法：

注意：constructor 构造函数（依赖注入，起到对应局部变量值初始化作用）： 除了使用简单的值对局部变量进行初始化之外，什么都不应该做！！

用途及时机
ngOnChanges()
当 Angular（重新）设置数据绑定输入属性时响应。 该方法接受当前和上一属性值的 SimpleChanges 对象
在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。
ngOnInit()
在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。
在第一轮 ngOnChanges() 完成之后调用，只调用一次。[请求数据时使用]
ngDoCheck()
检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应。
在每个变更检测周期中，紧跟在 ngOnChanges() 和 ngOnInit() 后面调用。
ngAfterContentInit()
当 Angular 把外部内容投影进组件/指令的视图之后调用。
第一次 ngDoCheck() 之后调用，只调用一次。
ngAfterContentChecked()
每当 Angular 完成被投影组件内容的变更检测之后调用。
ngAfterContentInit() 和每次 ngDoCheck() 之后调用
ngAfterViewInit()
当 Angular 初始化完组件视图及其子视图之后调用。
第一次 ngAfterContentChecked() 之后调用，只调用一次。
ngAfterViewChecked()
每当 Angular 做完组件视图和子视图的变更检测之后调用。
ngAfterViewInit() 和每次 ngAfterContentChecked() 之后调用。
ngOnDestroy()
每当 Angular 每次销毁指令/组件之前调用并清扫。 在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏。
在 Angular 销毁指令/组件之前调用。

Node.js(携带NPM包管理工具)安装配置：

安装Nodejs，NodeJS 是必须的：

可在如下地址获得 NodeJS 的安装包：https://nodejs.org/en/
安装成功后查看node版本：
node --version
node -v
1336199-20201221014642033-854829177.png

切换npm安装镜像源，解决npm install缓慢问题：

NodeJS 安装 好之后，NPM 也就可以用了（NPM是随同NodeJS一起安装的包管理工具）。但 NPM 的默认安装源在国外，通常会比较慢或者是直接因为网络原因安装失败，因此需要把 NPM 的安装源设置到国内镜像源，淘宝镜像（http://npm.taobao.org/）是个不错的选择，执行如下命令设置将淘宝镜像设置为NPM的安装源：

临时切换使用：

npm --registry https://registry.npm.taobao.org install express

持久使用（推荐）：

npm config set registry https://registry.npm.taobao.org
# 恢复
npm config delete registry

配置后验证是否成功：

npm config get registry
或者
npm info express

安装Angular相关开发环境：

Angular-CLI构建工具(脚手架工具)安装说明：

Angular-CLI详细简介：https://www.jianshu.com/p/3d17d5ee1951

全局安装脚手架工具：

安装命令（只需要安装一次）
npm install -g @angular/cli
或者
cnpm install -g @angular/cli   --推荐使用速度较快
安装前最好是先NPM安装源切换成淘宝镜像，如下使用国外镜像安装因为网络原因报错：
1336199-20201221015727724-328353729.png
安装完成：
1336199-20201221015845511-1347353713.png

验证Angular环境是否安装成功：

1336199-20201221015931055-1659145556.png

Angular项目创建并运行：

通过Angular脚手架创建一个新的项目：

在终端(win+r 输入cmd)中打开E:\Angular 文件目录，输入一下命令新建项目：
ng new MyAngularProject(项目名称)
1336199-20201221100713642-1121392350.png
直接通过命名运行脚手架搭建的项目：
ng serve --open

ng serve 命令会启动开发服务器、监视文件，并在这些文件发生更改时重建应用。
--open（或者只用 -o 缩写）选项会自动打开你的浏览器，并访问 http://localhost:4200/。

1336199-20201221100844533-609533450.png
好了你的第一个Angular项目运行成功:
1336199-20201221100911066-1210095490.png

作者：追逐时光者

作者简介：一个热爱编程，善于分享，喜欢学习、探索、尝试新事物，新技术的程序猿。

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。如果觉得时光这篇文章有帮助的话，可以点一下右下角的【♥推荐♥】，希望能够持续的为大家带来好的技术文章，文中可能存在描述不正确或错误的地方，欢迎指正、补充，不胜感激 ！

#1楼

2020-12-21 10:40

贵哥哥的小迷弟

关注作者很久了，每篇文章写的很不错了，非常通俗易懂。爱了爱了

#2楼

2020-12-21 10:42

daydayups

学习了，最近公司也在选型前端框架，不知道是选vue，react还是angular，还请指教

#3楼

2020-12-21 11:36

zzzkkkxxx

步骤清晰，很细，针不错。

#4楼

2020-12-21 11:39

huihui狒狒

#5楼

[楼主] 2020-12-21 11:47

追逐时光者

@daydayups
这个是要看公司去的，假如公司内部已经有成熟的前端框架解决方案，咱们就没有必要花时间去踩坑了。假如说还没有的话假如是中小型前端项目我还是首先推荐Vue，毕竟Vue使用人数公司最多，并且Vue3.0在性能上做了很大的优化。假如是大型一些的项目推荐使用React，最后才推荐Angualr，因为Angular在国内使用的相对较少，并且相关案例教程也少，开发成本高。

#7楼

2020-12-21 11:53

橘橘橘橘橘子

不愧是大佬 逻辑思维能力杠杠的 会努力学习的


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK