angular脚手架下载以及angular项目的新建

angular脚手架安装命令

npm install -g @angular/cli

angular创建项目命令

npm new  XXXX(项目名)

执行过程中会让用户自己定义配置项
1、Do you want to enforce stricter type checking and stricter bundle budgets in the workspace
是否需要更严格的类型检查和捆绑导入
可以根据自己的需要选择Y或者N
2、Would you like to add Angular routing?是否需要配置路由，这里我们选N，因为至少在项目的前几章内我们不会用到路由
3、Which stylesheet format would you like to use？您想用哪一种样式格式？开发者根据自己的喜好来选择即可。
创建完项目后，切换到项目目录下使用

npm install 

安装依赖

启动angular项目

ng serve --open

初次启动项目时有可能会出现如下一个选项。
Would you like to share anonymous usage data about this project with the Angular Team at
Google under Google’s Privacy Policy at https://policies.google.com/privacy? For more
details and how to change this setting, see https://angular.io/analytics.
大意是你是否愿意分享你在angular上的使用情况给google。根据自己情况选择后就可以正常启动angular项目了。
启动成功后angular会在浏览器中自动弹出项目首页。

angular中的目录结构以及核心文件

目录结构

核心文件

app.module.ts 项目的根模块

app.components.ts 项目入口文件的TS。

如何在angular中创建组件

ng g component xxx(文件夹)/xxx（文件名）

为了使代码结构更加清晰我们一般会将组件创建到一个components文件夹中。

ng g component components/hello

执行以上代码就在src下app中的components文件夹中新建了一个hello组件。通过此方式新建的组件都会在app.module.ts中自动被注册。

注意看到hello组件在app.module.ts中被自动导入并且声明。此时就可以全局使用它。

如何使用组件

刚刚我们说到，app.component是项目的一个根组件，启动页上展示也是根组件html上的内容。我们可以使用我们自己的组件来替换此内容。
首先找到app.component.html文件，可以看到里面有四五百行，不管这么多全部删掉。
然后找到我们自定义的hello组件。找到hello.component.ts，从这个文件中我们可以找到如何使用该组件。

找到这个选择器。然后我们返回根组件的html，将hello组件挂上去。
在app.component.html中输入

<app-hello></app-hello>

此时再打开项目启动页，发现其中展示的已经是我们自定义的hello组件的内容了。

因为此时根组件挂载的就是我们自定义的hello组件，此时就可以修改hello.component.html文件来随心所欲的修改我们想展示的内容了。

Angular基本操作

angular中定义属性

相比较Vue写在data中的数据。angular直接将数据定义在组件所在的类中。

export class HelloComponent implements OnInit {public name:string = 'wxs'constructor() { }ngOnInit(): void {}
}

angular中的数据绑定

使用方法和Vue一样，使用双大括号文本插值法。
在hello.component.ts中添加定义了属性之后此时就可以在hello.component.html中使用文本插值来直接使用这个属性了。

<!-- hello.component.html文件 -->
<p>我的名字是{{name}}</p>

此时再看页面表现

angular中的属性绑定

相比较Vue中的“:”(v-bind)绑定属性，angular中使用"[]"来绑定属性。在组件TS中声明divClass变量

divClass:string = "activeClass"

html文件中属性绑定

<div [class]="divClass">123</div>

此时渲染到实际页面的情况：

将文本解析成html

相对于vue使用v-html，angular使用[innerHtml]

angular中的数据循环

相对于Vue使用的

<div :for='(item,index) in XXX '>

angular使用

<div *ngFor="let item of numberList;let index = index">{{item}}</div>

angular中的条件渲染

相比较Vue使用v-if，v-show。
angular使用

<div [hidden]="show">123</div>

本质是动态的给dom元素加上hidden属性。

ngswitch的使用

一个颇具Angular特色的操作。Vue中只能通过v-if，else-if来侧面实现。但angular实现了一般计算机语言的switch-case语法。

<div [ngSwitch]="switchTest"><div *ngSwitchCase=1>switchTest等于1</div><div *ngSwitchCase=2>switchTest等于2</div><div *ngSwitchCase=108>switchTest等于108</div><div *ngSwitchDefault>默认值</div>
</div>

