angular7學習分享入門篇(一)

時間 2019-11-10

標籤 angular7 angular 學習分享入門欄目 AngularJS 简体版

原文原文鏈接

Angular7入門總結篇

1、Angular 介紹

根據項目數統計 angular(1.x 、2.x 、4.x、5.x、6.x、7.x)是如今網上使用量最大的框架
Angualr 基於 TypeScript 和 react、vue 相比, Angular 更適合中大型企業級項目。

目前 2018 年 11 月 25 日 angular 最新版本 angular7.x。根據官方介紹， Angular 每過幾個月就會更新一個版本。此教程一樣適用於後期更新的 Angular8.x、 Angular9.x

學習 Angular 必備基礎css

必備基礎: html 、 css 、 js、 es6、 Typescript

2、Angular 環境搭建及建立項目

1 環境搭建

1. 安裝 nodejshtml

安裝 angular 的計算機上面必須安裝最新的 nodejs--注意安裝 nodejs 穩定版本

</article>vue

用 augury查看 component結構，更方便調試

2.3 目錄結構分析

app目錄（重點）node

app目錄是咱們要編寫的代碼目錄。咱們寫的代碼都是放在這個目錄。
一個 Angular程序至少須要一個模塊和一個組件。在咱們新建項目的時候命令行已經默認生成出來了

app.component.ts：這個文件表示組件，
組件是Angular應用的基本構建模塊，能夠理解爲一段帶有業務邏輯和數據的Html
咱們來看看app.component.ts中的代碼，並解釋下代碼的意義

2.4 Angular cli

1. 建立新組件 ng generate component component-namereact

ng g component components/header 指定生成到哪一個目錄

該命令會把生成的組件，添加到 src/app/app.module.ts 文件中 @NgModule 的 declarations 列表中聲明css3

3、angular組件及組件裏的模板

3.1 建立angualr組件

1. 建立組件es6

ng g component components/header

2. 使用組件web

<app-header></app-header>

3.2 Angular 綁定數據

1. 數據文本綁定編程

定義數據幾種方式

<h1>{{title}}</h1>

2. 綁定HTMLjson

this.h="<h2>這是一個 h2 用[innerHTML]來解析</h2>"

<div [innerHTML]="h"></div>

3.3 聲明屬性的幾種方式

public 共有（默認）能夠在類裏外使用
protected 保護類型只能在當前類和子類中使用
private 私有類型只能在當期類使用

3.4 綁定屬性

用 []包裹

<div [id]="id" [title]="msg">調試工具看看個人屬性</div>

3.5 數據循環 *ngFor

1. *ngFor 普通循環

export class HomeComponent implements OnInit {

  arr = [{ name: 'poetries', age: 22 }, { name: 'jing' , age: 31}];
  constructor() { }

  ngOnInit() {
  }

}

<ul *ngIf="arr.length>0">
      <li *ngFor="let item of arr">{{item.name}}- {{item.age}}</li>
</ul>

2. 循環的時候設置 key

<ul>
<li *ngFor="let item of list;let i = index;"> <!-- 把索引index賦給i -->
     {{item}} --{{i}}
</li> </ul>

3. template 循環數據

<ul>
  <li template="ngFor let item of list">
{{item}}
</li> </ul>

3.6 條件判斷 *ngIf

<p *ngIf="list.length > 3">這是 ngIF 判斷是否顯示</p>

<p template="ngIf list.length > 3">這是 ngIF 判斷是否顯示</p>

3.7 *ngSwitch

<ul [ngSwitch]="score">
<li *ngSwitchCase="1">已支付</li>
<li *ngSwitchCase="2">訂單已經確認</li> <li *ngSwitchCase="3">已發貨</li>
<li *ngSwitchDefault>無效</li>
</ul>

3.8 執行事件 (click)=」getData()」

<button class="button" (click)="getData()"> 點擊按鈕觸發事件
</button>
<button class="button" (click)="setData()"> 點擊按鈕設置數據
</button>

