前端知識(shí)點(diǎn)總結(jié)——Angular

BaronZhang 發(fā)布于2019-08-22 16:01 / 2747人閱讀

摘要：前端知識(shí)點(diǎn)總結(jié)一概述基于命令行的開(kāi)發(fā)方式編譯工作集成了打包工具。。。。在瀏覽器中接管展現(xiàn)應(yīng)用的內(nèi)容，并根據(jù)我們提供的操作指令響應(yīng)用戶的交互。在開(kāi)發(fā)時(shí)，八大組成部分模塊組件模板自帶的標(biāo)簽指令綁定相關(guān)的的語(yǔ)法元數(shù)據(jù)告訴如何處理一個(gè)類(lèi)。

前端知識(shí)點(diǎn)總結(jié)——Angular

一、Angular概述

基于命令行的開(kāi)發(fā)方式？

①hot reload
②編譯工作
③集成了webpack打包工具
。。。。

angular.cn 中文
angular.io 正式官網(wǎng)
angular.cn/guide/styleguide 風(fēng)格指南

1、what？

angular是一個(gè)Google推出的js框架，是以模塊為基本單位，模塊又可以包含組件、指令、過(guò)濾器。。

1.1 版本問(wèn)題
    angular angular2.0以后所有的版本統(tǒng)稱(chēng)為angular
    (當(dāng)前學(xué)習(xí)ng4.0)

    angular.js angular1.* 統(tǒng)稱(chēng)為angular.js
    （http://www.runoob.com/angularjs/angularjs-tutorial.html）

1.2 版本之間的區(qū)別
    ①新版本是有組件的概念的
    ②老版本是$scope和controller為主
    ③angular引入了rxjs
    ④angular采用ts（typescript是es6的超集，是由微軟和谷歌） ts是一種強(qiáng)類(lèi)型檢查機(jī)制的語(yǔ)言
    ⑤angular可讀性、提高了代碼的復(fù)用率、維護(hù)成本變低。。。

2、where

    可以使用支持angular的Ionic框架來(lái)實(shí)現(xiàn)移動(dòng)端的開(kāi)發(fā)，直接使用angular來(lái)實(shí)現(xiàn)pc端的開(kāi)發(fā)

    實(shí)現(xiàn)操作比較頻繁的SPA

3、why

①遵循w3c所推出的webComponent標(biāo)準(zhǔn)（組件化）
②代碼具有更好的可讀性和可維護(hù)性、
③引入了更多的高效率的工具 ，比如rxjsimmutable.js。。。， 讓代碼的編譯、部署更簡(jiǎn)單
④ts --》 健壯

4、how

angular的開(kāi)發(fā)整體框架，是有8大組成部分構(gòu)成

搭建環(huán)境的方式：
方式1：
    ①下載quickstart-master.zip壓縮包
    https://github.com/angular/quickstart download
    或者 直接拷貝老師提供的壓縮包
    ②解壓縮 壓縮包，進(jìn)入對(duì)應(yīng)的目錄中
    執(zhí)行npm install 安裝項(xiàng)目所需要用到的依賴(lài)
    ③npm start 啟動(dòng)開(kāi)發(fā)服務(wù)器

方式2：
    Angular CLI是一個(gè)命令行界面工具，它可以創(chuàng)建項(xiàng)目、
    添加文件以及執(zhí)行一大堆開(kāi)發(fā)任務(wù)，比如測(cè)試、打包和發(fā)布。
    //安裝基于angular的命令工具
    npm install -g @angular/cli
    //創(chuàng)建一個(gè)有著ng模板的項(xiàng)目
    ng new my-app
    //進(jìn)入當(dāng)前目錄下的my-app
    cd my-app
    //啟動(dòng)開(kāi)發(fā)服務(wù)器
    ng serve --open

二、Angular模板項(xiàng)目的啟動(dòng)流程

index.html

main.js (main.ts)-->啟動(dòng)一個(gè)模塊 AppModule

app/app.module.ts ---> 啟動(dòng)一個(gè)組件 app/app.component.ts

Hello Angular

三、完成組件的創(chuàng)建和使用

1、創(chuàng)建組件和使用組件
    ①創(chuàng)建文件 app/test/test.component.ts
    ②將類(lèi)裝飾成一個(gè)組件類(lèi)
        import {Component} from "@angular/core"
    
        @Component({
            selector:"test",
            template:`it is a test`
        })

        export class Demo01Component{
        }
    ③使用組件
        ①到模塊中聲明
            app.module.ts中，
            import {TestComponent} from "./test/test.component"

            @NgModule({
                declarations:[TestComponent]
            })
        ②

    練習(xí)：（16:50 - 17:00）
        demo02/demo02.component.ts
        組件中渲染一個(gè)無(wú)序列表（5個(gè)列表）

        將組件渲染AppComponent

四、Angular中常見(jiàn)的指令

1、循環(huán)指令
Vue :  

Angular: 
        語(yǔ)法：
   
   

2、選擇指令
Vue: 
angular:

五、常見(jiàn)指令

指令和組件的關(guān)系：

組件就是一個(gè)帶有模板的指令?。?！

1、多重分支判斷

vue 
    v-if
    v-else-if
    v-else

2、屬性綁定

Vue:
    
    
    
    

Angular:

3、事件綁定

Vue
    
    
Angular
    語(yǔ)法：
    
    舉例：

4、雙向數(shù)據(jù)綁定

Vue:
    
Angular:
    

依賴(lài)注入：
    將依賴(lài)的東西注入到指定的地方，讓依賴(lài)可被使用
    舉例：AppModule依賴(lài)于FormsModule,
    只需要在AppModule的imports數(shù)組寫(xiě)上FormsModule名稱(chēng)
    就可以使用FormsModule所提供的東西。
    好處：解耦，降低了耦合度


Angular中如果想要監(jiān)聽(tīng)雙向數(shù)據(jù)綁定數(shù)據(jù)的變化，提供一個(gè)事件 ngModelChange

注意事項(xiàng)：
①Angular中如果要想使用雙向數(shù)據(jù)綁定，就必須指定模塊依賴(lài)于FormsModule
②使用ngModelChange事件時(shí)，通過(guò)$event去傳遞用戶當(dāng)前所輸入的信息
    （ngModelChange）="handleChange($event)"

內(nèi)置的指令：

*ngFor
*ngIf
*ngSwitchCase
*ngSwitchDefault
ngSwitch
[]
()
[(ngModel)]
{{}}

5、自定義指令

Vue中自定義指令：
    Vue.directive("change",{
        bind:function(el,binding){},
        update:function(){},
        unbind:function(){}
    });
    v-change
Angular中指令創(chuàng)建和使用

5.1 創(chuàng)建
    import {Directive}    from "@angular/core"

    @Directive({
        selector:"[test]"
    })

    export class TestDirective{
    }

5.2 使用
    ①到模塊中聲明
        app.module.ts
            import {TestDirective} from "***"
            @NgModule({
                declarations:[TestDirective]
            })
    ②作為標(biāo)簽的屬性
        

5.3 得到調(diào)用指令的元素
    ①import {ElementRef} from "@angular/core"
    ②實(shí)例化
        constructor(private el:ElementRef){}
    ③讀取元素
        this.el.nativeElement

5.4 指令調(diào)用時(shí)傳參？？
    ①
    ②在指令類(lèi)的內(nèi)部
        import {Input} from "@angular/core"

        @Input() test="";

        this.test

補(bǔ)充：使用生命周期的處理函數(shù)？
    ①引入
        import {OnDestroy} from "@angular/core"
    ②在定義類(lèi)的時(shí)候 實(shí)現(xiàn)接口類(lèi)
        export class Test implements OnDestroy{
            ngOnDestroy(){}
        }

六、組件之間通信

Vue中組件通信的方式？
    ①props down
        步驟1：發(fā)送
            
        步驟2：接收
            Vue.component("son",{
                props:["myName"]
            })
    ②events up（子-》父）
        步驟1: 事件的綁定
            methods:{
                rcvMsg:function(msg){}
            }
            
        步驟2：事件的觸發(fā)（兒子）
            this.$emit("customEvent",123);
    ③$refs $parent
    ④bus
Angular中組件通信？
    1、props down
        步驟1：發(fā)送
        
        步驟2：接收
            import {Input} from "@angular/core"
            @Input() uName="";
            this.uName
    2、events up
        步驟1：事件和處理函數(shù)的綁定
            定義一個(gè)方法
                rcvMsg(msg){}
            
            
        步驟2：觸發(fā)事件
            子組件觸發(fā)
                import {Output,EventEmitter} from "@angular/core"

                @Output() toFatherEvent = new EventEmiiter();

                this.toFatherEvent.emit("123");

