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

前言：

　　最近一直在使用阿里的NG-ZORRO（Angular组件库）开发公司后端的管理系统，写了一段时间的Angular之后发现对于咱们.NET后端开发而言真是很是的友善。所以这篇文章主要是对这段时间使用Angular作一些小总结，但愿能够帮到有须要的同窗。

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

TypeScript基本常识：

https://www.tslang.cn/docs/home.html

Angular中文文档：

https://angular.cn/docs

GitHub地址：

https://github.com/angular/angular

Angular CLI命令参考手册：

https://angular.cn/cli

Angular中的生命周期函数：

什么是生命周期函数？

通俗的来讲，声明周期函数就是组件建立，组件更新，组件销毁是会触发的一系列方法。

生命周期钩子： https://angular.cn/guide/lifecycle-hooks

当 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/

详细安装图解: https://www.runoob.com/nodejs/nodejs-install-setup.html

安装成功后查看node版本：

node --version
node -v

切换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安装源切换成淘宝镜像，以下使用国外镜像安装由于网络缘由报错：

安装完成：

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

Angular项目建立并运行：

经过Angular脚手架建立一个新的项目：

在终端(win+r 输入cmd)中打开E:\Angular 文件目录，输入一下命令新建项目：

ng new MyAngularProject(项目名称)

直接经过命名运行脚手架搭建的项目：

ng serve --open

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

好了你的第一个Angular项目运行成功: