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

夏有南风 發表於 2020-12-21 10:30:00

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

<h2>前言：</h2>
<p>　　最近一直在使用阿里的NG-ZORRO（Angular组件库）开发公司后端的管理系统，写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善。因此这篇文章主要是对这段时间使用Angular做一些小总结，希望可以帮到有需要的同学。</p>
<h2 id="4843-1592582705885">Angular学习前必备基础知识点：</h2>
<div>
<h3 id="3831-1592582706261">TypeScript基本常识：</h3>
<blockquote>
<div>https://www.tslang.cn/docs/home.html</div>
</blockquote>
<h3 id="8765-1592585971845">Angular中文文档：</h3>
<blockquote>
<div>https://angular.cn/docs</div>
</blockquote>
<h3 id="7240-1592586023977">GitHub地址：</h3>
<blockquote>
<div>https://github.com/angular/angular</div>
</blockquote>
<h3 id="3032-1592586763679">Angular CLI命令参考手册：</h3>
<blockquote>
<div>https://angular.cn/cli</div>
</blockquote>
</div>
<p></p>
<h3 id="6935-1592586472981">Angular中的生命周期函数：</h3>
<div id="4656-1592586493616"><strong>什么是生命周期函数？</strong></div>
<div>通俗的来说，声明周期函数就是组件创建，组件更新，组件销毁是会触发的一系列方法。</div>
<div id="9027-1592586472263">生命周期钩子：https://angular.cn/guide/lifecycle-hooks</div>
<div>当 Angular 使用构造函数新建一个组件或指令后，就会按下面的顺序在特定时刻调用这些生命周期钩子方法：</div>
<blockquote>
<p>注意：constructor 构造函数（依赖注入，起到对应局部变量值初始化作用）：除了使用简单的值对局部变量进行初始化之外，什么都不应该做！！</p>
</blockquote>
<p></p>
<p> </p>
<div>
<table style="height: 572px; width: 1004px"><colgroup><col><col></colgroup>
<tbody>
<tr>
<td data-cell-id="1118-1592587120965-cell-0-0">
<div class="table-cell-line">钩子</div>
</td>
<td data-cell-id="1118-1592587120965-cell-0-1">
<div class="table-cell-line">用途及时机</div>
</td>
</tr>
<tr>
<td data-cell-id="1118-1592587120965-cell-1-0">
<div class="table-cell-line">ngOnChanges()</div>
</td>
<td data-cell-id="1118-1592587120965-cell-1-1">
<div class="table-cell-line">当 Angular（重新）设置数据绑定输入属性时响应。该方法接受当前和上一属性值的 SimpleChanges 对象</div>
<div class="table-cell-line">在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。</div>
</td>
</tr>
<tr>
<td data-cell-id="1118-1592587120965-cell-2-0">
<div class="table-cell-line">ngOnInit()</div>
</td>
<td data-cell-id="1118-1592587120965-cell-2-1">
<div class="table-cell-line">在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。</div>
<div class="table-cell-line">在第一轮 ngOnChanges() 完成之后调用，只调用一次。[请求数据时使用]</div>
</td>
</tr>
<tr>
<td data-cell-id="1118-1592587120965-cell-3-0">
<div class="table-cell-line">ngDoCheck()</div>
</td>
<td data-cell-id="1118-1592587120965-cell-3-1">
<div class="table-cell-line">检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应。</div>
<div class="table-cell-line">在每个变更检测周期中，紧跟在 ngOnChanges() 和 ngOnInit() 后面调用。</div>
</td>
</tr>
<tr>
<td data-cell-id="1118-1592587120965-cell-4-0">
<div class="table-cell-line">ngAfterContentInit()</div>
</td>
<td data-cell-id="1118-1592587120965-cell-4-1">
<div class="table-cell-line">当 Angular 把外部内容投影进组件/指令的视图之后调用。</div>
<div class="table-cell-line">第一次 ngDoCheck() 之后调用，只调用一次。</div>
</td>
</tr>
<tr>
<td data-cell-id="1118-1592587120965-cell-5-0">
<div class="table-cell-line">ngAfterContentChecked()</div>
</td>
<td data-cell-id="1118-1592587120965-cell-5-1">
<div class="table-cell-line">每当 Angular 完成被投影组件内容的变更检测之后调用。</div>
<div class="table-cell-line">ngAfterContentInit() 和每次 ngDoCheck() 之后调用</div>
</td>
</tr>
<tr>
<td data-cell-id="1118-1592587120965-cell-6-0">
<div class="table-cell-line">ngAfterViewInit()</div>
</td>
<td data-cell-id="1118-1592587120965-cell-6-1">
<div class="table-cell-line">当 Angular 初始化完组件视图及其子视图之后调用。</div>
<div class="table-cell-line">第一次 ngAfterContentChecked() 之后调用，只调用一次。</div>
</td>
</tr>
<tr>
<td data-cell-id="1118-1592587120965-cell-7-0">
<div class="table-cell-line">ngAfterViewChecked()</div>
</td>
<td data-cell-id="1118-1592587120965-cell-7-1">
<div class="table-cell-line">每当 Angular 做完组件视图和子视图的变更检测之后调用。</div>
<div class="table-cell-line">ngAfterViewInit() 和每次 ngAfterContentChecked() 之后调用。</div>
</td>
</tr>
<tr>
<td data-cell-id="1118-1592587120965-cell-8-0">
<div class="table-cell-line">ngOnDestroy()</div>
</td>
<td data-cell-id="1118-1592587120965-cell-8-1">
<div class="table-cell-line">每当 Angular 每次销毁指令/组件之前调用并清扫。在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏。</div>
<div class="table-cell-line">在 Angular 销毁指令/组件之前调用。</div>
</td>
</tr>
</tbody>
</table>
</div>
<h2 id="8446-1592582706475">Node.js(携带NPM包管理工具)安装配置：</h2>
<h3 id="3069-1592448029452">安装Nodejs，NodeJS 是必须的：</h3>
<div>可在如下地址获得 NodeJS 的安装包：https://nodejs.org/en/</div>
<div>详细安装图解:https://www.runoob.com/nodejs/nodejs-install-setup.html</div>
<div>安装成功后查看node版本：</div>
<div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">node --version
node -v
</pre>
</div>
<p><img src="https://img2020.cnblogs.com/blog/1336199/202012/1336199-20201221014642033-854829177.png" alt="" loading="lazy"></p>
<h2 id="6650-1592448029452">切换npm安装镜像源，解决npm install缓慢问题：</h2>
<div>
<div>NodeJS 安装好之后，NPM 也就可以用了（NPM是随同NodeJS一起安装的包管理工具）。但 NPM 的默认安装源在国外，通常会比较慢或者是直接因为网络原因安装失败，因此需要把 NPM 的安装源设置到国内镜像源，淘宝镜像（http://npm.taobao.org/）是个不错的选择，执行如下命令设置将淘宝镜像设置为NPM的安装源：</div>
</div>
<div>
<h3 id="5727-1592448892174">临时切换使用：</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">npm --registry https://registry.npm.taobao.org install express
</pre>
</div>
<h3 id="1182-1592448889791">持久使用（推荐）：</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">npm config set registry https://registry.npm.taobao.org