我們是這樣寫(xiě) Angular 應(yīng)用的：

用 Angular 擴(kuò)展語(yǔ)法編寫(xiě) HTML 模板， 
用組件類(lèi)管理這些模板，
用服務(wù)添加應(yīng)用邏輯， 
用模塊打包發(fā)布組件與服務(wù)。

七、管道（pipe）

管道是用來(lái)對(duì)數(shù)據(jù)進(jìn)行篩選、過(guò)濾、格式化

Vue中過(guò)濾器：
    {{expression | filter(1,2) | filter2 }}

    Vue.filter("changeSex",function(arg,arg1,arg2){
        return 處理后的結(jié)果
    })

angular中管道：

過(guò)濾器的本質(zhì)就是一個(gè)有參數(shù)有返回值的方法
    
    語(yǔ)法:
            
            {{expression | pipe1:"12":34 | pipe2}}
            
    
    1、內(nèi)置管道
        
        常見(jiàn)內(nèi)置管道：
            uppercase/lowercase/date/number/slice

    2、自定義管道
        創(chuàng)建一個(gè)自定義管道：
            import {Pipe,PipeTransform} from "@angular/core"

            @Pipe({
                name:"testNG"
            })

            export class TestPipe implements PipeTransform {
                    //value是豎杠前表達(dá)式執(zhí)行的結(jié)果
                    //args通過(guò)調(diào)用管道時(shí)，冒號(hào)后邊跟的參數(shù)
                 transfrom(value:any,...args:[]):any{
                    return ‘處理后的結(jié)果’
                 }
            
            }
        
        調(diào)用：
            ①聲明
                到模塊中先引入再聲明
            ②調(diào)用
                和內(nèi)置管道的用法是一樣的,同樣支持傳參、多重過(guò)濾

八、服務(wù) (依賴(lài)注入)

服務(wù) service:服務(wù)的本質(zhì)是一個(gè)類(lèi)，在服務(wù)類(lèi)中封裝的是經(jīng)常用到的數(shù)據(jù)和方法。

常見(jiàn)的服務(wù)：日志類(lèi)服務(wù)、心跳服務(wù)、網(wǎng)絡(luò)請(qǐng)求服務(wù)。。。

1、服務(wù)的創(chuàng)建和使用
    創(chuàng)建：
        import {Injectable} from "@angular/core"

        @Injectable()
        export class UserService {
            constructor(){}

            checkUserLogin(){return true}
        }

    使用：
        ①需要給服務(wù)指定provider
            在組件中或者模塊中指定providers:[UserService]
        ②調(diào)用
            import {UserService} from "./***"

            constructor(private myService:UserService){}

            this.myService.checkUserLogin()



2、如何封裝一個(gè)網(wǎng)絡(luò)請(qǐng)求的服務(wù)

    ①創(chuàng)建服務(wù)的文件
    ②在服務(wù)中封裝一個(gè)方法
        sendRequest(myUrl:string){
            return  this.http.get(myUrl).map((response)=>
                response.json()
            )
        }
    ③調(diào)用之前 首先指定providers
    ④到組件中，先引入，再實(shí)例化，再調(diào)用
        this.myHS.sendRequest().subscribe((result)=>{
            //result就是服務(wù)器端返回的結(jié)果！
        })
    
    
    與服務(wù)器端通信如果涉及的session，angular需要這么處理：
        客戶端
            ①發(fā)起請(qǐng)求 withCredentials:true
                this.http.get(
        myUrl,
        {withCredentials:true}
        )
        服務(wù)器端：
            ①跨域header("Access-Control-Allow-Origin:http://localhost:3000");
            ②服務(wù)器允許接收憑證
            header("Access-Control-Allow-Credentials:true");


服務(wù)創(chuàng)建和使用：
    1、創(chuàng)建一個(gè)文件 test.service.ts
    2、在文件中編寫(xiě)代碼，裝飾一個(gè)服務(wù)
        @Injectable()
        export class TestService{
            showAlert(msg){
                alert(msg);
            }
        }
    3、    給模塊或者組件,在providers屬性對(duì)應(yīng)的數(shù)組中 [TestService]

    4、組件中要想使用服務(wù)中的方法
        import {TestService} from "***"

        constructor(private myService:TestService){}

        this.myService.showAlert()

Angular中開(kāi)發(fā)模式：

