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>

相关推荐
哲Zheᗜe༘6 小时前
了解学习Python编程之python基础
开发语言·python·学习
youliroam7 小时前
成语接龙学习
学习·golang·uniapp·成语接龙
kyle~7 小时前
C++--- override 关键字 强制编译器验证当前函数是否重写基类的虚函数
java·前端·c++
Light607 小时前
像素退场,曲线登场:现代响应式 CSS 全家桶 | 领码课堂
前端·css·响应式设计·css函数·布局系统·相对单位·设计令牌
爱生活的苏苏8 小时前
elementUI 表单验证-联动型校验
前端·javascript·elementui
一只小风华~10 小时前
Vue Router 路由元信息(meta)详解
前端·javascript·vue.js
MYX_30910 小时前
第四章 神经网络的基本组件
pytorch·深度学习·神经网络·学习
*且听风吟10 小时前
html 实现鼠标滑动点亮横轴
前端·javascript·html
985小水博一枚呀10 小时前
【AI大模型学习路线】第三阶段之RAG与LangChain——第十九章(实战基于Advanced RAG的PDF问答)系统部署与测试?
人工智能·学习·langchain·pdf
蓝桉~MLGT11 小时前
Python学习历程——字符串相关操作及正则表达式
python·学习·正则表达式