Angular2瞎看
介紹
學習angular的相關點，完全不用理會是不是真的某某網 Σ( ° △ °|||)︴
項目gitee地址
@angular/cli
npm i @angular/cli -g全局安裝；
ng new my-project新建項目
cd my-project進入目錄
ng serve或npm start啓動本地務器，預覽
新建模塊
ng generater component componet/my-component -t -s --skip-tests
簡寫：ng g c component/my-component -t -s --skip-tests文件夾下新建模塊
構造器和週期鉤子
constructor(){}，ngOnInit(){}，？？？
例如：constructor(private http:HttpClient){},注入this.http請求模塊
指定數據類型
a:string
b:number
c:any
d:Array<any> = []
e:{f:number,g:string}
h:Object = {}或h = {}
fn:EventEmit = new EventEmit()
自定義類(數據類)
ng g class data/my-class必須全拼“class”,ts文件中定義數據的類型或默認值
ng g interface data/my-interface只指定數據結構類型，不用默認值
數據綁定
- 單向綁定：渲染數據：
bind-、[]、{{}} - 事件綁定：輸入數據:
on-click="fn()"、(click)="fn()"，函數必帶“()” - 雙向綁定：數據:
[(ngModel)]="val"
[(ngModle)]根模塊/路由模塊需引入FormsModule
元素類綁定
[class]='data'class="btn {{<三目判斷>}}"，只能寫在一個“class”中才不會被覆蓋[class.active="<trueOrFalse>"][ngClass]={activd:<trueOrFalse>,focues:<trueOrFalse>}
元素屬性綁定
- 隱性屬性（css屬性）：
[style.font-size.px]="14"，[style.width.px]="14" - 顯性屬性（元素屬性）：
[attr.title]="val",[attr.width.px]="14"，必須指定爲“attr”，不與隱性屬性混淆 - 自定義標記符：
#keyword，關鍵字必須和已有屬性名區別
遍歷、判斷
*ngFor="let item of Array"，只能用於數組
*ngIf="boolean else <#name>"，用<ng-template #name>包裹else的元素
根模塊引入
BrowserModule，根模塊/路由模塊需引入CommonModule
事件
-
原生事件
<input (click)="log($event.target.value)">，原生事件傳入log函數
<input #it (click)="log(#it.value)">，#標記後傳入log函數 -
自定義事件
定義函數名：update:EventEmit<String> = new EventEmit()，或簡寫update = new EventEmit()
觸發鉤子：this.update.emit(data)，傳參數據
組件接收：<ng-input (update)="log(data)"></ng-input>
組件通信
@input() <data_name>、@output() <data_name_change> = newe EventEmit()，導入、導出
==> <input [data_name]="val" (data_name_change)="log()"> ,???
public，private關鍵字
scope ？, 髒檢查？
跨組件通信:服務和依賴注入DI
-
(單例)服務：創建數據類，以共享數據和功能(函數)
ng g s service/my-service -
依賴注入管理服務：組件中使用“單例”，依賴注入
例如：constructor(private api:ApiService){},注入api服務
單例數據默認全局共享，也可模塊中單獨聲明“新的”單例作用域不共享，或創建模塊作用域的(單例)服務
管道符filter
- 自帶：slice、currency、lowercase、uppercase、orderBy、filter
- 自定義：
ng g pipe filters/limitTo，需要引入"AppModule"和"ngModule"的根模塊/路由模塊下, - 純管道和非純管道：
pure:<false/true>，“非”會檢測內部數組/對象
自定義module：
ng g module myModule/pipe
路由
示例：
import { NgModule } from '@angular/core';
import {RouterModule, Routes} from '@angular/router'
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { LimitToPipe } from './pipe/limit-to.pipe';
import { HomeComponent } from './page/home/home.component';
import { JopDetailComponent } from './page/jop-detail/jop-detail.component';
import { AdminbaseComponent } from './page/admin/adminbase/adminbase.component';
import { AdminJobComponent } from './page/admin/job/job.component';
//(子)路由配置，(根/子路由)重定向
const routes:Routes = [
{path:"",redirectTo:"home",pathMatch:"full"},
{path:"home",component:HomeComponent},
{path:"jopdetail/:id",component:JopDetailComponent},
{path:"admin",redirectTo:"admin/job",pathMatch:"full"},
{path:"admin",component:AdminbaseComponent,
children:[
{path:"job",component:AdminJobComponent},
]
},
]
//自定義filters引入，路由配置導出
@NgModule({
declarations: [
HomeComponent,
JopDetailComponent,
AdminbaseComponent,
AdminJobComponent,
LimitToPipe
],
exports:[RouterModule],
imports: [
CommonModule,
FormsModule,
RouterModule.forRoot(routes),
]
})
export class AppRoutingModule {}
再app.nodule.ts引入AppRoutingModule；
只在app.module.ts根模塊中引入
BrowserModule
組件模塊中獲取“路由傳參”：
//AdminComponent.ts
export class AdminComponent implements OnInit {
constructor(private route:ActivedRoute ) {
this.route.paramMap.subscribe(r=>{
console.log(r)
})
//或
this.route.queryParamMap.subscribe(r=>{
console.log(r)
})
}
ngOnInit() {}
}
模塊中使用模板：
錨點：<a routeLink="<path_name>">path</a>
容器：<router-outlet></router-outlet>
傳參？跳轉？(權限)守衛？
抽離模塊
創建(單例)服務，模塊注入數據和功能(方法)：ng g s <s_name>，“@Injectable”依賴注入共享；
創建(父級)模塊，子級繼承數據和功能(方法)：ng g c <p_name>，extends繼承父級模塊，且可以子級複寫覆蓋；
ng-UI庫
npm i bootstrap，’/src/style.css’中導入import "~bootstrap"，全局使用bootstrap庫
ng表單驗證
示例：
<input type="text"
name="val" [(ngModel)]="val"
#inputVal="ngModel"
(change)="log(inputVal)"
required minLength="3" pattern="Re">
<div *ngIf="inputVal.touched && inputVal.invalide">
<div *ngIf="inputVal.errors.requied">必填</div>
<div *ngIf="inputVal.errors.minLength">不小於3位</div>
<div *ngIf="inputVal.errors.pattern">正則規則不符合</div>
</div>
name和ngModel綁定數據，#標記表單控件，required和minLength自帶驗證規則，錨點“inputVal”可以獲取到(自動驗證)信息
HttpClientModule
根模塊引入HttpClientModule，組件中注入http:HttpClient
this.http.post(url,data,{header:{...}}).subscribe(r=>{...})
RxJs：ReactiveX.js
一切都是時間(事件)線Observable的處理，Observable => next() => complete()
文檔：我教Rx寫文檔 —— biaoyansu