Angular 18+ 高级教程 – Getting Started

前言

这篇主要是教大家如何快速搭建一个 Angular 项目,纯用于学习。

 

Before Starting

开始前,我们需要知道几个小知识。

1. Angular Compilation

游览器支持的编程语言是 HTML、CSS、JavaScript (JS)。

但为了提升开发体验,前端攻城狮大多数会选择使用 HTML、Scss、TypeScript (TS) 作为主要开发语言。

于是,项目发布前就需要先把 Scss 和 TS 编译成 CSS 和 JS,这项工程一般由 Webpack 或 Vite 这类 bundle 工具在打包环节顺手完成。

Angular 项目也使用 HTML、Scss、TS 作为主要开发语言,所以发布前它也需要编译。

但是!Angular 的编译远远不只是把 Scss 和 TS 编译成 CSS 和 JS 这么简单。

Angular 编译器是专门针对 Angular 项目而设的,它会把 HTML、Scss、TS 通通编译成 JS,没错!HTML 和 Scss 最终都会变成 JS。

所以,我们在写 Angular 代码时,要有一个 mindset:

我们写的代码和最终游览器执行的代码不是一回事。

Angular 可能会为了提升开发体验,提供语法糖,或者直接创造新语法。

Angular 也可能为了提升性能,把原本可读性高的代码,编译成可读性差,但性能优的代码。

总之,要想深入理解 Angular,我们就需要知道它在中间到底搞了什么鬼👻。

2. Single-page Application (SPA) & Component First

传统网站结构

一个网站 www.example.com

由多个网页(Page)组成

www.example.com 主页

www.example.com/products 产品页

一个网页则由 HTML、CSS、JS 组成。

单页面应用程序(SPA)结构

一个单页面应用程序 www.example.com

只有一个网页 (Page),但它有很多组件。

www.example.com 主组件

www.example.com/products 产品组件

一个组件由 HTML、Scss、TS 组成。

Angular is Single-page Application

Angular 是 Single-page Application,它只有一个 Page。

Angular 是 Component First,万物皆是组件,这也是 Web Components 倡导的。

组件对比 Page 有几个优势:

  1. 组件颗粒度灵活

    组件可以是一个 Page 里的一部分,也可以充当一整个 Page 内容。

  2. 组件可以灵活嵌套

    虽然 Page 也可以通过 iframe 做嵌套,但体验太差了。

 

创建项目

1. 安装 Node.js 和 Yarn (Angular 目前用的是 Yarn Classic 哦, 相关 Issue – Yarn PnP Support Status

2. 安装 Angular CLI

npm install -g @angular/cli

3. 创建 Angular 项目

ng new get-started --style=scss --skip-tests --routing=false --ssr=false -s -t

ng 是 Angular CLI 的命令头

new 是创建新项目

get-started 是项目名

--style=scss 是选定使用 Scss 作为编写 CSS 的方式, 如果你 prefer 直接写 CSS 也是可以的。

--skip-tests 是不要生成测试代码。(get started 而已,不需要搞测试)

--routing=false 是不要生成路由代码。(get started 而已,不需要搞路由)

--ssr=false 是不要支持 Server-Side Render (get started 而已,不需要搞服务器渲染)

-s 是 --inline-style command 的缩写。by default,组件由 .html、.scss、.ts  三个 files 组成,inline style 表示去除掉 .scss file,把 style 写入 .ts file 里头。(get started 而已,能少则少)

-t 是 --inline-template command 的缩写,它和 inline style 同理,就是去掉 .html file 把 HTML 代码写入 .ts file 里头。(get started 而已,能少则少)

 

项目结构

大部分都是前端熟悉的 files, 特别要留意的是

angular.json – 它相等于 webpack.config.js,负责设定 development server、build bundle、等等。

index.html、main.ts、styles.scss 是 for Page 

app.component.ts 是 for 组件,里面也包含了 inline style 和 inline HTML。

 

Page 结构

index.html

这里除了 <app-root> 以外, 啥也没有.

没有 <script> 也没有 <link rel="stylesheet">, 这些会在 compile 阶段插入进去.

main.ts

没有什么特别的, 只是一句启动代码,appConfig 我们先忽略.

style.scss

这里负责 Global Style,比如 reset css、base css、等等.

 

App 组件结构

写了一个简单得 Hello World

即便我不说, 也应该可以看出它的表达方式吧.

p.s. imports:[CommonModule] 不是必须的,有用到 Angular build-in 指令才需要,但由于太 common 了,所以 CLI by default 都会生成。

 

启动项目

ng serve --open

--open 是自动打开游览器

效果

 

总结

1. 这篇主要就是教你把 Angular 跑起来。方便之后跟着教程做。

2. Angular 是 Single Page Web Application。

它只有一个 Page(index.html、main.ts、styles.scss)。

其余的都是组件。组件就是一套 HTML、TS、Scss。.

 

目录

上一篇 Angular 18+ 高级教程 – 初识 Angular

下一篇 Angular 18+ 高级教程 – Angular Compiler (AKA ngc) Quick View

想查看目录,请移步 Angular 18+ 高级教程 – 目录

喜欢请点推荐👍,若发现教程内容以新版脱节请评论通知我。happy coding 😊💻

 

posted @ 2022-12-05 17:34  兴杰  阅读(1472)  评论(0编辑  收藏  举报