我們是這樣寫(xiě) Angular 應(yīng)用的：
用 Angular 擴(kuò)展語(yǔ)法編寫(xiě) HTML 模板， 
用組件類(lèi)管理這些模板，
用服務(wù)添加應(yīng)用邏輯， 
用模塊打包發(fā)布組件與服務(wù)。

然后，我們通過(guò)引導(dǎo)根模塊來(lái)啟動(dòng)該應(yīng)用。
Angular 在瀏覽器中接管、展現(xiàn)應(yīng)用的內(nèi)容，并根據(jù)我們提供的操作指令響應(yīng)用戶的交互。

在Angular開(kāi)發(fā)時(shí)，八大組成部分：

1、模塊
2、組件
3、模板 自帶的html標(biāo)簽+指令、綁定相關(guān)的ng的語(yǔ)法
4、元數(shù)據(jù) 告訴 Angular 如何處理一個(gè)類(lèi)。
5、數(shù)據(jù)綁定
    {{}} () [] [(ngModel)]
6、指令 
        三大類(lèi)：組件、結(jié)構(gòu)型、屬性型
7、服務(wù)
    封裝一些數(shù)據(jù)和方法
8、依賴(lài)注入
    就是將依賴(lài)的服務(wù)、模塊注入到指定組件、模塊中取使用，提供了一種新的實(shí)例化的方式（解耦）

九、路由模塊

路由模塊：建立起url和頁(yè)面之間的映射關(guān)系
1、實(shí)現(xiàn)SPA的基本步驟

Vue：
實(shí)現(xiàn)一個(gè)SPA基本思路：
①指定一個(gè)容器
    
②創(chuàng)建代碼片段
    創(chuàng)建組件
    var Login = Vue.component("login-component",{
        template:`登錄頁(yè)面`
    })
③配置路由詞典
    new Vue({
        router:new VueRouter({
            routes:[
                {path:"/myLogin",component:Login}
            ]
        })
    })
④測(cè)試
    測(cè)試路由詞典中 路由地址能否按照需求 正確加載所需要用到的頁(yè)面

Angular：
①指定容器
    
②創(chuàng)建組件 （聲明）
    @Component({}) export class **
③配置路由詞典
    //a-module-routing
    import {Routes,RouterModule} from "@angular/router"
    import {LoginComponent} from "./demo15_spa/login.component"

    const routes:Routes = [
        {path:"",component:LoginComponent}
        .....
    ]

    @NgModule({
        import:[RouterModule.forRoot(routes)],
        exports:[RouterModule]
    })

    export class AppRoutingModule{}

    找到跟模塊：
        import {AppRoutingModule} from "./app.router"

        @NgModule({
            imports:[AppRoutingModule]
        })
④測(cè)試

2、在Angular實(shí)現(xiàn)組件間的導(dǎo)航的方式

Vue寫(xiě)法：
        ①可以直接修改地址欄（內(nèi)部測(cè)試）
        ②可以通過(guò)js
         this.$router.push("目的地的路由地址")
        ③routerLink
         
Angular：
①直接修改地址欄
②js    
    import {Router} from "@angular/router"
    constructor(private myRouter:Router){}
    this.myRouter.navigateByUrl("url");
③ 



補(bǔ)充：實(shí)現(xiàn)前進(jìn)和后退
    import {Location} from "@angular/common"

    constructor(private myLocation:Location){}

    this.myLocation.back();                this.myLocation.forward();

3、參數(shù)的傳遞

Angular:
    3.1 發(fā)送
        this.myRouter.navigateByUrl("myOC/123");

    3.2 接收
        ① 配置接收方的路由地址
            {path:"myOC"} ==> {path:"myOC/:price"}
        ② 接收參數(shù)
                import {ActivatedRoute} from "@angular/router"

                constructor(private myAR:ActivatedRoute){}

                this.myAR.params.subscribe((result)=>{
                    //result.price
                })
    
    在Angular中 實(shí)現(xiàn)數(shù)據(jù)傳輸?shù)姆绞剑?        ①組件間通信
        ②跳轉(zhuǎn)時(shí)指定參數(shù)
        ③與遠(yuǎn)程服務(wù)器端通信