动态绑定Class及Style

<div [ngClass]="{activeClass: XXX}">ngClass测试
</div>
<!-- XXX为变量名 -->

<div [ngStyle]="{color: XXX}">ngStyle测试
</div>
<!-- XXX为变量名 -->

ngClass和ngStyle的用法基本一致

angular中的管道

相对于Vue中的过滤器。不过angular中自定义了一些过滤器可供开发者直接使用（如，date，json等）。同样也有自定义的管道（这个我没学明白，待补充）

angular中的事件绑定

相对于Vue使用”@“来绑定事件，angular中使用”（）“。

<button (click)="print()">点击我试试</button>

直接在类中定义方法作为click调用的方法。

export class HelloComponent implements OnInit {constructor() { }ngOnInit(): void {}print(){console.log(1111)}
}

如果需要传递事件对象的话使用$event(同Vue)

双向数据绑定

相对于Vue中的v-model。angular则是把属性绑定和事件绑定结合起来用。

<input placeholder="请输入你的名字" [(ngModel)]="modelValue">

angular中的服务

了解的不深，似乎和Vue中的$bus，中央事件总线是一个作用。
为项目中各个组件所使用的服务类。后面讲到组件之间传递参数也可以看到它也用来非父子组件之间的通信。
为了更好的展示它的作用，我们事先创建另一个world组件。

	ng g component components/world

和使用组件一样，使用之前需要先创建一个服务类。

	ng g service service/projectService

执行完以上命令，我们就在app下新建了一个service文件夹，文件夹内新建了一个projectService服务类。
需要在全局使用，首先就需要在全局引入并声明。
同我们使用ng g新建的组件一样，angular在我们新建服务的同时已经帮我们引入并全局提供了这个变量。

可以看到app.module.ts也是将服务类放到了provider中，这说明我们要在组件中使用它也要再次引入一次。provider只是在全局提供了这个服务类。各组件可以按需引入。
在全局配置好服务类后，在现有的hello组件中和world组件中分别导入这个服务类。
服务在组件中的导入和声明

配置完成之后两个组件都可以使用该服务类提供的变量或方法啦。
我们在服务类中定义一个公共方法。

import { Injectable } from '@angular/core';
@Injectable({providedIn: 'root'
})
export class MyStorageService {constructor() {}printUserName(name:string){console.log(`我的名字${name}`);}
}

此时在组件中调用这个公共方法。

ngOnInit(): void {this.storage.printUserName('wxs');}

打印成功

angular中的dom操作

尽管Vue和angular中都不推荐直接操作dom。但还是均提供了直接操作dom的方法。

通过原生JavaScript直接操作dom

<div id='div'>3333</div>

import { Component, OnInit } from '@angular/core';
@Component({selector: 'app-hello',templateUrl: './hello.component.html',styleUrls: ['./hello.component.css']
})
export class HelloComponent implements OnInit {modelValue:string = '12312'constructor() { }ngOnInit(): void {}ngAfterViewInit(){let div:any = document.getElementById('div');div.innerHTML = '123123123123123123'}
}

主要这里的dom操作是放在ngAfterViewInit周期中，关于生命周期在下面的章节会介绍到。

通过ViewChild

使用ViewChild之前需要先引入，引入之后就可以使用这个ViewChild提供的装饰器了。

<div #div>3333</div>

tips:注意如果使用ViewChild，那么dom元素的id要写成以上的形式

import { Component, OnInit } from '@angular/core';
import { ViewChild } from '@angular/core';
@Component({selector: 'app-hello',templateUrl: './hello.component.html',styleUrls: ['./hello.component.css']
})
export class HelloComponent implements OnInit {@ViewChild('div') divElement:anymodelValue:string = '12312'constructor( ) { }ngOnInit(): void {}ngAfterViewInit(){// 原生dom元素放在被修饰元素的nativeElement中console.log(this.divElement.nativeElement);}
}

tips：viewChild不仅可以用来操作dom，更常见的用法用来操作子组件（父子组件传参）

angular组件之间的通信

父组件向子组件传递数据

类似于Vue父组件直接在子组件上绑定数据，在子组件中用props来接收。
angular也是如此，父组件在子组件上绑定属性，子组件使用input来接收（input需要导入）
我们项目中现在已经有了两个组件（hello和world）。我们把world组件挂载到hello组件下使他们成为父子关系。挂载方法之前已经介绍过。和把hello组件挂载到根组件的方法一模一样。
找到world组件的ts文件找到selector属性。

把这个作为dom直接挂到hello组件的html文件中即可

