Angular8基礎(chǔ)知識(shí)點(diǎn)有哪些

這篇文章給大家分享的是有關(guān)Angular8基礎(chǔ)知識(shí)點(diǎn)有哪些的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

目前創(chuàng)新互聯(lián)公司已為近1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、網(wǎng)站托管、服務(wù)器租用、企業(yè)網(wǎng)站設(shè)計(jì)、宜昌網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

Angular CLI又稱 Angular腳手架，用于快速生成項(xiàng)目或者組件的框架以提高效率。可以方便的生成angular app、component、service 等等，并且可以通過參數(shù)，按照自己的需求去創(chuàng)建?？梢哉f是angular開發(fā)必不可少的利器。
參考：https://cli.angular.io/

ng generate: 新建component、service、pipe, class 等
ng new: 新建angular app
ng update: 升級(jí)angular自身，以及依賴
ng version：顯示anuglar cli全局版本、以及本地的angular cli、angular code等的版本
ng add: 新增第三方庫。會(huì)做2件事，1）基于npm安裝node_modules, 2）自動(dòng)更改配置文件，保證新的依賴正常工作

關(guān)于angular的依賴注入（dependency injection）

依賴注入是Angular實(shí)現(xiàn)的一種應(yīng)用程序設(shè)計(jì)模式，是Angular的核心概念之一。

依賴就是具有一系列功能的服務(wù)(service)，應(yīng)用程序中的各種組件和指令（derictives）可能需要服務(wù)的功能。 Angular提供了一種平滑的機(jī)制，通過它我們可以將這些依賴項(xiàng)注入我們的組件和指令中。因此，我們只是在構(gòu)建依賴關(guān)系，這些依賴關(guān)系可以在應(yīng)用程序的所有組件之間注入。

使用依賴注入還有以下好處，

不需要實(shí)例化，（new 實(shí)例）。不需要關(guān)心class的構(gòu)造函數(shù)里需要什么參數(shù)
一次注入（app module通過Providers注入），所有組件都可以使用。而且是用同一個(gè)service實(shí)例（Singleton），也就是說一個(gè)service里的數(shù)據(jù)是共分享的，可以用于組件間數(shù)據(jù)傳遞。

關(guān)于angular的編譯，AOT和JIT的區(qū)別

每個(gè)Angular應(yīng)用程序都包含瀏覽器無法理解的組件和模板。因此，在瀏覽器內(nèi)部運(yùn)行之前，需要先編譯所有Angular應(yīng)用程序。

Angular提供兩種編譯類型：

JIT(Just-in-Time) compilation
AOT(Ahead-of-Time) compilation

區(qū)別在于，在JIT編譯中，應(yīng)用程序在運(yùn)行時(shí)在瀏覽器內(nèi)部進(jìn)行編譯；而在AOT編譯中，應(yīng)用程序在構(gòu)建期間進(jìn)行編譯。
顯而易見，AOT編譯好處多多，因而是Angular的默認(rèn)編譯方式。主要優(yōu)點(diǎn)

由于應(yīng)用程序是在瀏覽器內(nèi)部運(yùn)行之前進(jìn)行編譯的，因此瀏覽器會(huì)加載可執(zhí)行代碼并立即呈現(xiàn)應(yīng)用程序，從而加快了呈現(xiàn)速度。
在AOT編譯中，編譯器將與應(yīng)用程序一起發(fā)送外部HTML和CSS文件，從而消除了對(duì)那些源文件的單獨(dú)AJAX請(qǐng)求，從而減少了ajax請(qǐng)求。
開發(fā)人員可以在構(gòu)建階段檢測并處理錯(cuò)誤，這有助于最大程度地減少錯(cuò)誤。
AOT編譯器將HTML和模板添加到JS文件中，然后再在瀏覽器中運(yùn)行。因此，沒有多余的HTML文件可讀取，從而為應(yīng)用程序提供了更好的安全性。

Angular雙向綁定

Angular雙向綁定的原理

Angular的雙向綁定，通過臟數(shù)據(jù)檢查（Dirty checking）來實(shí)現(xiàn)。

臟值檢測的基本原理是存儲(chǔ)舊數(shù)值，并在進(jìn)行檢測時(shí)，把當(dāng)前時(shí)刻的新值和舊值比對(duì)。若相等則沒有變化，反之則檢測到變化，需要更新視圖。
angular2中有了Zone.js。對(duì)于setTimeout，addEventListener、promise等都在ngZone中執(zhí)行（換句話說，就是被zone.js封裝重寫了），angular并在ngZone中setup了相應(yīng)的鉤子，通知angular2做相應(yīng)的臟檢查處理，然后更新DOM。

Angular雙向綁定效率問題

對(duì)于頁面中需要綁定DOM元素極其多的情況（成百上千），必然會(huì)遇到效率問題。（具體還取決于PC、瀏覽器性能）。另外，臟檢查超過10次（經(jīng)驗(yàn)值？），就認(rèn)為程序有問題，不再進(jìn)行檢查。
可以采用如下方式避免