4、路由嵌套

    可以在SPA中某個(gè)組件中，根據(jù)url嵌套其它的組件
    Vue中實(shí)現(xiàn)方式：
        ①在準(zhǔn)備嵌套其它組件的，指定一個(gè)容器 
        ②配置路由詞典
            {
                path:"",
                component:MailComponent,
                children:[
                    {path:"inbox",component:***}
                ]
            }
    
    Angular中實(shí)現(xiàn)方式：
        ①指定容器
            router-outlet
        ②配置子路由
            {
                path:"mail",
                children:[
                    ...
                ]
            }

        總結(jié)：在Angular中實(shí)現(xiàn)一個(gè)支持路由嵌套的SPA，
        導(dǎo)航到對(duì)應(yīng)的子路由對(duì)應(yīng)的頁(yè)面時(shí)，必須在攜帶父組件的地址
            localhost:3000/mail/outbox
            localhost:3000/mail/inbox

        demo18_embed
            mylogin.component.ts  MyLoginComponent
            mail.component.ts MailComponent
            inbox.component.ts InboxComponent
            outbox.component.ts OutboxComponent
        ①完成組件的創(chuàng)建和聲明

        ②路由模塊

5、路由守衛(wèi)

路由守衛(wèi) RouteGuard，控制是否能夠訪問(wèn)某一個(gè)url中所對(duì)應(yīng)的組件！
    鑒權(quán)的組件
    用戶登錄的頁(yè)面
    。。。

如何使用路由守衛(wèi)：
    ①創(chuàng)建一個(gè)服務(wù)
        import {Injecatable} from "@angular/core"
        import {CanActivate} from "@angular/router"

        @Injectable()
        export class MailGuard implments CanActivate{
        
            canActivate(){
                return true/false
            }
        }
    ②給服務(wù)指定提供商
         providers:[MailGuard]
    ③給路由詞典中想要保護(hù)的路由指定canActivate
            {
                path:"mail",
                canActivate:[MailGuard]
            }

    Vue中如果也想實(shí)現(xiàn)路由守衛(wèi)：
        const router = new VueRouter({ ... })

        router.beforeEach((to, from, next) => {
            // ...
        })

        https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

云服務(wù)器 GPU云服務(wù)器 linux數(shù)據(jù)結(jié)構(gòu)知識(shí)點(diǎn)總結(jié) 位段知識(shí)總結(jié) 前端知識(shí) 前端知識(shí)阿里云

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/93972.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

BaronZhang

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Windows 11 安全配置基線設(shè)置的最終版本已發(fā)布

閱讀 3335·2021-10-11 10:59
數(shù)據(jù)中心布線管理

閱讀 2913·2021-10-11 10:58
介紹2個(gè)有趣的IoT的項(xiàng)目

閱讀 2308·2021-09-04 16:45
電競(jìng)CSGO數(shù)據(jù)API接口 - 【聯(lián)賽列表】API調(diào)用示例代碼

閱讀 2796·2019-08-30 15:44
好看漂亮的html5網(wǎng)頁(yè)特效學(xué)習(xí)筆記(2)_svg實(shí)現(xiàn)不同投票不同表情

閱讀 733·2019-08-30 15:44
CSS里的BFC和IFC的用法

閱讀 3255·2019-08-30 10:51
自定義confirm提示框

閱讀 1659·2019-08-29 18:46
修改placeholder的樣式

閱讀 2814·2019-08-29 13:57

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

前端知識(shí)點(diǎn)總結(jié)——Angular

it is a test

登錄頁(yè)面

相關(guān)文章

**前端每周清單半年盤(pán)點(diǎn)之 Angular 篇**

**前端周報(bào)：前端面試題及答案總結(jié)；JavaScript參數(shù)傳遞的深入理解**

2017個(gè)人總結(jié)

**前端每周清單年度總結(jié)與盤(pán)點(diǎn)**

前端每周清單第 40 期: JS 的 Core 與 Cost，Node 內(nèi)存溢出調(diào)試，Softwar

發(fā)表評(píng)論

0條評(píng)論

BaronZhang

男|高級(jí)講師

TA的文章

Windows 11 安全配置基線設(shè)置的最終版本已發(fā)布

數(shù)據(jù)中心布線管理

介紹2個(gè)有趣的IoT的項(xiàng)目

電競(jìng)CSGO數(shù)據(jù)API接口 - 【聯(lián)賽列表】API調(diào)用示例代碼

好看漂亮的html5網(wǎng)頁(yè)特效學(xué)習(xí)筆記(2)_svg實(shí)現(xiàn)不同投票不同表情

CSS里的BFC和IFC的用法

自定義confirm提示框

修改placeholder的樣式

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

前端知識(shí)點(diǎn)總結(jié)——Angular

it is a test

登錄頁(yè)面

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！