	<!-- hello.component.html文件 --><div #div>3333</div><app-world></app-world>

在父组件中定义一个父组件数据

import { Component, OnInit } from '@angular/core';
@Component({selector: 'app-hello',templateUrl: './hello.component.html',styleUrls: ['./hello.component.css']
})
export class HelloComponent implements OnInit {parentComponentData:string = '我是父组件的数据'constructor( ) { }ngOnInit(): void {}ngAfterViewInit(){console.log();}
}

直接挂载子组件上。
子组件使用父组件数据三部曲
1、导入input
2、使用input修饰器获取父组件传递的数据
3、直接使用

父组件向子组件传递方法

同传递数据一模一样

父组件把自己传递给子组件

比如父组件要传递给子组件很多参数，很多方法。此时不如直接把父组件传递给子组件。子组件就可以直接调用父组件的全部属性和方法了。
传递方法同上，传递时传递this即可

<div #div>3333</div>
<app-world [fathterComponent]='this'></app-world>

子组件向父组件传递参数

之前已经介绍过的ViewChild

import { Component, OnInit } from '@angular/core';
import { ViewChild } from '@angular/core';
@Component({selector: 'app-hello',templateUrl: './hello.component.html',styleUrls: ['./hello.component.css']
})
export class HelloComponent implements OnInit {@ViewChild('worldComponent') worldComponent:anyparentComponentData:string = '我是父组件的数据'constructor( ) { }ngOnInit(): void {}ngAfterViewInit(){console.log(this.worldComponent); // 可以拿到子组件的全部数据}
}

子组件通过output+eventEmit的方法向父组件广播数据。

这个有点类似于Vue在子组件中emit事件，然后在父组件中监听。
angular中稍微复杂一点。
（1）、在子组件中导入output和EventEmitter
（2）、子组件使用output装饰器装饰EventEmitter的实例
（3）、子组件通过EventEmitter实例emmit数据，父组件监听实例获取数据
子组件TS

父组件接受

tips：注意父组件是用$event来接受子组件传递的参数。
这个方法完全可以用之前两种实现。且使用较为复杂。故仅作了解。

非父子组件之间传递参数

使用之前提到的服务来实现

angular组件生命周期及执行顺序

关于angular的生命周期没有深入了解，这里只是做一些搬运工作待以后慢慢消化。

组件类的构造函数（constructor）

constructor是ES6中class中新增的属性，当class类实例化的时候调用constructor，来初始化类。Angular中的组件就是基于class类实现的，在Angular中，constructor用于注入依赖。
组件的构造函数会在所有的生命周期钩子之前被调用，它主要用于依赖注入或执行简单的数据初始化操作。

ngOnInit

在第一次 ngOnChanges 执行之后调用，并且只被调用一次。它主要用于执行组件的其它初始化操作或获取组件输入的属性值。
在Angular第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。
使用ngOnInit()有两个原因：
a：在构造函数之后马上执行复杂的初始化逻辑
b：在Angular设置完输入属性之后，对该组件进行准备。

ngOnChanges

当数据绑定输入属性的值发生变化的时候，Angular 将会主动调用 ngOnChanges 方法。它会获得一个 SimpleChanges 对象，包含绑定属性的新值和旧值，它主要用于监测组件输入属性的变化。当Angular（重新）设置数据绑定输入属性时响应。 该方法接受当前和上一属性值的SimpleChanges对象。
当被绑定的输入属性的值发生变化时调用，首次调用一定会发生在ngOnInit()之前。
（可以这样理解，刚开始数据绑定时数据还没有初始化好，当数据初始化好之后就会触发ngOnChanges）

ngOnDestory

在指令被销毁前，将会调用 ngOnDestory 方法。它主要用于执行一些清理操作，比如：移除事件监听、清除定时器、退订 Observable 等。
当Angular每次销毁指令/组件之前调用并清扫。 在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏。
在Angular销毁指令/组件之前调用。
一些清理逻辑必须在Angular销毁指令之前运行，把它们放在ngOnDestroy()中。这是在该组件消失之前，可用来通知应用程序中其它部分的最后一个时间点。这里是用来释放那些不会被垃圾收集器自动回收的各类资源的地方。 取消那些对可观察对象和DOM事件的订阅。停止定时器。注销该指令曾注册到全局服务或应用级服务中的各种回调函数。 如果不这么做，就会有导致内存泄露的风险。

ngDoCheck

当组件的输入属性发生变化时，将会触发 ngDoCheck 方法。我们可以使用该方法，自定义我们的检测逻辑。它也可以用来加速我们变化检测的速度。
检测，并在发生Angular无法或不愿意自己检测的变化时作出反应。
在每个Angular变更检测周期中调用，ngOnChanges()和ngOnInit()之后。

ngAfterContentInit

在组件使用 ng-content 指令的情况下，Angular 会在将外部内容放到视图后用。它主要用于获取通过 @ContentChild 或 @ContentChildren 属性装饰器查询的内容视图元素。
当把内容投影进组件之后调用。第一次ngDoCheck()之后调用，只调用一次。

ngAfterContentChecked

在组件使用 ng-content 指令的情况下，Angular 会在检测到外部内容的绑定或者每次变化的时候调用。
每次完成被投影组件内容的变更检测之后调用。ngAfterContentInit()和每次ngDoCheck()之后调用

ngAfterViewInit

在组件相应的视图初始化之后调用，它主要用于获取通过 @ViewChild 或 @ViewChildren 属性装饰器查询的视图元素。
初始化完组件视图及其子视图之后调用。第一次ngAfterContentChecked()之后调用，只调用一次。

ngAfterViewChecked

组件每次检查视图时调用
每次做完组件视图和子视图的变更检测之后调用。
ngAfterViewInit()和每次ngAfterContentChecked()之后调用。
说实话，搬运完这些东西之后还是一脸懵。需要时间好好消化。
附上某课程的总结
钩子中带有init的只会执行一次，带有checked的在数据变化时会就会被执行。所以可以在这些checked钩子里做一些自定义的事件。（好像类似于VUE的watch）其中ngOnchanges在父组件传入子组件的值改变时触发。

angular中的rx.js异步编程

传统解决程序异步的几种方案
1、回调函数
2、发布订阅模式
3、promise（ES6）

rx.js 基本使用

这一章主要介绍的是angular中采用的Rx.js方案。
使用起来和promise简直一毛一样好家伙。。。
首先我们来随手写一个promise例子。

<button (click)='sendAjaxRequest()'>点击我发送ajax请求</button>

sendAjaxRequest(){this.getJSON().then(res=>{console.log(res)});}getJSON(){return new Promise((resolve,rejects)=>{setTimeout(() => {resolve('json数据')},2000);})}

我们在sendAjaxRequest方法中获取json数据。两秒后成功获取json数据后打印到控制台

学习过promise可以知道，promise新建后一定会执行，不可取消，且从pending状态变更到resolve状态或者rejected状态之后不可以再次变化这就意味着它只能返回一次数据。相比较之下Rx.js有以下优势。
1、Rx.js执行之后可以中途取消
2、Rx.js可以多次返回
而使用方法除了和promise关键字不同之几乎一毛一样。我们来把上述用promise实现的例子改为用Rx.js来实现。

import { Component, OnInit } from '@angular/core';
import { ViewChild } from '@angular/core';
import { Observable } from 'rxjs'
@Component({selector: 'app-hello',templateUrl: './hello.component.html',styleUrls: ['./hello.component.css']
})
export class HelloComponent implements OnInit {@ViewChild('worldComponent') worldComponent:anyparentComponentData:string = '我是父组件的数据'constructor( ) { }ngOnInit(): void {}ngAfterViewInit(){}sendAjaxRequest(){this.getJSON().subscribe((data:any)=>{console.log(data)});}getJSON(){return new Observable((observe:any)=>{setTimeout(() => {observe.next('JSON数据')},2000);})}
}

promise —> Observable
resolve,reject —> observe
resolve(json) —> observe.next(json)
promise().then —> observe().subscribe

Rx.js如何取消

let streem = this.getJSON().subscribe((data: any) => { console.log(data) })streem.unsubscribe();

tips:注意此处一定是将subscribe的结果给unsubscribe掉。

Rx.js多次返回值

多次返回只需要把上例中的setTimeout换成setInterval即可。

angular中的前后端数据交互

首先应该app.module.ts项目根TS文件中引入HttpClientModule模块。

同样的，需要在使用到的组件内部引入。
使用步骤

post请求相比较get请求需要多设置一个请求头

sendAjaxRequest() {const options = {headers:new HttpHeaders({'Content-Type':'application/json'})}this.http.get(url,data,options).subscribe((data:any) => {console.log(data);})}

angular中的路由

路由的作用：路由是根据url地址的不同，动态的将不同的组件挂载到根页面中以达到单页面应用展示不同的页面的目的。
由于之前我们安装的项目是不选择路由的。学习到这一章我们需要新建一个带路由的项目（新建项目时是否配置路由选择Y）。
我们打开带有路由配置的项目目录。打开app.module.html文件可以看到代码最后一行多了一个

