angular hero学习

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>

相关推荐
PerfumerKarma2 分钟前
【WebGPU学习杂记】数学基础拾遗(2)变换矩阵中的齐次坐标推导与几何理解
学习·线性代数·矩阵
excel3 分钟前
理解 JavaScript 中的 for...in 与 for...of 的区别
前端
knight_202413 分钟前
嵌入式学习日志————对射式红外传感器计次
stm32·单片机·嵌入式硬件·学习
前端小巷子33 分钟前
Webpack 5模块联邦
前端·javascript·面试
玲小珑36 分钟前
Next.js 教程系列(十九)图像优化:next/image 与高级技巧
前端·next.js
晓得迷路了37 分钟前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
go546315846538 分钟前
基于分组规则的Excel数据分组优化系统设计与实现
人工智能·学习·生成对抗网络·数学建模·语音识别
江城开朗的豌豆43 分钟前
Vue和React中的key:为什么列表渲染必须加这玩意儿?
前端·vue.js·面试
江城开朗的豌豆1 小时前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
pengzhuofan1 小时前
Web开发系列-第0章 Web介绍
前端