Angular

1.Angular

简单对比三大框架

框架名称	Angular	React	Vue
优点	1.良好的应用程序结构 2.双向数据绑定 3.指令、HTML模板 4.可嵌入、注入、测试…	1.速度快、模块化 2.跨浏览器、兼容性好	1.简单易学 2.异步更新DOM，速度快 3.组件复用高效…
缺点	1.入门容易，深入难 2.官方文档基本只有api，无示例	React(V)+ReactRouter+Flux才能构成完整应用	1.新生儿，生态不够成熟 2.有关Vue的三方库较少
使用情况	较少	最多	较少

2.环境搭建

2.1安装node.js、npm

npm install -g cnpm --registry=https://registry.npm.taobao.org # cnpm可以更快下载包，推荐安装

2.2安装脚手架

npm install -g @angular/cli

2.3创建项目

ng new demo

2.4编译打开运行

ng serve --open

2.5项目结构介绍

• src
  • app：组件和根模块
  • karma.config.js：端到端测试文件
  • polyfills.js：填充库，需要添加 (window as any).global = window

// app.module.ts// 这个文件时angular的根模块，告诉angular如何组装应用
import { BrowserModule } from '@angular/platform-browser'; // 浏览器解析模块
import { NgModule } from '@angular/core'; // angular核心模块
import { AppComponent } from './app.component'; // 根组件
// NgModule装饰器，接受一个对象，告诉angular如何编译和启动应用
@NgModule({declarations: [ // 配置当前模块运行的组件 AppComponent // 根组件],imports: [BrowserModule // 当前项目依赖的其他模块],providers: [],// 配置当前项目所需要的其他服务bootstrap: [AppComponent] // 指定应用的主视图(根组件)，通过引导根AppModule来启动应用，一般是根组件
})
// 不需要暴露任何东西，因为没有模块引用根组件
export class AppModule { }

// app.component.ts// 引入核心模块的component
import { Component } from '@angular/core';
@Component({selector: 'app-root', // 组件的名称templateUrl: './app.component.html', // htmlstyleUrls: ['./app.component.scss'] // css
})
export class AppComponent {title = 'demo1'; // 暴露根组件
}

2.6创建自定义组件

会在app/components/目录下创建news文件夹，包含组件的HTML、style、ts等文件

ng g component components/news

// app.module.tsimport { NewsComponent } from './components/news/news.component' // 引入自定义组件
@NgModule({declarations: [ // 配置当前模块运行的组件 AppComponent, NewsComponent],// ...
})
// 然后在其他组件的HTML使用<app-news></app-news>即可

<!--app.component.html-->
<app-news></app-news>
<!--...-->

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QAkE1kBD-1608216905832)(image-20201215230155951.png)]

3.基本语法

3.1动态属性

<!-- [src]是动态属性，类似Vue中的 :src --><img class ="search" [src]="picUrl" alt="google" width="80px" height="32px">

3.2ngFor、ngSwitch

<!--ngFor、ngSwitch、ngIf、ngClass的用法--><!--ngFor用法-->
<div *ngFor="let item of lists;let key=index"> <!--lists是该组件的ts类中的属性，可以直接读取到，下同--><h4>{{item.title}}</h4><span style="color: lightcoral;">[{{key}}]</span><p>{{item.content}}</p>
</div><!--ngIf用法-->
<div *ngIf="showMore"><h4>Common</h4>
</div><!--ngSwitch用法-->
<div [ngSwitch]="clickCount"><div *ngSwitchCase="1">你居然打老子一巴掌</div><div *ngSwitchCase="2">你居然又打老子一巴掌</div><div *ngSwitchCase="3">你滚！</div><div *ngSwitchDefault>你还没挨老子！</div>
</div><!--ngClass、ngStyle用法-->
<div [ngSwitch]="clickCount" [ngClass]="{'red': clickCount===3}" [ngStyle]="{'font-size': (clickCount*3+16)+'px'}">
</div>

3.3管道

<!--管道用于对数据进行格式化，比如对一个obj使用json管道，就可以在前端页面以json格式显示，最常用处理时间格式--><span style="color: lightcoral;">{{today|date:'yyyy/MM/dd HH:mm:ss'}}</span>
<!--{{ obj | json }}-->

3.4事件

<!--点击事件用法-->
<button (click)="loadMore($event)">Load more</button>
<!--keydown keyup 等等-->

3.5双向数据绑定