	<router-outlet></router-outlet>

类似于Vue的router-view。作为路由分发的出口

在路由文件（app-routing.module.ts）中配置路由

开始学习路由之前的基础准备工作是新建了三个组件（home，news，goods），且为了更好的观察效果，可以把app.component.html文件中全部删除，只留下一个路由分发出口
在路由文件中首先需要引入需要配置路由的组件
路由的具体配置也和Vue中的路由大同小异。
配置都需要一个属性path来指定对应的Url，还需要一个component来指定url对应的组件。路由文件最终配置如下。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { GoodsComponent } from './components/goods/goods.component'
import { HomeComponent } from './components/home/home.component'
import { NewsComponent } from './components/news/news.component'
const routes: Routes = [{path:'home',component:HomeComponent
},{path:'news',component:NewsComponent
},{path:'goods',component:GoodsComponent
}];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})
export class AppRoutingModule { }

配置成功之后我们就可以在浏览器中查看效果了。

路由跳转

没有项目会让用户直接修改url来达到切换页面的目的，同样的，我们需要三个跳转按钮来实现页面跳转功能。
angular中可以在a标签中使用routerLink来实现路由跳转
在app.component.module中编辑如下标签。

<a [routerLink]="['/home']" >跳转到首页</a>
&nbsp;
<a [routerLink]="['/goods']">跳转到新闻</a>
&nbsp;
<a [routerLink]="['/news']">跳转到商品</a>
<router-outlet></router-outlet>

