Angular 学习笔记
一、基本操作步骤
ng v:查看angular的版本
node -v:查看nodejs的版本
新建项目:ng new 项目名
运行项目:cd 项目名
ng serve --open
新建组件:ng g component 组件名
ng new angulardemo
cd angulardemo
ng serve --open
ng g component components/news
二、组件
1.Angular绑定数据
(1)文本数据绑定{{}}
<h1>{{title}}</h1>
<div>1+1={{1+1}}</div>
(2)绑定html
this.h="<h2>这是一个h2用[innerHTML]来解析</h2>"
<div [innerHTML]="h"></div>
2.绑定属性
<div [id]="id" [title]="msg">调试工具看看我的属性</div>
3.数据循环 *ngFor
public lists:any[]=[
{"title":"我是新闻1"},
{"title":"我是新闻2"},
{"title":"我是新闻3"}
]
<ul>
<li *ngFor="let item of lists; let key=index">
{{key}}---{{item.title}}
</li>
</ul>
4.条件判断 *ngIf
<ul>
<li *ngFor="let item of lists; let key=index">
<span *ngIf="key==1" class="red">
{{key}}---{{item.title}}
</span>
<span *ngIf="key!=1">
{{key}}---{{item.title}}
</span>
</li>
</ul>
5. *ngSwitch
<span [ngSwitch]="orderStatus">
<p *ngSwitchCase="1">已经支付</p>
<p *ngSwitchCase="2">支付并且确认订单</p>
<p *ngSwitchCase="3">已经发货</p>
<p *ngSwitchCase="4">已经签收</p>
<p *ngSwitchDefault>无效订单</p>
</span>
6.[ngClass]、[ngStyle]
<ul>
<li *ngFor="let item of lists; let key=index" [ngClass]="{'red':key==0, 'orange':key==1, 'blue':key==2}">
{{key}}---{{item.title}}
</li>
</ul>
<p style="color:red">我是一个p标签</p>
<p [ngStyle]="{'color':'blue'}">我是一个p标签</p>
<p [ngStyle]="{'color':colorarr}">我是一个p标签</p>
7.管道
管道 是格式化字符串、金额、日期和其它显示数据的好办法。 Angular 发布了一些内置管道,而且你还可以创建自己的管道。
public today:any=new Date();
<p>{{today | date:'yyyy-MM-dd HH:mm:ss'}}</p>
8.事件
public student:string="我是一个学生的属性(数据)";
run(){
alert("这是一个自定义方法");
}
getData(){
alert(this.student)
}
setData(){
this.student="我是改变后的学生属性";
}
runEvent(event:any){
let dom:any=event.target;
dom.style.color="red";
}
<button (click)="run()">执行事件</button>
<br>
<button (click)="getData()">执行方法获取数据</button>
<br>
<button (click)="setData()">执行方法设置数据</button>
<button (click)="getData()">执行方法获取数据</button>
<br>
<button (click)="runEvent($event)">执行方法让字体变红</button>
9.表单事件
keyDown(e:any){
if(e.keyCode==13){
console.log("按了一下回车");
}else{
//e.target 获取dom对象
console.log(e.target.value);
}
}
keyUp(e:any){
if(e.keyCode==13){
console.log(e.target.value);
console.log("回车");
}
}
<input type="text" (keydown)="keyDown($event)">
<br>
<input type="text" (keyup)="keyUp($event)">
重点:10.双向数据绑定–MVVM
先在app.module.ts里面引入FormsModule
import { FormsModule } from '@angular/forms';
<h1>双向数据绑定--MVVM 只是针对表单</h1>
<input type="text" [(ngModel)]='keywords'>
{{keywords}}
三、服务
组件应该聚焦于展示数据,而把数据访问的职责委托给某个服务。
服务是在多个“互相不知道”的类之间共享信息的好办法。
依赖注入
先创建注册所需的服务service
在需要用到该service的组件或者服务里先import,再在构造函数中添加属性参数
再重新构造相应函数
四、路由
跳转、导航
五、从服务端获取数据
先import到根模块AppModule中
在需要的服务service中引入使用
在组件模块中使用服务获取数据
//hero.service.ts
import { HttpClient, HttpHeaders } from '@angular/common/http';
private heroesUrl = 'api/heroes'; // URL to web api
httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
constructor(private http: HttpClient){}
/** GET heroes from the server */
getHeroes(): Observable<Hero[]> {
return this.http.get<Hero[]>(this.heroesUrl);
}
/** POST: add a new hero to the server */
addHero(hero: Hero): Observable<Hero> {
return this.http.post<Hero>(this.heroesUrl, hero, this.httpOptions);
}
//heroes.component.ts
import { HeroService } from '../hero.service';
constructor(private heroService: HeroService) { }
getHeroes(): void {//Observable.subscribe() 是关键的差异点。
this.heroService.getHeroes()
.subscribe((res) => {
console.log(res);
this.heroes = res;
});
}