# 恢复
npm config delete registry
</pre>
</div>
<h3 id="8754-1592448538760">配置后验证是否成功：</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">npm config get registry
或者
npm info express
</pre>
</div>
<h2 id="6624-1592449227016">安装Angular相关开发环境：</h2>
<h3 id="3934-1592450518080">Angular-CLI构建工具(脚手架工具)安装说明：</h3>
<div id="6797-1592450096488">Angular-CLI详细简介：https://www.jianshu.com/p/3d17d5ee1951</div>
<div>
<h3 id="9488-1592450147079">全局安装脚手架工具：</h3>
<div><span style="color: rgba(255, 102, 0, 1)"><strong>安装命令（只需要安装一次）</strong></span></div>
</div>
<div id="6570-1592448949463" data-theme="default" data-language="javascript">
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">npm install -g @angular/cli
或者
cnpm install -g @angular/cli --推荐使用速度较快
</pre>
</div>
<div> </div>
<div><span style="color: rgba(255, 0, 0, 1)"><strong>安装前最好是先NPM安装源切换成淘宝镜像，如下使用国外镜像安装因为网络原因报错：</strong></span></div>
<div><span style="color: rgba(255, 0, 0, 1)"><span style="color: rgba(255, 0, 0, 1)"><span style="color: rgba(255, 0, 0, 1)"><strong><img src="https://img2020.cnblogs.com/blog/1336199/202012/1336199-20201221015727724-328353729.png" alt="" loading="lazy"></strong></span></span></span>
<div><strong>安装完成：</strong></div>
<div><strong><strong><strong><img src="https://img2020.cnblogs.com/blog/1336199/202012/1336199-20201221015845511-1347353713.png" alt="" loading="lazy"></strong></strong></strong>
<h3>验证Angular环境是否安装成功：</h3>
<p><img src="https://img2020.cnblogs.com/blog/1336199/202012/1336199-20201221015931055-1659145556.png" alt="" loading="lazy"></p>
<h2 id="7542-1592498128562">Angular项目创建并运行：</h2>
<h3 id="5173-1592498145805">通过Angular脚手架创建一个新的项目：</h3>
<p></p>
<div><strong>在终端(win+r 输入cmd)中打开E:\Angular 文件目录，输入一下命令新建项目：</strong></div>
<div>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">ng new MyAngularProject(项目名称)
</pre>
</div>
<p><img src="https://img2020.cnblogs.com/blog/1336199/202012/1336199-20201221100713642-1121392350.png" alt="" loading="lazy"></p>
<div><strong>直接通过命名运行脚手架搭建的项目：</strong></div>
<div>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">ng serve --open
</pre>
</div>
<blockquote>
<p>ng serve 命令会启动开发服务器、监视文件，并在这些文件发生更改时重建应用。<br>--open（或者只用 -o 缩写）选项会自动打开你的浏览器，并访问 http://localhost:4200/。</p>