此时再来看看页面效果

默认路由

实现了我们想要的效果，但是似乎还有一些小问题。比如我们刚开始进项目页面时，路由对应的是空，则路由分发出口没有显示任何页面。这样是不太符合用户操作习惯的。我们需要配置一个默认页面。当用户访问到没有配置路由地址的页面时自动跳转到默认页面。
默认路由配置方法很简单

{path: '**',redirectTo:'home'
}

tips：这里的’**‘指代的是任意路由。也正因为它指代的是任意路由，也限制了它只能成为路由配置项的最后一项，当前面的路由都没有没匹配中时就会匹配中最后一项的默认路由，跳转到home页

路由选中样式

如果某路由被选中了。angular提供了被选中类。用法是在routerLink后加上

<a [routerLink]="['/home']" routerLinkActive='actived'>跳转到首页</a>
&nbsp;
<a [routerLink]="['/goods']" routerLinkActive='actived'>跳转到新闻</a>
&nbsp;
<a [routerLink]="['/news']" routerLinkActive='actived'>跳转到商品</a>

这样被选中的a标签就会被angular打上我们自定义的类名actived

路由之间传值

在项目中，通过路由传值的场景是很常见的。
测试准备工作：新建一个新闻详情组件。先对新闻组件内容稍作修改。使得点击新闻组件中的链接可以跳转到新闻详情中。
新建新闻详情组件

