[Angular] 笔记1：开发设置 ， 双向绑定

1 设置开发环境

1.1 安装 node

下载 node，因为要使用 npm 工具，教程中使用 Angualr 14, 最新版 node 20 用不了，安装 node 16 就可以。

1.2 安装 Angular CLI

Angular CLI 是用于创建 Angular 工程的工具集，使用如下命令：
npm i @angular/cli@14 --global ,

--global 选项使 ng 命令随处可用。

使用如下命令查看已经安装的 npm global module: npm list -global --depth 0.

查看 cli 版本使用 ng version，命令格式的写法参考 help 命令输出。

1.3 新建工程

使用 ng new 创建工程，例如：
ng new my-app

1.4 运行

在项目文件夹内，运行 ng serve:

PS D:\Angular\my-app> ng serve
✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   2.41 MB | 
polyfills.js          | polyfills     | 318.60 kB | 
styles.css, styles.js | styles        | 210.63 kB | 
main.js               | main          |   9.11 kB | 
runtime.js            | runtime       |   6.51 kB | 

                      | Initial Total |   2.94 MB

Build at: 2023-12-12T15:12:29.084Z - Hash: 885651a8efc046d5 - Time: 5530ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

在路径 http://localhost:4200/ 即可看到项目运行界面。

3. 双向绑定

Angular 使用 ngModel指令实现双向绑定，双向绑定应用于 form 。ngModel 只适用于 input, textarea, 以及 radio button.
实现双向绑定有两步：

1. 代码中设属性
2. 监听 DOM 元素的变化,

[()] 的写法称为 banana box (香蕉盒)。
举例：
app.component.ts:

import {
    Component } from '@angular/core';
import {
    FormsModule } from '@angular/forms';

@Component({
   
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
   
 favoriteAnimal: string = "turtle";
  constructor() {
   }
}

app.component.html:

<router-outlet></router-outlet>
<h2>Two-way Binding Example</h2>
<input [(ngModel)]="favoriteAnimal" />
<p>{
  { favoriteAnimal }}</p>

{ { favoriteAnimal }} 是字符串插值，Angular 使用双大括号。
要使用 ngModel，还需要引入 FormsModule 模块：
app.module.ts:

 imports: [BrowserModule, AppRoutingModule, FormsModule],

app.components.ts:

import {
    FormsModule } from '@angular/forms';

页面显示：