getData(){ /*自定義方法獲取數據*/ //獲取
  alert(this.msg);
} 
setData(){
    //設置值
    this.msg='這是設置的值';
}

3.9 表單事件

<input
type="text"
(keyup)="keyUpFn($event)"/>

<input type="text" (keyup)="keyUpFn($event)"/>

keyUpFn(e){
    console.log(e)
}

3.10 雙向數據綁定

<input [(ngModel)]="inputVal">

注意引入: FormsModule

import {FormsModule} from '@angular/forms'

NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    NewsComponent
  ], 
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<!--使用-->
<input type="text" [(ngModel)]="inputValue"/> {{inputValue}}

3. 11 [ngClass]、[ngStyle]

1. [ngClass]:

<div [ngClass]="{'red': true, 'blue': false}"> 
    這是一個 div
</div>

public flag=false;

<div [ngClass]="{'red': flag, 'blue': !flag}">
這是一個 div </div>

public arr = [1, 3, 4, 5, 6];

<ul>
<li *ngFor="let item of arr, let i = index"> <span [ngClass]="{'red': i==0}">{{item}}</span>
</li> </ul>

2. [ngStyle]:

<div [ngStyle]="{'background-color':'green'}">你好 ngStyle</div>

public attr='red';

<div [ngStyle]="{'background-color':attr}">你好 ngStyle</div>

3.12 管道

public today=new Date();

<p>{{today | date:'yyyy-MM-dd HH:mm:ss' }}</p>

其餘管道

angular中的管道( pipe)是用來對輸入的數據進行處理，如大小寫轉換、數值和日期格式化等
angular中的管道(pipe) 以及自定義管道適用於angular4 angualr5 angualr6 angular7

經常使用的管道（pipe）有

1. 大小寫轉換

<!--轉換成大寫-->
<p>{{str | uppercase}}</p>

<!--轉換成小寫-->
<p>{{str | lowercase}}</p>

2. 日期格式轉換

<p>
{{today | date:'yyyy-MM-dd HH:mm:ss' }}
</p>

3. 小數位數

接收的參數格式爲 {最少整數位數}.{最少小數位數}-{最多小數位數}

<!--保留2~4位小數-->

<p>{{p | number:'1.2-4'}}</p>

4. JavaScript 對象序列化

<p>
    {{ { name: 'semlinker' } | json }}
</p> 
<!-- Output: { "name": "semlinker" } -->

5. slice

<p>{{ 'semlinker' | slice:0:3 }}</p> 
<!-- Output: sem -->

6. 管道鏈

<p>
{{ 'semlinker' | slice:0:3 | uppercase }}
</p> 

<!-- Output: SEM -->

7. 自定義管道

自定義管道的步驟：

使用 @Pipe 裝飾器定義 Pipe 的 metadata 信息，如 Pipe 的名稱 - 即 name 屬性
實現 PipeTransform 接口中定義的 transform 方法

7.1 WelcomePipe 定義

import { Pipe, PipeTransform } from '@angular/core';

[@Pipe](/user/Pipe)({ name: 'welcome' })

export class WelcomePipe implements PipeTransform {
  transform(value: string): string {
    if(!value) return value;
    if(typeof value !== 'string') {
      throw new Error('Invalid pipe argument for WelcomePipe');
    }
    return "Welcome to " + value;
  }
}

7.2 WelcomePipe 使用

<div>
   <p ngNonBindable>{{ 'semlinker' | welcome }}</p>
   <p>{{ 'semlinker' | welcome }}</p> <!-- Output: Welcome to semlinker -->
</div>

4、Angular 中的服務

4.1 服務

定義公共的方法，使得方法在組件之間共享調用

1. 建立服務命令

ng g service my-new-service

# 建立到指定目錄下面
ng g service services/storage

2. app.module.ts 裏面引入建立的服務

// app.module.ts 裏面引入建立的服務

import { StorageService } from './services/storage.service';

// NgModule 裏面的 providers 裏面依賴注入服務

NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    NewsComponent,
    TodolistComponent
], imports: [
    BrowserModule,
FormsModule
  ],
  providers: [StorageService],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 使用的頁面引入服務，註冊服務

import { StorageService } from '../../services/storage.service';

constructor(private storage: StorageService) {

 }

// 使用

addData(){
     // alert(this.username);
    this.list.push(this.username); 
    this.storage.set('todolist',this.list);
}
removerData(key){
    console.log(key); 
    this.list.splice(key,1); 
    this.storage.set('todolist',this.list);
}

5、Dom 操做以及@ViewChild、執行 css3 動畫

1. Angular 中的 dom 操做(原生 js)

ngAfterViewInit(){
var boxDom:any=document.getElementById('box'); boxDom.style.color='red';
}

2. Angular 中的 dom 操做(ViewChild)

import { Component ,ViewChild,ElementRef} from '@angular/core';

@ViewChild('myattr') myattr: ElementRef;

<div #myattr></div>

ngAfterViewInit(){
let attrEl = this.myattr.nativeElement;
}

3. 父子組件中經過 ViewChild 調用子組件的方法

調用子組件給子組件定義一個名稱

<app-footer #footerChild></app-footer>

引入 ViewChild

import { Component, OnInit ,ViewChild} from '@angular/core';

ViewChild 和剛纔的子組件關聯起來

@ViewChild('footerChild') footer

在父組件中調用子組件方法

run(){ 
    this.footer.footerRun();
}

6、Angular 父子組件以及組件之間通信

6.1 父組件給子組件傳值-@input

父組件不只能夠給子組件傳遞簡單的數據，還可把本身的方法以及整個父組件傳給子組件

1. 父組件調用子組件的時候傳入數據

<app-header [msg]="msg"></app-header>

2. 子組件引入 Input 模塊

import { Component, OnInit ,Input } from '@angular/core';

3. 子組件中 @Input 接收父組件傳過來的數據

export class HeaderComponent implements OnInit {
  @Input() msg:string

  constructor() { }

  ngOnInit() {
  }
}

4. 子組件中使用父組件的數據

<p>
  child works!
  {{msg}}
</p>

5. 把整個父組件傳給子組件

經過 this傳遞整個組件實例

<app-header [home]="this"></app-header>

export class HeaderComponent implements OnInit {
  @Input() home:any

  constructor() { }

  ngOnInit() {
  }
}

執行父組件方法 this.home.xxx()

6.2 子組件經過@Output 觸發父組件的方法（瞭解）

1. 子組件引入 Output 和 EventEmitter

import { Component, OnInit ,Input,Output,EventEmitter} from '@angular/core';

2. 子組件中實例化 EventEmitter

@Output() private outer=new EventEmitter<string>(); /*用EventEmitter和output裝飾器配合使用 <string>指定類型變量*/

3. 子組件經過 EventEmitter 對象 outer 實例廣播數據

sendParent(){
  // alert('zhixing');
  this.outer.emit('msg from child')
}

6.4 非父子組件通信

公共的服務
Localstorage (推薦)
Cookie

7、Angular 中的生命週期函數

7.1 Angular中的生命週期函數

官方文檔: https://www.angular.cn/guide/lifecycle-hooks

生命週期函數通俗的講就是組件建立、組件更新、組件銷燬的時候會觸發的一系列的方法。
當 Angular 使用構造函數新建一個組件或指令後，就會按下面的順序在特定時刻調用這些生命週期鉤子方法。
每一個接口都有惟一的一個鉤子方法，它們的名字是由接口名再加上ng前綴構成的，好比OnInit接口的鉤子方法叫作ngOnInit.

1. 生命週期鉤子分類

基於指令與組件的區別來分類

指令與組件共有的鉤子

ngOnChanges
ngOnInit
ngDoCheck
ngOnDestroy

組件特有的鉤子

ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked

2. 生命週期鉤子的做用及調用順序

