创建angular项目

• 第一步：安装脚手架
  npm install -g @angular/cli
• 第二步：ng version 查看ng版本，存在则安装成功
• 第三步：ng new [项目名] 创建angular项目

根模块

• app.moudles.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';@NgModule({declarations: [AppComponent],imports: [BrowserModule,AppRoutingModule],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

1.declarations :全局组件 定义全局组件以后可以全局去使用

2.imports: 引入模块 可以引入路由模块,Http请求模块等（模块主要就是封装组件和服务最后暴露出可用组件）

3.providers:配置全局服务

4.bootstrap:启动组件

定义angular组件

• 使用命令 ng g component component/user

可以使用改命令创建一个component文件夹里面创建一个userComponent组件angular组件

如果使用全局组件 在根模块种去引用组件

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
//引入组件模块
import { UserComponent } from './component/user/user.component';@NgModule({declarations: [AppComponent,UserComponent],imports: [BrowserModule,AppRoutingModule],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

userComponent.ts文件

import { Component, OnInit } from '@angular/core';@Component({selector: 'app-user',//selector html种去引用的名字templateUrl: './user.component.html', //组件的html模板styleUrls: ['./user.component.css'] //组件的style样式
})
/*
template 还可以内嵌到里面 
@Component({selector: 'app-login',template: `<style>input{ width:100px; }</style><div><input #usernameRef type="text"><input #passwordRef type="password"><button (click)="onClick(usernameRef.value, passwordRef.value)">Login</button></div>`,styles: [`:host { margin: 10px; }.mousedown { border: 2px solid green; }input:focus { font-weight: bold; outline: none;}` ]
})
.....
css样式还可以定义在模板里面
*/
export class UserComponent implements OnInit {constructor() { }ngOnInit(): void {}}

app.component.html

<div><app-user></app-user>
</div>

在angular定义属性显示到html模板上

user.Component.ts文件

import { Component, OnInit } from '@angular/core';@Component({selector: 'app-user',templateUrl: './user.component.html',styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {userName: any = "我是张三";address: string = "山东济宁";imagePath: string = "assets/image/abm2.png";innerHtml:string = "<h1>helloword</h1>"dynamicClass: string = "redFont";funcObject: any = {getName() {return "这是一个方法的getname";}};ngOnInit(): void {}constructor() { }ngOnInit(): void {}}

user.component.html

<p>{{userName}}</p>
<div [attr.name]='address'>{{address}}
</div>
<img [src]='imagePath' />
<div>{{funcObject.getName()}} //插值中可以调用属性中的方法
</div>1
<div>{{1+1}} //插值中可以写运算表达式
</div>
<div innerHtml="{{innerHtml}}">
</div>
<div [class]='dynamicClass'>
被动态class控制
</div>
<!-- 使用class.[css中的name] 使用该方式右面的属性必须为boolean值 为true时 又是同级先使用动态class blueFont-->
<div [class.blueFont]='isBlueFont' class='redFont'>这是一个测试文本
</div>

user.component.css

div[address]{background: red;
}.redFont{font-size: 18px;color:red;
}.blueFont{font-size:20px;color:blue;
}

1.在div上添加自定义属性name必须用[attr.name]来添加name属性

2.如果添加标签种已有属性 比如 div 种的 title 和img种的src可以直接[title]=‘address’ [src]=‘imagePath’

3.在插值种可以使用类属性种的方法来获取数据比如{{funcObject.getName()}},插值中是可以写表达式比如运算表达式，或者调用表达式等

注意：（模板表达式不能使用全局命名空间中的成员比如window document 和math.random等）

4.可以用innerHtml属性动态插入html到模板html中 innerHtml="{{html}}" 或者使用 [innerHtml]=‘html’

5.使用css绑定值：dynamicClass会被component.ts中的 dynamicClass属性替代为redFont

使用css动态绑值的时候可以dynamicClass=“fontRed font18px”可以使用这种方式 复制给组件属性，模板解析到dynamicClass会被把这个属性替换掉

使用class.[css中的name] 使用该方式右面的属性必须为boolean值 为true时 又是同级先使用动态class blueFont

<div [class.blueFont]='isBlueFont' class='redFont'>这是一个测试文本
</div>

angular触发事件

    <button (click)='clickAlert()'>点击触发弹出事件</button>

clickAlert为userComponent中的方法点击后触发改事件

<button (click)='clickAlert($event)'>点击触发弹出事件</button>
<button (click)='clickAlert=$event'>点击触发弹出事件</button>

如果点击事件需要要一个事件对象 在clickAlert中将$event传递进去

    (input)='inputName=$event.target.value'//将event数据直接赋值给inputName<input type="text" placeholder='请输入数据' (input)='onInputEvent($event)'/><select (change)='onChangeEvent($event)'><option value="0">山东</option><option value="1">北京</option><option value="2">上海</option></select>//

注意(这里的触发事件必须加()执行 不像vue一样可以直接写onInputEvent事件名)

在angular中事件绑定还可以使用前缀事件绑定比如在事件前面加on-click等

<input type="text" placeholder='请输入数据' on-input='onInputEvent($event)'/><select on-chnage='onChangeEvent($event)'><option value="0">山东</option><option value="1">北京</option><option value="2">上海</option></select>

angular中的双向数据绑定

使用双向绑定必须在根模块里面去定义ngFormModel模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UserComponent } from './component/user/user.component';
//引入formsModule模块
import { FormsModule } from '@angular/forms';@NgModule({declarations: [AppComponent,UserComponent],imports: [BrowserModule,AppRoutingModule,//引入formsModule模块FormsModule],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

然后在需要绑定的表单上使用指令[(ngModule)]=‘属性名’

 <input type='tel' [(ngModel)]='userTel' placeholder="请输入手机号" value=''>

这样既可以完成双向数据绑定

这种方式只可以完成一个数据绑定 如果当数据变化的时候需要处理一些逻辑可以使用下面这种方式

    <input type='text' [ngModel]='ngModuleP1' (ngModelChange)='ngModuleListener($event)'/>ngModuleListener(e){ //e不是事件对象 是输入的新值console.log(this.ngModuleP1);console.log(e)console.log('ngModuleListener....')}

这种方式可以监听数据的改变，进行对数据处理

双向数据绑定还可以使用前缀的方式进行定义

 <input type='tel' bindon-ngModel='userTel' placeholder="请输入手机号" value=''>

同于[(ngModel)]=’’

angular中的指令

• ngClass

setClasses(){return {fontRed:false,fontBlue:rue}
}<div [ngClass]='setClasses()'>被ngclass控制</div>

• ngStyle

  ngStyleData: any = {"font-size": "30px",color: "yellow",width: "1000px"};<div [ngStyle]='ngStyleData'>这是被ngStyle控制的样式</div>

• ngIf ngSwitch ngFor

//*ngIfngIfBoolea: boolean = true;<div *ngIf="ngIfBoolea">这是一个被*ngIf控制的数值</div>----------------------------------------------//[ngSwitch]ngSwitchValue: string = "data2";ngSwitchData1: string = "data1";ngSwitchData2: string = "data2";ngSwitchData3: string = "data3";<span [ngSwitch]='ngSwitchValue'><span *ngSwitchCase='ngSwitchData1'>比尔盖茨(data1)</span><span *ngSwitchCase='ngSwitchData2'>拉里艾力绅(data2)</span><span *ngSwitchCase='ngSwitchData3'>码云</span><span *ngSwitchDefault>扎克伯格</span></span>输出拉里埃利什-----------------------------------------------------//*ngForngForArray:Array<string> =['数据1','数据2','马云','拉里埃利什','王健林','扎克伯格']<ul ><li *ngFor="let data of ngForArray;let i=index">第{{i}}名:{{data}}</li></ul>

• ngFor性能优化NgForTrackBy指令

在angular中不存在就地复用的原则 也就是数据改变Dom也每次跟着改变
如果需要提升渲染的性能可以采用以下这种方式

trackByData(index:number,data:string){return data.id
}<div *ngFor='let data of datas;trackBy:trackByData'>

使用这种方式如果数据没有发生变化就不会去重新构建Dom

• 指令的骚操作

可以在指令中直接去操作class style

<div [style.color]='blueColor'>这个是一个指令的测试文本</div>
<div [class.isbk]='isbk'>这个是一个指令的测试文本</div>

ngModel的使用

• 定义ngForm局部变量

定义的ngForm局部变量只能在html模板中去获取数据例如

    <form #ngContactForm='ngForm'><label for='ngName'>输入姓名</label><input name='ngName' type="text" [(ngModel)]='ngFormUserName'/><br/><label for='ngAge'>输入年龄</label><input name='ngAge' type="text" [(ngModel)]='ngFormUserAge'><button type="button" (click)='getFormData()'>点击获取Form数据</button><div>数据:{{ngContactForm.value.ngAge}}</div></form>

• ngContactForm.value

是一个对象 value是整个form的值，获取某个控件的值需要.name获取属性

比如使用ngContactForm.value.ngAge 或者 ngContactForm.value.ngName获取

• ngContactForm.valid

追踪表单状态，当所有控件都有效时contactForm.valu返回为ture

ngModelGroup指令

该指令可以生成一个对象 使用concatForm.value获取改对象

 <h1>ngModelGroup指令</h1><form #concatForm='ngForm'><fieldset ngModelGroup='nameGroup' #nameGroup='ngModelGroup'><label for='firstName' >姓:</label><input type="text" name='firstName' [(ngModel)]='ngMGConcatData.user.firstName'/><label for='lastName' >名字:</label><input type="text" name='lastName' [(ngModel)]='ngMGConcatData.user.lastName'></fieldset><fieldset ngModelGroup='addressGroup' #addressGroup='ngModelGroup'><label for='province' >省:</label><input type="text" name='province' [(ngModel)]='ngMGConcatData.address.province'/><label for='city' >市区:</label><input type="text" name='city' [(ngModel)]='ngMGConcatData.address.city'/></fieldset><button type="button" (click)='getNameFroupData(concatForm.value)'>点击获取formdata</button><div>{{concatForm.value.nameGroup}}</div></form>

可以获取对象

{addressGroup:city: "济南"province: "山东"nameGroup:firstName: "陈"lastName: "默默"
}

angular表单验证

• 1.使用表单验证需要在跟模块引入reactiveFormsModule

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { UserComponent } from "./component/user/user.component";
//引入ReactiveFormsMudle
import { FormsModule, ReactiveFormsModule } from "@angular/forms";import { ValidFormComponent } from "./component/valid-form/valid-form.component";@NgModule({declarations: [AppComponent, UserComponent, ValidFormComponent],//注入到跟模块imports: [BrowserModule, AppRoutingModule, FormsModule, ReactiveFormsModule],providers: [],bootstrap: [AppComponent]
})
export class AppModule {}

• 2.在验证组件模块中定义FormGroup

valid-form.component.ts

import { Component, OnInit } from "@angular/core";import { validUserAccount } from "../../utils/FormValidUtils";
import { FormControl, FormGroup, Validators } from "@angular/forms";
@Component({selector: "app-valid-form",templateUrl: "./valid-form.component.html",styleUrls: ["./valid-form.component.css"]
})
export class ValidFormComponent implements OnInit {pwdRegExp = new RegExp("xxy[0-9]+mima");validPwd = (c: FormControl) => {return this.pwdRegExp.test(c.value)? null: {data: {valid: false,errorMsg: "密码格式不正确"}};};constructor() {}customForm = new FormGroup({loginAccount: new FormControl("", [Validators.required,Validators.minLength(4),validUserAccount]),loginPwd: new FormControl("", this.validPwd)});ngOnInit(): void {}doLogin(data) {console.log(data);}
}

valid-form.component.html

<div><h1>验证表单</h1><form [formGroup]='customForm' ><div><label for='loginAccount' >用户名</label><input name='loginAccount' formControlName='loginAccount' type="text" placeholder="请输入用户名" /><label style='color:red;margin-left:10px' *ngIf='customForm.get("loginAccount").dirty && customForm.get("loginAccount").errors'>{{customForm.get('loginAccount').errors.data.errorMsg}}</label></div><div><label for='loginPwd'>密码</label><input type="password" name='loginPwd'  formControlName='loginPwd' placeholder="请输入密码" /><label style='color:red;margin-left:10px' *ngIf='customForm.get("loginPwd").dirty && customForm.get("loginPwd").errors'>{{customForm.get('loginPwd').errors.data.errorMsg}}</label></div><button (click)='doLogin(customForm)'>登陆</button><div>{{customForm}}</div></form>
</div>

• Angular支持的内置validate属性：

  required- 设置表单控件值是非空的

  email - 设置表单控件的格式是email

  minlength - 设置表单控件值的最小长度

  maxlength - 设置表单控件长度的最大值

  pattern - 设置表单控件的值需匹配 pattern 对应的模式

• 通过表单控件的.valid判断验证结果，其结果状态：

  valid - 有效

  invalid - 无效

  pristine - 表单值未改变

  dirty - 表单值已改变

  touched - 表单控件已被访问过

  untouched- 表单控件未被访问过

angular管道（vue中的过滤器）

angular中的管道类似于vue中的过滤器可以在html模板插值表达式中使用

使用方式 | 符号来进行分割

angular中又很多内置管道

比如

DatePipe	日期管道，格式化日期
JsonPipe	将输入数据对象经过JSON.stringify()方法转换后输出对象的字符串
UpperCasePipe	将文本所有小写字母转换成大写字母
LowerCasePipe	将文本所有大写字母转换成小写字母
DecimalPipe	将数值按特定的格式显示文本
CurrentcyPipe	将数值进行货币格式化处理
SlicePipe	将数组或者字符串裁剪成新子集
PercentPipe	将数值转百分比格式

使用方法

<p>pipes-demo works!</p>
<h1>angular管道
</h1><h3>date管道</h3>
<div>{{pipeDate | date:'y-MM-dd hh:mm:ss'}}</div>
<h3>json格式化 管道 </h3>
<div>{{pipeJsonData | json}}</div>
<h3>decimalg小数处理管道</h3>
<div>{{pipeDecimalData | number : '3.1-2'}}<br />{{pipeDecimalData2 | number : '1.2-3' | decimalLinkPipe}}
</div>

这里重点说一下Decimal这个管道

取值为3.1-2这个意思是整数部分最少1位 不足前面补0 小数部分最少1位最大2位 如果最少位数不足 后面补0

• (管道可以重叠使用比如前面的decimal格式化的整数数据大于3位会有,号使用自定义管道将它过滤掉)

{{pipeDecimalData2 | number : '1.2-3' | decimalLinkPipe}}

• 自定义管道

1. 首先定义管道

import { Pipe, PipeTransform } from "@angular/core";@Pipe({name: "decimalLinkPipe"
})export class DecimalLinkPipe implements PipeTransform {transform(value: any, ...args: any[]) {return value.replace(",", "");}
}

这里面transform有两个参数 value和args

• value 要被处理的数据 比如 {{ “100,123.00” | decimalLinkPipe ‘aaaa’ }}

• args 这里的’aaaa’当参数传递给args

2. 第二部将管道引用到Module中 下面引用给全局模块中

将管道引用到declarations中

import { SexPipe } from "./pipe/SexPipe";
import { DecimalLinkPipe } from "./pipe/DecimalLinkPipe";
import { PureDataTransform } from "./pipe/PurePipeTransform";@NgModule({declarations: [SexPipe,DecimalLinkPipe,PureDataTransform],imports: [BrowserModule, AppRoutingModule, FormsModule, ReactiveFormsModule],providers: [],bootstrap: [AppComponent]
})
export class AppModule {}

3.第三步就可以在html模板 插值 中去使用自定义的管道了

<h3>自定义 管道 </h3>
<div>{{PSex | sexPipe}}
</div>
<button (click)='changeSex()'>改变性别
</button>
<h3>自定义非纯管道 </h3>
<div>{{purePipeData | pureDataTransform}}
</div>
<button (click)='changePurePipeData()'>改变 非纯管道数据</button>

• 纯管道和非纯管道

• 纯管道
  当这个管道是一个对象时 如果改变这个管道对象里的值 比如 一个array 我们只改变对象里的数据调用 push shift unshift pop等操作时 对象内容改变管道并不会去调用 也就是这个数组的值还是之前所看到的 只有array引用改变数据才会改变，才会去调用管道transform方法

• 非纯管道

解决数据内容改变 不调用transform的问题 可以使用以下方式定义

import { Pipe, PipeTransform } from "@angular/core";@Pipe({name: "pureDataTransform",pure: false
})
export class PureDataTransform implements PipeTransform {transform(value: any, ...args: any[]) {return ("姓名:" +value.userInfo.userName +" | 年龄 | " +value.userInfo.age +" | 地址 | " +value.userInfo.address);}
}

设置 pure: false 则可以实现对象里内容发生改变 也会调用transform方法

（angular内置管道 DatePipe是一个纯管道 也就是必须改变date的引用数据才会重新格式化）

自定义属性指令

首先去定义自定义指令

import { Directive, ElementRef, Input } from "@angular/core";@Directive({selector: "[colorDirective]"
})
export class ColorDirective {@Input("ccDirective")set backgroundColor(color) {this.setStyle(color);}private el: HTMLElement;constructor(el: ElementRef) {this.el = el.nativeElement;this.setStyle("yellow");}setStyle(color) {this.el.style.background = color;}
}

ngModule中去引入

....
import { ColorDirective } from "./directive/ColorDirective";@NgModule({declarations: [ColorDirective],imports: [BrowserModule, AppRoutingModule, FormsModule, ReactiveFormsModule],providers: [],bootstrap: [AppComponent]
})
export class AppModule {}

html模板中去定义

<div>自定义属性指令
</div><div colorDirective>这是一个指令div
</div><div colorDirective [ccDirective]='color'>带参数的指令
</div><button (click)='changeColor("red")'>改变颜色(红色)
</button><button (click)='changeColor("blue")'>改变颜射(蓝色)
</button>

注意:如果定义一个传值的属性指令 必须再指令的对象中中去@Input(“ccDirective”)
然后在html模板中这样用

<div colorDirective  [ccDirective]='color'>带参数的指令
</div>

colorDirective 指令的name值

@Directive({
selector: “[colorDirective]”
})

ccDirective 为 @Input(“ccDirective”)
可以补去定义input的值 那它的值是

input的名字 backgroundColor

如果@Input 和 @Directive 名字一致可以直接写成[colorDirective]=‘color’

 @Input("ccDirective")set backgroundColor(color) {this.setStyle(color);}

如果监听数据变化 过滤器可以设置一个set属性 来检测变化

• 在指令类里面可以监听事件 如下

import { Directive, ElementRef, Input, HostListener } from "@angular/core";@Directive({selector: "[colorDirective]"
})
export class ColorDirective {@Input("ccDirective")set backgroundColor(color) {this.setStyle(color);}private el: HTMLElement;constructor(el: ElementRef) {console.log(el);this.el = el.nativeElement;this.setStyle("yellow");}//监听被指令修饰的元素点击事件@HostListener("click")onClick() {console.log("click");this.el.style.background = "pink";}setStyle(color) {this.el.style.background = color;}
}

在@Component({
selector: “div[app-directive-demo]”,
}）或者@Directive({
selector: “ul[app-directive-demo]”,
}
中都可以灵活去写选择器像jquery一样

Host宿主指令

• HostListener(“click”)

该宿主指令可以去监听一个事件 通常实现在自定义指令当中
也可以去监听一些 windows的事件写在组件里面

@HostListener("window:resize",["event.target"])onWindowResize(){........................}

• HostBinding(“attr.role”) role:string=‘button’
• HostBinding(“style.color”) styleColor:string=’’
• HostBinding(“class.isbg”) isbg:boolean=true

如果用在自定义指令上,该种方可以设置该指令的一些class和自定义属性和 style样式

以上的方式可以使用元组属性host来替代

@Directive({selector: 'button[counting]',host: {'(click)': 'onClick($event.target)','role': 'button','[class.isbg]': 'isbg','[style.color]': 'styleColor',}
})
export class CountClicks {numberOfClicks = 0;onClick(btn: HTMLElement) {console.log('button', btn, 'number of clicks:', this.numberOfClicks++);}
}

angular中的依赖注入 Provider

• 在angular中为了对象与对象解耦合使用依赖注入的方式进行解耦

比如一个loggerService服务对象需要注入到组件中需要@injecttable()方式去声明

import {Injectable} from '@angular/core'@injectable()
export class LoggerService {log(message:string){console.log(message);}
}
}

• 在组件中@component({Provide:[LoggerService]})
  去引用,或者可以在模块中去引用

@ngModule({....providers:[LoggerService]....
})
export class AppModule

然后可以在组件中的constructor里面去声明注入

@Component({selector: "app-ngrx-demo",templateUrl: "./ngrx-demo.component.html",styleUrls: ["./ngrx-demo.component.css"]
})
export class NgrxDemoComponent implements OnInit {count$: Observable<number>;constructor(private loggerService:LoggerService }>) {loggerService.log('helloword')}}

• 可以使用 父类声明 子类实现的方式去 注入

{provider:Render , useClass:domRender},
{provider:Render , useClass:CanvasRender}

• 可以使用工厂模式去注册

两个参数是deps:[loggerService]传递过来的
useFactory是一个工厂方法
function contactFactory(loggerService,userSrevice){return new ConcatSrevice(loggerService,userService)
}{ provider:ConcactService,useFactory:contactFactory,deps:[loggerservice,UserService] }

• 依赖注入是有层级的 比如A组件注入 A实例 在B组件中注入A实例 两个实例不是相同对象

angular状态管理ngrx的使用

https://segmentfault.com/a/1190000017566273?utm_source=tag-newest#item-1-6