install node
https://nodejs.org
C:\xxx\Downloads\node-v20.10.0-x64
C:\Program Files\nodejs\
C:\angular>node -v
v20.10.0
C:\angular>npm -v
10.2.3
install angualr
npm install -g @angular/cli
error
设置淘宝源
npm config set registry https://registry.npm.taobao.org
npm config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass
恢复默认源
npm config delete registry
npm config delete sass_binary_site
C:\angular>npm install -g @angular/cli
added 227 packages in 16s
npm notice
npm notice New patch version of npm available! 10.2.3 -> 10.2.5
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.2.5
npm notice Run npm install -g npm@10.2.5 to update!
npm notice
ng new angular-tour-of-heroes --no-standalone --routing --ssr=false
cd angular-tour-of-heroes
ng serve --open
修改显示：
title = 'Tour of Heroes';
双花括号语法是 Angular 的插值绑定语法
<h1>{{title}} </h1>
打开 src/styles.css 并把下列代码添加到此文件中。
创建新组件
ng generate component heroes
C:\angular\angular-tour-of-heroes>ng generate component heroes
CREATE src/app/heroes/heroes.component.html (21 bytes)
CREATE src/app/heroes/heroes.component.spec.ts (601 bytes)
CREATE src/app/heroes/heroes.component.ts (199 bytes)
CREATE src/app/heroes/heroes.component.css (0 bytes)
UPDATE src/app/app.module.ts (475 bytes)
hero = 'Windstorm';
接口类：
export interface Hero {
id: number;
name: string;
}
管道
<h2>{{hero.name | uppercase}} Details</h2>
双向绑定
<div>
<label for="name">Hero name: </label>
<input id="name" (ngModel)="hero.name" placeholder="name">
</div>