// 双向数据绑定需要用到FormsModule模块，因此需要先引入，才能使用// app.module.ts
import { FormsModule} from '@angular/forms'
@NgModule({// ...imports: [BrowserModule,FormsModule // 当前项目依赖的其他模块],// ...
})

 <input type="text" [(ngModel)]="keywords">-{{keywords}}

3.6服务

类似于Vuex或Mixin，封装了多个组件公共使用的东西

ng g service services/store

// app.module.ts 引入并配置服务
import { StoreService } from './services/store.service'; // 根组件
@NgModule({// ...providers: [StoreService],// 配置当前项目所需要的其他服务// ...
})// 例如 home 组件需要用（home.component.ts）
import { StoreService } from '../../services/store.service'; // 先引入
export class HomeComponent implements OnInit {// ...constructor(public store: StoreService) { // 使用public，在类其他地方就可以直接使用了console.log(store);// 官方推荐使用}ngOnInit(): void {// 这个是在指令和组件初始化完成，并不是DOM加载完成// 页面每次刷新都会调用这个函数}// ...
}

3.7DOM操作

• 原生操作DOM（当然不建议）

  <!--home.component.html-->
  <div id="box1" *ngIf="xxx">这个box在ngOnInit()是获取不到的！
  </div>
  

  // home.component.ts
  ngOnInit(): void {// 这个是在指令和组件初始化完成，并不是DOM加载完成// 页面每次刷新都会调用这个函数
  }
  ngAfterViewInit():void{// 这里才可以拿到所有的HTML元素（建议在这里操作DOM）let box:any = document.getElementById('box1')
  }
  

• @ViewChild操作DOM

  <!--home.component.html，需要给box设置#box-->
  <div  #box><h2>您好，angular！</h2>
  </div>
  

  @ViewChild('box') box:any // 拿到id是box的HTML元素，并赋值给box
  ngAfterViewInit():void {console.log(this.box);this.box.nativeElement.style.letterSpacing='2px'
  }
  

3.8父子组件通信

