Angular 20+ 高阶教程 – Getting Started
<h2>前言</h2><p>这篇主要是教大家如何快速搭建一个 Angular get started 项目，纯用于学习。</p>
<p> </p>
<h2>Before Starting</h2>
<p>开始前，我们需要知道几个小知识。</p>
<h3>1. Angular Compilation</h3>
<p>浏览器支持的编程语言是 HTML、CSS、JavaScript (JS)。</p>
<p>但为了提升开发体验，前端工程师大多数会选择使用 HTML、Scss、TypeScript (TS) 作为主要开发语言。</p>
<p>于是，项目发布前就需要先把 Scss 和 TS 编译成 CSS 和 JS，这项工程一般由 Vite 或 Webpack 这类 bundler 在打包环节顺手完成。</p>
<p>Angular 项目也使用 HTML、Scss、TS 作为主要开发语言，所以发布前它也需要编译。</p>
<p>但是！Angular 的编译远远不只是把 Scss 和 TS 编译成 CSS 和 JS 这么简单。</p>
<p>Angular 编译器是专门针对 Angular 项目而设的，它会把 HTML、Scss、TS 通通编译成 JS，没错！HTML 和 Scss 最终都会变成 JS。</p>
<p>所以，我们在写 Angular 代码时，要有一个 mindset：</p>
<p>我们写的代码和最终浏览器执行的代码不是一回事。</p>
<p>Angular 可能会为了提升开发体验，提供语法糖，或者直接创造新语法。</p>
<p>Angular 也可能为了提升性能，把原本可读性高的代码，编译成可读性差，但性能优的代码。</p>
<p>总之，要想深入理解 Angular，我们就需要知道它在中间到底搞了什么鬼👻。</p>
<h3>2. Single-page Application (SPA) & Component First</h3>
<h4>传统网站结构</h4>
<p>一个网站 www.example.com</p>
<p>由多个网页（Page）组成</p>
<p>www.example.com 主页</p>
<p>www.example.com/products 产品页</p>
<p>一个网页则由 HTML、CSS、JS 组成。</p>
<h4>单页面应用程序（SPA）结构</h4>
<p>一个单页面应用程序 www.example.com</p>
<p>只有一个网页 (Page)，但它有很多组件。</p>
<p>www.example.com 主组件</p>
<p>www.example.com/products 产品组件</p>
<p>一个组件由 HTML、Scss、TS 组成。</p>
<h4>Angular is Single-page Application</h4>
<p>Angular 是 Single-page Application，它只有一个 Page。</p>
<p>Angular 是 Component First，万物皆是组件，这也是 Web Components 倡导的。</p>
<p>组件对比 Page 有几个优势：</p>
<ol>
<li>
<p>组件颗粒度灵活</p>
<p>组件可以是一个 Page 里的一部分，也可以充当一整个 Page 内容。</p>
</li>
<li>
<p>组件可以灵活嵌套</p>
<p>虽然 Page 也可以通过 iframe 做嵌套，但体验太差了。</p>
</li>
</ol>
<p> </p>
<h2>创建项目</h2>
<p>1. 安装 Node.js 和 Yarn （Angular 目前用的是 Yarn Classic 哦, 相关 Issue – Yarn PnP Support Status）</p>
<p>2. 安装 Angular CLI</p>
<div class="cnblogs_code">
<pre>npm install -g @angular/cli</pre>
</div>
<p>3. 创建 Angular 项目</p>
<div class="cnblogs_code">
<pre>ng new get-started --style=scss --skip-tests --routing=<span style="color: rgba(0, 0, 255, 1)">false</span> --ssr=<span style="color: rgba(0, 0, 255, 1)">false</span> --zoneless -s -t</pre>
</div>
<p>ng 是 Angular CLI 的命令头</p>
<p>new 是创建新项目</p>
<p>get-started 是项目名</p>
<p>--style=scss 是选定使用 Scss 作为编写 CSS 的方式，如果你 prefer 直接写 CSS 也是可以的。</p>
<p>--skip-tests 是不要生成测试代码。（get started 而已，不需要搞测试）</p>
<p>--routing=false 是不要生成路由代码。(get started 而已，不需要搞路由)</p>
<p>--ssr=false 是不要支持 Server-Side Render (get started 而已，不需要搞服务器渲染)</p>
<p>--zoneless 是 v20 才引入的配置。Angular 早期使用 Zone.js 来实现变更检测，后来 Zone.js 被 Signals 取代了。但目前 v20 仍属于 Zone.js -> Signals 的过渡期，所以我们需要额外配置这个 zoneless，再过一两个版本就会是默认 zoneless 了。</p>
<p>至于什么是 Zone.js，Signals 和变更检测，我会在后续章节里详细讲解。这里我们只需要知道有这个 zoneless 配置就可以了。</p>
<p>-s 是 --inline-style command 的缩写。by default，组件由 .html、.scss、.ts 三个 files 组成，inline style 表示去除掉 .scss file，把 style 写入 .ts file 里头。(get started 而已，能少则少)</p>
<p>-t 是 --inline-template command 的缩写，它和 inline style 同理，就是去掉 .html file 把 HTML 代码写入 .ts file 里头。(get started 而已，能少则少)</p>
<p> </p>
<h2>项目结构</h2>
<p><img src="https://img2024.cnblogs.com/blog/641294/202505/641294-20250522232750842-2077518840.png"></p>
<p>大部分都是前端熟悉的 files，特别要留意的是</p>
<p>angular.json – 它相等于 vite.config.ts，负责设定 development server、build bundle、等等。</p>
<p>index.html、main.ts、styles.scss 是 for Page </p>
<p>app.ts 或 app.component.ts 是 for 组件，里面也包含了 inline style 和 inline HTML。</p>
<p> </p>
<h2>Page 结构</h2>
<h3>index.html</h3>
<p><img src="https://img2024.cnblogs.com/blog/641294/202505/641294-20250522232943538-567574129.png"></p>
<p>这里除了 <app-root> 以外，啥也没有.</p>
<p>没有 <script> 也没有 <link rel="stylesheet">，这些会在 compile 后插入进去。</p>
<h3>main.ts</h3>
<p><img src="https://img2024.cnblogs.com/blog/641294/202505/641294-20250522233018375-845374922.png"></p>
<p>没有什么特别的，只是一句启动代码，appConfig 我们先忽略。</p>
<h3>styles.scss</h3>
<p><img src="https://img2023.cnblogs.com/blog/641294/202212/641294-20221205201618980-486912293.png"></p>
<p>styles.scss 负责 Global Style，比如 reset css、base css、等等。</p>
<p> </p>
<h2>App 组件结构</h2>
<p><img src="https://img2024.cnblogs.com/blog/641294/202506/641294-20250629093632476-1581672777.png"></p>
<p>写了一个简单的 Hello World。</p>
<p>即便我不说，我相信大家也可以看出它的表达方式吧。</p>
<h3><span style="font-size: 14px"> </span></h3>
<h2>启动项目</h2>
<div class="cnblogs_code">
<pre>ng serve --open</pre>
</div>
<p>--open 是自动打开浏览器</p>
<p>效果</p>
<p><img src="https://img2023.cnblogs.com/blog/641294/202311/641294-20231122211336519-319489670.png"></p>
<p> </p>
<h2>总结</h2>
<p>1. 这篇主要就是教你把 Angular 跑起来，方便之后跟着教程做。</p>
<p>2. Angular 是 Single Page Web Application。</p>
<p>它只有一个 Page（index.html、main.ts、styles.scss）。</p>
<p>其余的都是组件，组件就是一套 HTML、TS、Scss。</p>
<p> </p>
<p> </p>
<h2>目录</h2>
<p>上一篇 Angular 20+ 高阶教程 – 初识 Angular</p>
<p>下一篇 Angular 20+ 高阶教程 – Angular Compiler (AKA ngc) Quick View</p>
<p>想查看目录，请移步 Angular 20+ 高阶教程 – 目录</p>
<p>喜欢请点推荐👍，若发现教程内容以新版脱节请评论通知我。happy coding 😊💻</p>
<p> </p><br><br>
来源：https://www.cnblogs.com/keatkeat/p/16952907.html
頁:
[1]