Angular学习笔记

一、基本操作步骤

参考网站：Angular - 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,再在构造函数中添加属性参数

• 再重新构造相应函数

四、路由

跳转、导航

五、从服务端获取数据

• 启用HttpClient

• 先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;
  });
}