Angular 复习与进阶系列 – Get Started
前言
这一篇主要是教一些基础中的基础, 方便我后续讲解其它主题的时候, 可以列出一些 sample code.
Before Start
开始前, 我们需要知道几个小知识
1. Angular Compilation
开发 Angular 项目, 我们会写 HTML, TS, Sass.
我们知道, TS 和 Sass 都需要经过 compile 转换成 JS 和 CSS 最终才交给游览器执行. 这项工作一般由 Webpack 或 Vite 来完成.
而对于 Angular 项目, HTML, TS, Sass 都需要经过 Angular 自己的 Compile 编译, 最终交给游览器执行. 这些工作由 Angular CLI 来完成 (目前它底层是基于 Webpack 的)
也就是说, HTML, TS, Sass 都不是最终的形态. 我们写的许多代码很可能只是语法糖, 最终会被编译成啰嗦, 深长的模样. 所以, 当发现一些不太符合逻辑的地方不要感到意外, 因为或许它被编译后就变成逻辑的了.
2. Component First
我们开发网站以 Page 为单位, 一个 Page 就是 HTML, JS, CSS 的组合.
Angular 的定位是 Single Page Web Application, 它只有一个 Page, 但一个 Page 怎么可能够用呢? 所以取而代之的是 Component.
Component 是一个可大可小的单位. 一个 Component 就是 HTML, TS, Sass 的组合, 它可以被当作一个 Page 所有内容, 也可以被当作一个局部的内容.
所以 Angular 的结构是一个 Index.html (Single Page), 里头包含 1 个或多个 Components. 这样来展现内容.
创建项目
1. 安装 Node.js 和 Yarn (Angular 目前用的是 Yarn Classic 哦, 相关 Issue – Yarn PnP Support Status)
2. 安装 Angular CLI
npm install -g @angular/cli@16.0.0-next.6
注: 这篇用的是还不稳定的 v16 版本哦.
3. 创建 Angular 项目
ng new get-started --standalone --style=scss --skip-tests --routing=false -s -t
ng 是 Angular CLI 的命令起头
new 是创建新项目
get-started 是项目名
--standalone 是 v16 才有的 command, 意思是不要生成 NgModule (为了简化教程)
--style=scss 是选定使用 Scss 作为编写 CSS 的方式, 如果你 prefer 直接写 CSS 也是可以的.
--skip-tests 是不要生成测试代码 (Angular 默认是会生成测试代码的, 为了简化教程, 我们不要)
--routing=false 是不要生成路由代码. (默认是会生成的, 为了简化教程, 我们不要)
-s 是命令 --inline-style 的缩写. by default, Component 由 .html, .scss, .ts 3 个 files 组成, inline style 则是去掉 .scss file, 把 style 写入 .ts file 里头. (为了简化教程)
-t 是命令 --inline-template 的缩写. 它和 inline style 同理, 就是去掉 .html file 把 HTML 代码写入 .ts file 里头 (为了简化教程)
项目结构
大部分都是前端熟悉的 files, 特别要留意的是
angular.json – 它相等于 Webpack config, 负责设定 development server, build bundle 等等
index.html, main.ts, styles.scss 是 for Page
app.component.ts 是 for Component, 里面也包含了 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. 这篇主要就是教你跑起来. 方便之后跟着教程做.
2. Angular 是 Single Page Web Application.
它只有一个 Page (index.html, main.ts, styles.scss),
其余的都是 Component. 而 Component 就是一组 HTML, TS, Sass.