• （子调父）@Input：使得父组件不仅可以给子组件传值，还可以把父组件的方法、甚至父组件传给子组件

  <!--home.component.html-->
  <app-news #homeNews [title]='title' [homeFun]='test' [homeComp]='this'></app-news>
  

  // news.component.ts
  export class NewsComponent implements OnInit {@Input('title') title:any;@Input('homeFun') homeFun:any;@Input('homeComp') homeComp:any// ...ngAfterViewInit():void{this.box.nativeElement.style.letterSpacing='2px'this.homeFun() // 调用home组件方法console.log(this.homeComp); // 父组件}// ...
  

• （父调子）@ViewChild()

  <!--home.component.html-->
  <app-news #homeNews></app-news>
  

  // home.component.ts
  @ViewChild('homeNews') news: any // 拿到子组件 news 
  ngAfterViewInit(): void {console.log(this.news.test()); // 逻辑处理
  }
  

3.9生命周期函数

• ngOnInit()：用来请求数据

• ngAfterViewInit()：DOM操作

• ngOnDestroy()：离开某页面保存数据

3.10异步编程(Rxjs)

RxJS是一个异步编程的库,同时它通过observable序列来实现基于事件的编程（类似于Promise，但是比它更强大）

• 简单使用：先写一个request服务，然后组件调用

  // request.service.ts（服务需要先在根组件引入和注册）
  import { Injectable } from '@angular/core';
  import { Observable } from 'rxjs' // 1.引入类
  @Injectable({providedIn: 'root'
  })
  export class RequestService {constructor() { }getRxjsData(): any {// 2.实例化一个对象，并写逻辑return new Observable((observer: any) => {setTimeout(() => {var data = {name: 'yuwan',age: 22}observer.next(data) // 成功调用// observer.error(msg) 失败调用}, 2000)})}
  }// home.component.ts
  import { RequestService } from '../../services/request.service'; // 引入服务
  @Component({selector: 'app-home',templateUrl: './home.component.html',styleUrls: ['./home.component.scss']
  })
  export class HomeComponent implements OnInit {// ...constructor(public request: RequestService) {}ngOnInit(): void {var resp=this.request.getRxjsData() // 请求数据resp.subscribe((data)=>{console.log(data); // 获取数据})}// ...
  }
  

• 取消订阅：即撤销发送请求（Promise是无法实现的）

  // ...
  var opt=resp.subscribe((data)=>{console.log(data);
  })
  opt.unsubscribe() // 取消逻辑，例如一秒后取消发送
  

• 多次执行：订阅后，可多次执行（Promise是无法实现的）

  // request.service.ts 
  getRxjsData(): any {return new Observable((observer: any) => {let count=0setInterval(() => {count++observer.next(count) // 成功调用// observer.error(msg) 失败调用}, 2000)})}// ...
  var opt=resp.subscribe((data)=>{console.log(data); // 会2秒执行一次
  })
  // ...
  

• 处理数据：如上所示，如果要打印2,4,6…，需要处理数据（管道）

  import { map, filter } from 'rxjs/operators'ngOnInit(): void {var resp = this.request.getRxjsNum() // 先设置管道过滤再打印数据，filter、map resp.pipe(filter((val: any) => {if (val % 2 == 0) {return true}})).subscribe(data => {console.log(data);})
  }
  

3.11数据交互（和服务器打交道）

angular可通过自带与服务器交互的模块HttpClientModule、jsonp（可解决跨域）、axios第三方库等方式

jsonp原理：大概是传一个回调函数去服务端，然后执行拿到数据后，再返回，url格式如http://www.xxx.com/api/goodslist?callback=xxx

// app.module.ts
import { HttpClientModule，HttpClientJsonpModule} from '@angular/common/http' // 引入
@NgModule({ // ...imports: [HttpClientModule,HttpClientJsonpModule // 当前项目依赖的其他模块],// ...
})
// home.component.ts
import { HttpClient,HttpHeaders } from '@angular/common/http' // 引入这个服务
export class HomeComponent implements OnInit {// ...constructor(public http:HttpClient ) {} // 实例化getData():void{ // get方法this.http.get('http://a.itying.com/api/productlist').subscribe(data=>{console.log(data);})}postData(): void { // post方法var headOptions = {headers: new HttpHeaders({'Content-Type': 'application/json'})}this.http.post('url', { username: 'yuwan', password: '123456' }, headOptions).subscribe(...)}getJsonPData(): void { // jsonp方式，其中第二个参数：cb或者callback 由服务端决定this.http.jsonp('url', 'callback').subscribe(resp => {console.log(resp);})}// ...
}

3.12路由

创建项目时，选择安装路由，基本只需要在routes里更改，然后自定义组件即可

<style>
.router-link-active{color:red
}
</style>
<!--导航链接 -->
<span style="margin-left:5px"><a [routerLink]="['/home']"  routerLinkActive="router-link-active"  >Home</a></span>
<span  style="margin-left:5px"><a [routerLink]="['/about']" routerLinkActive="router-link-active" >about</a></span>

// app-routing.module.ts
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
const routes: Routes = [{path: 'home', component: HomeComponent},{path: 'about', component: AboutComponent},{ // 匹配不到路由的时候，默认重定向到 homepath: '**', redirectTo: 'home'},
];

普通路由传参

<!--home.component.html-->
<a [routerLink]="['/news']"  [queryParams]='{aid:123}'>点我跳转</a>

// news.component.ts
import { ActivatedRoute } from '@angular/router'
export class NewsComponent implements OnInit {constructor(public activeRoute: ActivatedRoute) { }ngOnInit(): void {this.activeRoute.queryParams.subscribe(data => {console.log(data);})}
}

动态路由传参

<!--home.component.html-->
<a  [routerLink]="['/news/',123]" >点我跳转</a> <!--传送参数-->

// app-routing.module.ts
const routes: Routes = [// ...{path: 'news/:aid', component: NewsComponent}// ...
];// news.component.ts
export class NewsComponent implements OnInit {constructor(public activeRoute: ActivatedRoute) { }ngOnInit(): void {this.activeRoute.params.subscribe(data=>{ // 接收参数console.log(data);})}
}

普通路由跳转和动态路由跳转

import { Router，NavigationExtras } from '@angular/router'
export class NewsComponent implements OnInit {// ...jump():void{ this.router.navigate(['/news/','1234']) // 动态路由跳转this.router.navigate(['/home']) // 普通路由跳转}jump2():void{ // get方式跳转let queryParams:NavigationExtras={queryParams:{'aid':'1233'}}this.router.navigate(['/news'],queryParams)}
}

嵌套路由

先创建相关组件，再修改app-routing.module.ts

ng g component components/service/request
ng g component components/service/state

// app-routing.module.ts
import { ServiceComponent } from './components/service/service.component';
import { RequestComponent } from './components/service/request/request.component';
import { StateComponent } from './components/service/state/state.component';
{path: 'service',component: ServiceComponent,children: [{path: 'request',component: RequestComponent},{path: 'state',component: StateComponent}]
},

<!--home.component.html--> 
<a [routerLink]="['/service/request']">跳转request</a>
<a [routerLink]="['/service/state']"  >跳转state</a>
<div><router-outlet></router-outlet>
</div>