Angular介绍、安装Angular Cli、创建Angular项目入门教程
<h1>场景</h1><p>Angualr 是一款来自谷歌的开源的web 前端框架，诞生于2009 年，由Misko Hevery 等<br>人创建，后为Google 所收购。是一款优秀的前端JS 框架，已经被用于Google 的多款产品当<br>中。</p>
<p>Angualr 基于TypeScript 和react、vue 相比Angular
更适合中大型企业级项目。</p>
<p>Angular官网：</p>
<p>https://angular.cn/</p>
<p>开发Angular项目的IDE推荐使用VisualStudioCode</p>
<p>VisualStudioCode下载安装与安装中文插件教程(图文教程):</p>
<p>https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105556884</p>
<p>注：</p>
<p>博客： <br>https://blog.csdn.net/badao_liumang_qizhi
<br>关注公众号 <br>霸道的程序猿 <br>获取编程相关电子书、教程推送与免费下载。</p>
<h1>实现</h1>
<h2>Angular环境搭建</h2>
<p>确保电脑已经安装最新的稳定版本的node.js</p>
<p>为了提高npm install的速度与效率，这里安装cnpm使用淘宝镜像</p>
<div class="cnblogs_code">
<pre>npm install -g cnpm --registry=https:<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">registry.npm.taobao.org</span></pre>
</div>
<p><img src="https://img2020.cnblogs.com/blog/1328191/202004/1328191-20200416233438615-1060405310.jpg" alt=""></p>
<p> </p>
<p> </p>
<p><img alt=""></p>
<p>然后全局安装angular脚手架</p>
<div class="cnblogs_code">
<pre>npm install -g @angular/cli</pre>
</div>
<p>或者</p>
<div class="cnblogs_code">
<pre>cnpm install -g @angular/cli</pre>
</div>
<p><img src="https://img2020.cnblogs.com/blog/1328191/202004/1328191-20200416233458634-994070326.jpg" alt=""></p>
<p> </p>
<p> </p>
<p><img alt=""></p>
<h2>Angular创建项目</h2>
<p>新建一个文件夹helloAngular，然后在此文件夹下打开命令行输入</p>
<div class="cnblogs_code">
<pre>ng <span style="color: rgba(0, 0, 255, 1)">new</span> angulardemo</pre>
</div>
<p><img src="https://img2020.cnblogs.com/blog/1328191/202004/1328191-20200416233509730-600872211.jpg" alt=""></p>
<p> </p>
<p> </p>
<p>其中angulardemo是项目名称</p>
<p>然后会提示是否添加路由配置，这里选择是，并且选择css预编译器，这里选择SCSS并回车。</p>
<p><img alt=""></p>
<p>这样安装会将相关依赖进行安装，即执行npm install 操作，所以速度会慢点。</p>
<p>如果只是新建项目跳过npm install，可以执行以下命令。</p>
<div class="cnblogs_code">
<pre>ng <span style="color: rgba(0, 0, 255, 1)">new</span> angulardemo --skip-install</pre>
</div>
<p>然后进入到项目目录</p>
<div class="cnblogs_code">
<pre>cd angulardemo</pre>
</div>
<p>然后再安装项目依赖</p>
<div class="cnblogs_code">
<pre>cnpm install</pre>
</div>
<p>这样会快些</p>
<p><img src="https://img2020.cnblogs.com/blog/1328191/202004/1328191-20200416233536271-139254724.jpg" alt=""></p>
<p> </p>
<p> </p>
<p><img alt=""> </p>
<p>如果在安装过程中出现resource busy or locked</p>
<p>关闭杀毒软件，然后将node_modeules删掉重新执行cnpm install 即可</p>
<p>安装过程中若出现提示，输入Y回车即可。</p>
<p><img src="https://img2020.cnblogs.com/blog/1328191/202004/1328191-20200416233540987-143830483.jpg" alt=""></p>
<p> </p>
<p> </p>
<p><img alt=""></p>
<h2>运行Angular项目</h2>
<div class="cnblogs_code">
<pre>ng serve --open</pre>
</div>
<p><img src="https://img2020.cnblogs.com/blog/1328191/202004/1328191-20200416233549314-1766461037.jpg" alt=""></p>
<p> </p>
<p> </p>
<p><img alt=""></p>
</div>
<div id="MySignature" role="contentinfo">
博客园：
https://www.cnblogs.com/badaoliumangqizhi/
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。<br><br>
来源：https://www.cnblogs.com/badaoliumangqizhi/p/12716827.html
頁:
[1]