ng g component components/newsDetail

在路由中配置新闻详情

{path: 'newsDetail',component: NewsDetailComponent
},

修改news组件内容
html

<div  *ngFor="let item of newsList"><a [routerLink]="['/newsDetail']" routerLinkActive="router-link-active">{{item.newsTitle}}</a>
</div>

TS

import { Component, OnInit } from '@angular/core';@Component({selector: 'app-news',templateUrl: './news.component.html',styleUrls: ['./news.component.scss']
})
export class NewsComponent implements OnInit {constructor() { }newsList:Array<any> = []ngOnInit(): void {for (let i = 0;i<10;i++){this.newsList.push({newsTitle:`这是第${i}条新闻的标题`,newsContent:`这是第${i}条新闻的内容`})}}
}

完成这些步骤我们就可以自由的进入新闻详情页啦。

但是在此我们看到，不论是第几条新闻，进入的好像是同一个新闻详情页。也就是说新闻详情页面不知道该展示哪一条新闻详情的内容。这时候就需要用到路由传值了。
路由传值介绍两种方式，第一种：通过Get传值
将新闻组件的html文件改写如下就可以使用get传值

<div  *ngFor="let item of newsList;let index = index"><a [routerLink]="['/newsDetail']" [queryParams]='{newsId:index}' routerLinkActive="router-link-active">{{item.newsTitle}}</a>
</div>

此时可以看到参数已经通过GET方法正常传递了

传递参数成功之后下一步必然是在新闻详情组件中接受此参数。
接受参数方法如下
首先需要引入ActivatedRoute ，在构造函数声明之后方可使用。

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'
@Component({selector: 'app-news-detail',templateUrl: './news-detail.component.html',styleUrls: ['./news-detail.component.scss']
})
export class NewsDetailComponent implements OnInit {constructor(public router:ActivatedRoute) { }ngOnInit(): void {this.router.queryParams.subscribe((data) => {console.log(data)})}
}

tips：注意通过get传递的是一个被Rx.js封装过的对象。需要通过subscribe来调用！

第二种方法：通过动态路由传值
这个方法需要先在路由中进行配置

{path: 'newsDetail/:newsId',component: NewsDetailComponent
}

动态路由在html中就不是通过queryParams传值了。

<div  *ngFor="let item of newsList;let index = index"><a [routerLink]="['/newsDetail',index]"  routerLinkActive="router-link-active">{{item.newsTitle}}</a>
</div>

页面效果

传值成功！
这种方法接受参数的方式和之前一毛一样。只不过把queryParams换成了params。

this.router.params.subscribe((data) => {console.log(data)})

使用JavaScript实现路由跳转

在实际项目中不是每一次路由跳转都是由用户点击链接产生的。有很多情况下我们需要使用js来实现页面跳转。比如在用户支付之后我们需要帮用户自动跳转到订单详情等等。
新闻组件html页加上一个button

<button (click)='go2newsDetail()'>点击我跳到新闻详情页</button>

ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router'
@Component({selector: 'app-news',templateUrl: './news.component.html',styleUrls: ['./news.component.scss']
})
export class NewsComponent implements OnInit {constructor( public router:Router ) { }newsList:Array<any> = []ngOnInit(): void {for (let i = 0;i<10;i++){this.newsList.push({newsTitle:`这是第${i}条新闻的标题`,newsContent:`这是第${i}条新闻的内容`})}}go2newsDetail(){this.router.navigate(['/newsDetail',123])}
}

tips:这里需要注意的是，如果跳转的路由配置了动态路由参数，那么使用navigate一定要加参数。否则无法跳转

嵌套路由

（1）、新建嵌套组件
ng g component components/news/newsDetail
tips：既然是嵌套组件，那么我们就把组件新建到他父组件上。这里我把新闻内容组件新建到了新闻组件上
（2）、在路由中配置
在该子路由的直接父路由下添加children属性，其配置项和普通路由一样。
children:[
{
path:‘newsDetail’,
component:NewsDetailComponent
}
]
（3）、具体使用
在父路由页面配置路由分发出口（类似于vue）

至此，原本应该渲染到整个页面的组件就会被渲染到这个指定的路由分发出口了。