對(duì)于只用于展示的數(shù)據(jù)，使用單向綁定，而不是雙向綁定；
Angular的數(shù)據(jù)流是自頂而下，從父組件到子組件單向流動(dòng)。單向數(shù)據(jù)流向保證了高效、可預(yù)測的變化檢測。因而組件化也是提高性能的一種手段。
表達(dá)式（以及表達(dá)式所調(diào)用的函數(shù)）中少寫太過復(fù)雜的邏輯
不要連接太長的 pipe（往往 pipe里都會(huì)遍歷并且生成新數(shù)組, pipe 在anglarJS（v1）中叫做filter）
變化檢測策略onPush. Angular有兩種變化檢測策略。Default是Angular默認(rèn)的變化檢測策略，也就是上述提到的臟檢查（只要有值發(fā)生變化，就全部檢查）。開發(fā)者可以根據(jù)場景來設(shè)置更加高效的變化檢測方式：onPush。onPush策略，就是只有當(dāng)輸入數(shù)據(jù)的引用發(fā)生變化或者有事件觸發(fā)時(shí)，組件才進(jìn)行變化檢測。
NgFor應(yīng)該伴隨trackBy方程使用。否則，每次臟值檢測過程中，NgFor會(huì)把列表里每一項(xiàng)都執(zhí)行更新DOM操作。

Angular數(shù)據(jù)綁定的三種方式

<div>
    <span>Name {{item.name}}</span>  <!-- 1. 直接綁定 -->
    <span>Classes {{item | classPipe}}</span><!-- 2. pipe方式-->
    <span>Classes {{classes(item)}}</span><!-- 3.綁定方法調(diào)用的結(jié)果 -->
</div>

直接綁定：大多數(shù)情況下，這都是性能最好的方式。
綁定方法調(diào)用的結(jié)果：在每個(gè)臟值檢測過程中，classes方程都要被調(diào)用一遍。如果沒有特殊需求，應(yīng)盡量避免這種使用方式。
pipe方式：它和綁定function類似，每次臟值檢測classPipe都會(huì)被調(diào)用。不過Angular給pipe做了優(yōu)化，加了緩存，如果item和上次相等，則直接返回結(jié)果。

更多優(yōu)化技巧，參考 angular綁定（臟檢查）方面的性能優(yōu)化技巧

關(guān)于angular的Module

什么是angular的Module

模塊(Module)是一個(gè)我們可以對(duì)組件(Component)，服務(wù)(service)和管道(pipe)進(jìn)行分組的地方。模塊通過導(dǎo)出或隱藏這些元素來決定其他模塊是否可以使用組件，指令等。每個(gè)模塊都使用@NgModule裝飾器定義。

Root Module和Feature Module的區(qū)別。

每個(gè)Angular應(yīng)用程序只能有一個(gè)根模塊(Root Module)，而它可以有一個(gè)或多個(gè)功能模塊(Feature Module)。根模塊導(dǎo)入BrowserModule，而功能模塊導(dǎo)入CommonModule。

Module 延遲加載（Lazy-loading）

當(dāng)一個(gè)項(xiàng)目做得很大后，為了提高首屏加載速度，可以通過Lazy-loading，當(dāng)訪問到某些具體的url時(shí)，才加載那些不常用的feature module。

實(shí)現(xiàn)：正常創(chuàng)建feature module，修改路由配置。例如：

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
  }
];

這樣，編譯后，這個(gè)feature module就會(huì)是一個(gè)獨(dú)立的js，只有當(dāng)用戶訪問url（~/customers）時(shí)，才會(huì)向server端請(qǐng)求這個(gè)獨(dú)立的js，然后加載、執(zhí)行。

參考https://angular.io/guide/lazy-loading-ngmodules

什么是指令（Directive）

指令（Directive）用于添加行為到已有元素（DOM）或者組件（Component）。
同時(shí)，一個(gè)元素或組件，可以應(yīng)用多個(gè)指令。

Promise 和 Observable的區(qū)別

首先新版本的anuglar是推薦使用Observable的(屬于RxJS)，其次，對(duì)于Observable對(duì)象，可以使用.toPromise()轉(zhuǎn)化為Promise對(duì)象。

Promise,無論是否調(diào)用then。promise都會(huì)立即執(zhí)行；而observables只是被創(chuàng)建，當(dāng)調(diào)用(subscribe)的時(shí)候才會(huì)被執(zhí)行。
Promise返回一個(gè)值；Observable返回0至N個(gè)值。所以Promise對(duì)應(yīng)的操作符是.then()，Observable對(duì)應(yīng)的是.subscribe
Observable，還額外支持map，filter，reduce和相似的操作符
Observable 可以取消，Promise不可以

如果提高Angular的性能

Angular也還是網(wǎng)頁應(yīng)用，所以一般的提高網(wǎng)頁西能的技巧都是通用的。針對(duì)Angular，還有一些特殊的優(yōu)化技巧:

AOT編譯。之前提到過不要在客戶端編譯
應(yīng)用程序已經(jīng)最小化（uglify和tree shaking）
去掉不必要的import語句。如果有遺留，那么打包時(shí)也會(huì)打進(jìn)來。
確保應(yīng)用中已經(jīng)移除了不使用的第三方庫。同上。
項(xiàng)目較大時(shí)，考慮延遲載入(Lazy Loading), 保證首頁的加載速度。

Angular 版本如何升級(jí)

Angular CLI提供了升級(jí)命令(ng update)，同時(shí)，官網(wǎng)（https://update.angular.io/）也有升級(jí)指南。選擇從哪個(gè)版本升級(jí)到哪個(gè)版本后，會(huì)給出一步一步的升級(jí)命令，直接執(zhí)行就好。

感謝各位的閱讀！關(guān)于“Angular8基礎(chǔ)知識(shí)點(diǎn)有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

分享名稱：Angular8基礎(chǔ)知識(shí)點(diǎn)有哪些
當(dāng)前路徑：http://muchs.cn/article12/ijdpgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、網(wǎng)站收錄、網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、手機(jī)網(wǎng)站建設(shè)、微信小程序

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容