</blockquote>
<p><img src="https://img2020.cnblogs.com/blog/1336199/202012/1336199-20201221100844533-609533450.png" alt="" loading="lazy"></p>
<div><strong>好了你的第一个Angular项目运行成功:</strong></div>
<div><img src="https://img2020.cnblogs.com/blog/1336199/202012/1336199-20201221100911066-1210095490.png" alt="" loading="lazy">
<p> </p>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>
<p></p>
<p></p>

</div>
<div id="MySignature" role="contentinfo">
<blockquote >
<p style='font-family:YouYuan;font-size: 16px;margin: 0 auto 0.01em auto;'><span style='font-size: 17px; '>作者名称：</span>追逐时光者</p>
<p style='font-family:YouYuan;font-size: 16px;margin: 0 auto 0.01em auto;'><span style='font-size: 17px; '>作者简介：</span>一个热爱编程、善于分享、喜欢学习、探索、尝试新事物和新技术的全栈软件工程师。</p>
<p style='font-family:YouYuan;font-size: 16px;margin: 0 auto 0.01em auto;'>
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利。如果该篇文章对您有帮助的话，可以点一下右下角的【&hearts;推荐&hearts;】，希望能够持续的为大家带来好的技术文章，文中可能存在描述不正确的地方，欢迎指正或补充，不胜感激。
</p>
</blockquote><br><br>
来源：https://www.cnblogs.com/Can-daydayup/p/14166192.html

頁: [1]

琼殿技术论坛's Archiver

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