Angular入门教程(一)
<h1><strong>一、</strong><strong> </strong><strong>A</strong><strong>ngular<span style="font-family: 宋体">介绍</span></strong></h1><p><span style="font-family: "Microsoft YaHei"; font-size: 15px">Angular是谷歌开发的一款开源的web前端框架，诞生于2009年，由<strong>Misko Hevery </strong>等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。</span></p>
<p><span style="font-family: "Microsoft YaHei"; font-size: 15px">根据项目数统计angular（1.x 、2.x 、4.x、5.x、6.x、7.x 、8.x、9.x）是现在网上使用量最大的框架<strong>。</strong></span></p>
<p><span style="font-family: "Microsoft YaHei"; font-size: 15px">Angular基于TypeScript和react、vue相比 Angular更适合中大型企业级项目。</span></p>
<p><span style="font-family: "Microsoft YaHei"; font-size: 15px">目前2019年12月25日angular最新版本angular9.x。根据官方介绍，Angular每过几个月就会更新一个版本。Angular2.x以后所有的Angular版本用法都是一样的，此教程同样适用于Angular7.x 、Angular8.x、Angular9.x 以及未来的其它版本....。</span></p>
<p> </p>
<h1>二、<strong>学习</strong><strong>Angular<span style="font-family: 宋体">必备基础</span></strong></h1>
<p><strong>必备基础：</strong>html <span style="font-family: 宋体">、</span><span style="font-family: Calibri">css </span><span style="font-family: 宋体">、</span><span style="font-family: Calibri">js</span><span style="font-family: 宋体">、</span><span style="font-family: Calibri">es6</span></p>
<p><span style="font-family: 宋体">如果有</span>Typescript<span style="font-family: 宋体">基础更容易理解，没有</span><span style="font-family: Calibri">Typescript</span><span style="font-family: 宋体">基础也可以学此教程。此教程中用到的</span><span style="font-family: Calibri">Typescript</span><span style="font-family: 宋体">语法会详细讲解。</span></p>
<p><strong>Typescript<span style="font-family: 宋体">基础入门教程</span><span style="font-family: Calibri">:</span></strong> <span style="text-decoration: underline">https://www.itying.com/goods-905.html</span></p>
<h1>三、<strong>Angular<span style="font-family: 宋体">环境搭建</span></strong></h1>
<p><strong>1<span style="font-family: 宋体">、安装前准备工作：</span></strong></p>
<p><strong> </strong></p>
<p>1.1<span style="font-family: 宋体">、安装</span><span style="font-family: Calibri">nodejs</span></p>
<p><span style="font-family: 宋体"> 安装</span>angular<span style="font-family: 宋体">的计算机上面必须安装最新的</span><span style="font-family: Calibri">nodejs--</span><span style="font-family: 宋体">注意安装</span><span style="font-family: Calibri">nodejs</span><span style="font-family: 宋体">稳定版本</span></p>
<p> 官网地址:https://nodejs.org/zh-cn/download/</p>
<p class="17">1.2<span style="font-family: 宋体">、</span><span style="font-family: 宋体">安装</span>cnpm</p>
<p> npm<span style="font-family: 宋体">可能安装失败建议先用</span><span style="font-family: Calibri">npm</span><span style="font-family: 宋体">安装一下</span><span style="font-family: Calibri">cnpm</span><span style="font-family: 宋体">用淘宝镜像安装</span></p>
<p> https://npm.taobao.org/</p>
<p><strong> 命令:</strong>npm install -g cnpm --registry=https://registry.npm.taobao.org</p>
<p class="15"><strong>2<span style="font-family: 宋体">、</span></strong><strong><span style="font-family: 宋体">使用</span> npm</strong><strong>/cnpm </strong><strong>命令安装</strong><strong>angular/cli <span style="font-family: 宋体">（</span></strong><strong>只需要安装一次</strong><strong>）</strong></p>
<p class="15"><strong> 命令:</strong>npm install -g @angular/cli <span style="font-family: 宋体">或者</span> cnpm install -g @angular/cli</p>
<h1>四、<strong>Angular<span style="font-family: 宋体">创建项目</span></strong></h1>
<p>1.<strong>打开</strong><strong>命令行工具</strong><strong>找到你要创建项目的目录</strong></p>
<p><strong><span style="font-family: 宋体">2.创建项目</span></strong></p>
<p> ng new <span style="font-family: 宋体">项目名称 </span> </p>
<p><strong>直接安装：</strong></p>
<p><strong> 命令:</strong>ng new angulardemo</p>
<p><strong><span style="font-family: 宋体">如果要跳过</span>npm i<span style="font-family: 宋体">安装：</span></strong></p>
<p><strong> 命令:</strong>ng new angulardemo --skip-install</p>
<p><img src="https://img2020.cnblogs.com/blog/1417478/202004/1417478-20200426202021829-798647886.png"></p>
<p><strong>3.运行项目</strong></p>
<p> 3.1切换到项目文件夹</p>
<p> cd 文件夹目录</p>
<p> 3.2 启动项目</p>
<p> ng serve --open</p>
<h1>五、<strong>Angular<span style="font-family: 宋体">环境搭建以及创建项目的时候可能遇到的错误</span></strong></h1>
<p>1、<strong>npm<span style="font-family: 宋体">安装</span><span style="font-family: Calibri">angular/cli</span><span style="font-family: 宋体">失败</span></strong></p>
<p><span style="font-family: 宋体"> 解决方案：用</span> cnpm <span style="font-family: 宋体">安装</span></p>
<p>2、<strong><span style="font-family: 宋体">创建项目</span>npm i<span style="font-family: 宋体">的时候失败</span></strong></p>
<p><span style="font-family: 宋体"> 解决方案</span>1<span style="font-family: 宋体">：</span><span style="font-family: Calibri">ctrl+c</span><span style="font-family: 宋体">结束项目，</span><span style="font-family: Calibri">cd</span><span style="font-family: 宋体">到项目里面，用 </span><span style="font-family: Calibri">cnpm i </span><span style="font-family: 宋体">安装依赖</span></p>
<p><span style="font-family: 宋体"> 解决方案</span>2<span style="font-family: 宋体">：创建项目的时候 </span>--skip-install</p>
<table border="1" cellspacing="0">
<tbody>
<tr>
<td valign="top" width="563">
<p align="justify">ng new my-app --skip-install</p>
<p align="justify"> </p>
<p align="justify">cd my-app</p>
<p align="justify"> </p>
<p align="justify">cnpm install / yarn</p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p>3、<strong><span style="font-family: 宋体">创建项目后用</span>npm i <span style="font-family: 宋体">或者 </span><span style="font-family: Calibri">cnpm i</span><span style="font-family: 宋体">后项目没法运行</span></strong></p>
<p align="justify"><span style="font-family: 宋体"> 解决方案：用</span>yarn <span style="font-family: 宋体">替代 </span><span style="font-family: Calibri">cnpm</span><span style="font-family: 宋体">和</span><span style="font-family: Calibri">npm</span></p>
<p align="justify"> 1 cnpm instal @angular/cli (<span style="font-family: 宋体">我的</span><span style="font-family: Calibri">npm</span><span style="font-family: 宋体">会报错</span><span style="font-family: Calibri">)</span><span style="font-family: 宋体">；</span></p>
<p align="justify"> 2 ng new <span style="font-family: 宋体">的时候阻止自动安装</span><span style="font-family: Calibri">ng</span><span style="font-family: 宋体">包，只创建</span><span style="font-family: Calibri">ng</span><span style="font-family: 宋体">目录</span><span style="font-family: Calibri"> </span></p>
<table border="1" cellspacing="0">
<tbody>
<tr>
<td valign="top" width="563">
<p align="justify">ng new my-app --skip-install </p>
</td>
</tr>
</tbody>
</table>
<p align="justify"> </p>
<p align="justify"> 3 <span style="font-family: 宋体">安装</span><span style="font-family: Calibri">yarn npm install -g yarn / cnpm install -g yarn </span></p>
<p align="justify"> 4 <span style="font-family: 宋体">进入目录</span><span style="font-family: Calibri">my-app </span><span style="font-family: 宋体">使用</span><span style="font-family: Calibri">yarn </span><span style="font-family: 宋体">安装</span><span style="font-family: Calibri">ng</span><span style="font-family: 宋体">所依赖的包</span><span style="font-family: Calibri"> </span> yarn</p>
<p align="justify"> </p>
<p align="justify"><strong>注意：</strong>yarn <span style="font-family: 宋体">命令 等同于</span><span style="font-family: Calibri"> npm install / cnpm install </span><span style="font-family: 宋体">使用</span><span style="font-family: Calibri">yarn</span><span style="font-family: 宋体">前提是先安装</span><span style="font-family: Calibri">yarn ,</span><span style="font-family: 宋体">安装使用</span><span style="font-family: Calibri"> cnpm install -g yarn </span><span style="font-family: 宋体">就可以安装</span></p>
<p align="justify"> </p><br><br>
来源：https://www.cnblogs.com/sanqiu-mark/p/12782025.html
頁:
[1]