一、ngOnChanges - 當數據綁定輸入屬性的值發生變化時調用
二、ngOnInit - 在第一次 ngOnChanges 後調用
三、ngDoCheck - 自定義的方法，用於檢測和處理值的改變
四、ngAfterContentInit - 在組件內容初始化以後調用
五、ngAfterContentChecked - 組件每次檢查內容時調用
六、ngAfterViewInit - 組件相應的視圖初始化以後調用
七、ngAfterViewChecked - 組件每次檢查視圖時調用
八、ngOnDestroy - 指令銷燬前調用
3. 首次加載生命週期順序

export class LifecircleComponent {

    constructor() {

        console.log('00構造函數執行了---除了使用簡單的值對局部變量進行初始化以外，什麼都不該該作')
    }

    ngOnChanges() {

        console.log('01ngOnChages執行了---當被綁定的輸入屬性的值發生變化時調用(父子組件傳值的時候會觸發)'); 
    }

    ngOnInit() {
        console.log('02ngOnInit執行了--- 請求數據通常放在這個裏面');
    }
    ngDoCheck() {
        console.log('03ngDoCheck執行了---檢測，並在發生 Angular 沒法或不肯意本身檢測的變化時做出反應');
    }
    ngAfterContentInit() {
        console.log('04ngAfterContentInit執行了---當把內容投影進組件以後調用');
    }
    ngAfterContentChecked() {
        console.log('05ngAfterContentChecked執行了---每次完成被投影組件內容的變動檢測以後調用');
    }
    ngAfterViewInit() : void {
        console.log('06 ngAfterViewInit執行了----初始化完組件視圖及其子視圖以後調用（dom操做放在這個裏面）');
    }
    ngAfterViewChecked() {
        console.log('07ngAfterViewChecked執行了----每次作完組件視圖和子視圖的變動檢測以後調用');
    }

    ngOnDestroy() {
        console.log('08ngOnDestroy執行了····');
    }

    //自定義方法
    changeMsg() {

        this.msg = "數據改變了";
    }
}

7.2.7 ngAfterViewInit()--掌握

初始化完組件視圖及其子視圖以後調用。第一次 ngAfterContentChecked() 以後調用，只調用一次。在這裏能夠操做 DOM

7.2.9 ngOnDestroy()--掌握

當 Angular 每次銷燬指令/組件以前調用並清掃。在這兒反訂閱可觀察對象和分離事件處理器，以防內存泄漏。在 Angular 銷燬指令/組件以前調用。好比：移除事件監聽、清除定時器、退訂 Observable 等。

@Directive({
    selector: '[destroyDirective]'
})
export class OnDestroyDirective implements OnDestroy {
  sayHello: number;

  constructor() {
    this.sayHiya = window.setInterval(() => console.log('hello'), 1000);
  }

  ngOnDestroy() {
     window.clearInterval(this.sayHiya);
  }
}

8、Rxjs 異步數據流編程

8.1 Rxjs介紹

RxJS 是一種針對異步數據流編程工具，或者叫響應式擴展編程;可無論如何解釋 RxJS 其目標就是異步編程，Angular 引入 RxJS 爲了就是讓異步可控、更簡單。
RxJS 裏面提供了不少模塊。這裏咱們主要給你們講 RxJS 裏面最經常使用的Observable 和 fromEvent

目前常見的異步編程的幾種方法:

回調函數
事件監聽/發佈訂閱
Promise
Rxjs

8.3 Rxjs unsubscribe 取消訂閱

Promise 的建立以後，動做是沒法撤回的。 Observable 不同，動做能夠經過 unsbscribe() 方法中途撤回，並且 Observable 在內部作了智能的處理.

Promise 建立以後動做沒法撤回

9、路由

// 引入組件

import { HomeComponent } from './home/home.component';
import { NewsComponent } from './news/news.component';
import { NewscontentComponent } from './newscontent/newscontent.component';

// 配置路由
const routes: Routes = [
  {path: 'home', component: HomeComponent},
  {path: 'news', component: NewsComponent},
  {path: 'newscontent/:id', component: NewscontentComponent},
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
} ];