Angular 从入坑到挖坑 - Angular 使用入门
<h3>一、Overview</h3><p>angular 入坑记录的笔记第一篇，完成开发环境的搭建，以及如何通过 angular cli 来创建第一个 angular 应用。入坑一个多星期，通过学习官方文档以及手摸手的按教程敲官方的快速上手项目，很像后端，嗯，完美的契合了我这种后端开发人员。</p>
<p>对应官方文档地址：</p>
<ul>
<li>搭建本地开发环境和工作空间</li>
<li>ng new</li>
<li>ng serve</li>
<li>工作区和项目文件结构</li>
</ul>
<p>配套代码地址：angular-practice/src/getting-started</p>
<p> </p>
<h3>二、Contents</h3>
<ol>
<li>Angular 从入坑到弃坑 - Angular 使用入门</li>
</ol>
<p> </p>
<p> </p>
<h3>三、Knowledge Graph</h3>
<p><img src="https://img2018.cnblogs.com/common/1310859/202002/1310859-20200213210841713-52677214.png"></p>
<p> </p>
<p> </p>
<h3>四、Step by Step</h3>
<h4>4.1、通过 Angular CLI 创建第一个 Angular 应用</h4>
<h5>4.1.1、开发环境搭建</h5>
<p>前提条件</p>
<ul>
<li>node.js 版本高于 10.9.0</li>
<li>包含 npm 客户端</li>
</ul>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"># 查看 node 版本</span>
node -<span style="color: rgba(0, 0, 0, 1)">v
</span><span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"># 查看 npm 版本</span>
npm -v</pre>
</div>
<p><img src="https://img2018.cnblogs.com/common/1310859/202002/1310859-20200213211547881-1400820314.png"></p>
<p>全局安装 Angular CLI</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"># 在电脑上以全局安装的方式安装 angular cli</span>
npm install -g @angular/cli</pre>
</div>
<p><img src="https://img2018.cnblogs.com/common/1310859/202002/1310859-20200213211621031-1545180174.png"></p>
<p>验证是否安装成功</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"># 查看 angular cli 版本</span>
<span style="color: rgba(0, 0, 0, 1)">ng v
</span><span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"># 查看 angular cli 中的各种命令解释</span>
ng help</pre>
</div>
<p><img src="https://img2018.cnblogs.com/common/1310859/202002/1310859-20200213211715052-1298082434.png"></p>
<h5>4.1.2、运行第一个 Angular 应用</h5>
<p>通过 Angular CLI 命令来创建一个新的应用</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"># 指定位置，创建新的 angular 应用</span>
ng new my-app</pre>
</div>
<p>常用命令参数</p>
<table>
<thead>
<tr><th>options</th><th>解释</th></tr>
</thead>
<tbody>
<tr>
<td>--force</td>
<td>强制覆盖现有文件</td>
</tr>
<tr>
<td>--skipInstall</td>
<td>创建项目时跳过 npm install 命令</td>
</tr>
<tr>
<td>--strict</td>
<td>在代码中使用更严格的 typescript 编译选项</td>
</tr>
</tbody>
</table>
<p><img src="https://img2018.cnblogs.com/common/1310859/202002/1310859-20200213211818674-1510383832.png"></p>
<p>运行项目</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"># 运行项目</span>
ng serve</pre>
</div>
<p>常用命令参数</p>
<table>
<thead>
<tr><th>options</th><th>解释</th></tr>
</thead>
<tbody>
<tr>
<td>--open / -o</td>
<td>是否直接打开浏览器</td>
</tr>
<tr>
<td>--port</td>
<td>指定程序运行的端口</td>
</tr>
</tbody>
</table>
<p><img src="https://img2018.cnblogs.com/common/1310859/202002/1310859-20200213211901100-2016961940.png"></p>
<p> </p>
<h4>4.2、项目结构、文件功能了解</h4>
<p><img src="https://img2018.cnblogs.com/common/1310859/202002/1310859-20200213212000232-367997407.png"></p>
<ul>
<li>
<p>e2e - 端到端测试文件</p>
<ul>
<li>
<p>src - 单元测试源代码路径</p>
<ul>
<li>app.e2e-spec.ts - 针对当前应用的端到端单元测试文件</li>
<li>app.po.ts - 单元测试源文件</li>
</ul>
</li>
<li>
<p>protractor.conf.js - protractor 测试工具配置文件</p>
</li>
<li>
<p>tsconfig.json - 继承于工作空间根目录的 typescript 配置文件</p>
</li>
</ul>
</li>
<li>
<p>src - 工作空间 <sup class="md-footnote">1</sup> 最外层根项目的源代码路径</p>
<ul>
<li>
<p>app - 系统所提供的各种功能</p>
<ul>
<li>app-routing.module.ts - 项目的路由模块，用来定义项目的前端路由信息</li>
<li>app.component.html - 项目的根组件所关联的 HTML 页面</li>
<li>app.component.scss - 项目的根组件 HTML 页面的样式信息</li>
<li>app.component.spec.ts - 项目的根组件单元测试文件</li>
<li>app.component.ts - 项目的根组件逻辑</li>
<li>app.module.ts - 应用的根模块</li>
</ul>
</li>
<li>
<p>assets - 系统需要使用的静态资源文件</p>
</li>
<li>
<p>environments - 针对不同环境的构建配置选项</p>
</li>
<li>
<p>favicon.ico - 网站图标</p>
</li>
<li>
<p>index.html - 应用的主页面</p>
</li>
<li>
<p>main.ts - 应用的入口程序</p>
</li>
<li>
<p>polyfills.ts - 针对不同浏览器对于原生 API 的支持程度不相同的情况，用来抹平不同浏览器之间的支持差异 <sup class="md-footnote">2</sup></p>
</li>
<li>
<p>styles.scss - 项目的全局样式文件</p>
</li>
<li>
<p>test.ts - 单元测试的主入口程序</p>
</li>
</ul>
</li>
<li>
<p>.editorconfig - 针对不同代码编辑器间的代码风格规范</p>
</li>
<li>
<p>.gitignore - git 忽略的文件</p>
</li>
<li>
<p>angular.json - 应用于当前工作空间的一些默认配置以及供 angular cli 和开发工具使用的配置信息</p>
</li>
<li>
<p>browserslist - 项目所针对的目标浏览器 <sup class="md-footnote">3</sup></p>
</li>
<li>
<p>karma.conf.js - 基于 node.js 的 javascript 测试执行过程管理工具</p>
</li>
<li>
<p>package-lock.json - 针对当前工作空间使用到 npm 包，安装到 node_modules 时的版本信息</p>
</li>
<li>
<p>package.json - 当前工作空间中所有项目会使用到的 npm 包依赖</p>
</li>
<li>
<p>README.md - 当前工作空间最外层根应用的简介文件</p>
</li>
<li>
<p>tsconfig.app.json - 当前工作空间最外层根应用的专属 typescript 配置文件</p>
</li>
<li>
<p>tsconfig.json - 当前工作空间中各个项目的基础 typescript 配置文件</p>
</li>
<li>
<p>tsconfig.spec.json - 当前工作空间最外层根应用的专属 tslint 配置文件</p>
</li>
<li>
<p>tslint.json - 当前工作空间中各个项目的基础 tslint 配置文件</p>
</li>
</ul>
<div class="footnotes-area"><hr>
<div class="footnote-line"><span class="md-fn-count">1</span> 工作空间类似于 .NET 项目中的解决方案，在一个工作空间内可以创建多个的项目↩</div>
<div class="footnote-line"><span class="md-fn-count">2</span> 现代浏览器支持的某些原生 API，当用户使用老版本的浏览器或某些浏览器时并不支持，只要使用了 polyfills 这个库， 即可对于这些无法使用的浏览器添加支持，使用方法也无需更改（PS：针对的是原生的 API）↩</div>
<div class="footnote-line"><span class="md-fn-count">3</span> 还是因为不同浏览器支持的特性不同，或者是 css 样式前缀不同，通过 browserslist 来告诉项目中的各种前端工具，完成自动配置的过程↩</div>
</div><br><br>
来源：https://www.cnblogs.com/danvic712/p/getting-started-with-angular.html
頁:
[1]