溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關Angular8基礎知識點有哪些的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
Angular CLI又稱 Angular腳手架，用于快速生成項目或者組件的框架以提高效率。可以方便的生成angular app、component、service 等等， 并且可以通過參數，按照自己的需求去創建。可以說是angular開發必不可少的利器。
參考：https://cli.angular.io/
ng generate: 新建component、service、pipe, class 等
ng new: 新建angular app
ng update: 升級angular自身，以及依賴
ng version： 顯示anuglar cli全局版本、以及本地的angular cli、angular code等的版本
ng add: 新增第三方庫。會做2件事，1）基于npm安裝node_modules, 2）自動更改配置文件，保證新的依賴正常工作
依賴注入是Angular實現的一種應用程序設計模式， 是Angular的核心概念之一。
依賴就是具有一系列功能的服務(service)， 應用程序中的各種組件和指令（derictives）可能需要服務的功能。 Angular提供了一種平滑的機制，通過它我們可以將這些依賴項注入我們的組件和指令中。因此，我們只是在構建依賴關系，這些依賴關系可以在應用程序的所有組件之間注入。
使用依賴注入還有以下好處，
不需要實例化，（new 實例）。不需要關心class的構造函數里需要什么參數
一次注入（app module通過Providers注入），所有組件都可以使用。而且是用同一個service實例（Singleton），也就是說一個service里的數據是共分享的，可以用于組件間數據傳遞。
每個Angular應用程序都包含瀏覽器無法理解的組件和模板。 因此，在瀏覽器內部運行之前，需要先編譯所有Angular應用程序。
Angular提供兩種編譯類型：
JIT(Just-in-Time) compilation
AOT(Ahead-of-Time) compilation
區別在于，在JIT編譯中，應用程序在運行時在瀏覽器內部進行編譯；而在AOT編譯中，應用程序在構建期間進行編譯。
顯而易見，AOT編譯好處多多，因而是Angular的默認編譯方式。主要優點
由于應用程序是在瀏覽器內部運行之前進行編譯的，因此瀏覽器會加載可執行代碼并立即呈現應用程序，從而加快了呈現速度。
在AOT編譯中，編譯器將與應用程序一起發送外部HTML和CSS文件，從而消除了對那些源文件的單獨AJAX請求，從而減少了ajax請求。
開發人員可以在構建階段檢測并處理錯誤，這有助于最大程度地減少錯誤。
AOT編譯器將HTML和模板添加到JS文件中，然后再在瀏覽器中運行。 因此，沒有多余的HTML文件可讀取，從而為應用程序提供了更好的安全性。
Angular雙向綁定的原理
Angular的雙向綁定，通過臟數據檢查（Dirty checking）來實現。
臟值檢測的基本原理是存儲舊數值，并在進行檢測時，把當前時刻的新值和舊值比對。若相等則沒有變化，反之則檢測到變化，需要更新視圖。
angular2中有了Zone.js。對于setTimeout，addEventListener、promise等都在ngZone中執行（換句話說，就是被zone.js封裝重寫了），angular并在ngZone中setup了相應的鉤子，通知angular2做相應的臟檢查處理，然后更新DOM。
Angular雙向綁定效率問題
對于頁面中需要綁定DOM元素極其多的情況（成百上千），必然會遇到效率問題。（具體還取決于PC、瀏覽器性能）。另外，臟檢查超過10次（經驗值？），就認為程序有問題，不再進行檢查。
可以采用如下方式避免
對于只用于展示的數據，使用單向綁定，而不是雙向綁定；
Angular的數據流是自頂而下，從父組件到子組件單向流動。單向數據流向保證了高效、可預測的變化檢測。因而組件化也是提高性能的一種手段。
表達式（以及表達式所調用的函數）中少寫太過復雜的邏輯
不要連接太長的 pipe（往往 pipe里都會遍歷并且生成新數組, pipe 在anglarJS（v1）中叫做filter）
變化檢測策略onPush. Angular有兩種變化檢測策略。Default是Angular默認的變化檢測策略，也就是上述提到的臟檢查（只要有值發生變化，就全部檢查）。開發者可以根據場景來設置更加高效的變化檢測方式：onPush。onPush策略，就是只有當輸入數據的引用發生變化或者有事件觸發時，組件才進行變化檢測。
NgFor應該伴隨trackBy方程使用。否則，每次臟值檢測過程中，NgFor會把列表里每一項都執行更新DOM操作。
<div>
<span>Name {{item.name}}</span> <!-- 1. 直接綁定 -->
<span>Classes {{item | classPipe}}</span><!-- 2. pipe方式-->
<span>Classes {{classes(item)}}</span><!-- 3.綁定方法調用的結果 -->
</div>直接綁定： 大多數情況下，這都是性能最好的方式。
綁定方法調用的結果：在每個臟值檢測過程中，classes方程都要被調用一遍。如果沒有特殊需求，應盡量避免這種使用方式。
pipe方式： 它和綁定function類似，每次臟值檢測classPipe都會被調用。不過Angular給pipe做了優化，加了緩存，如果item和上次相等，則直接返回結果。
更多優化技巧，參考 angular綁定（臟檢查）方面的性能優化技巧
什么是angular的Module
模塊(Module)是一個我們可以對組件(Component)，服務(service)和管道(pipe)進行分組的地方。 模塊通過導出或隱藏這些元素來決定其他模塊是否可以使用組件，指令等。 每個模塊都使用@NgModule裝飾器定義。
Root Module和Feature Module的區別。
每個Angular應用程序只能有一個根模塊(Root Module)，而它可以有一個或多個功能模塊(Feature Module)。根模塊導入BrowserModule，而功能模塊導入CommonModule。
Module 延遲加載（Lazy-loading）
當一個項目做得很大后，為了提高首屏加載速度，可以通過Lazy-loading，當訪問到某些具體的url時，才加載那些不常用的feature module。
實現：正常創建feature module，修改路由配置。 例如：
const routes: Routes = [
{
path: 'customers',
loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
}
];這樣，編譯后，這個feature module就會是一個獨立的js，只有當用戶訪問url（~/customers）時，才會向server端請求這個獨立的js，然后加載、執行。
參考https://angular.io/guide/lazy-loading-ngmodules
指令（Directive）用于添加行為到已有元素（DOM）或者組件（Component）。
同時，一個元素或組件，可以應用多個指令。
首先新版本的anuglar是推薦使用Observable的(屬于RxJS)，其次，對于Observable對象，可以使用.toPromise()轉化為Promise對象。
Promise,無論是否調用then。promise都會立即執行；而observables只是被創建，當調用(subscribe)的時候才會被執行。
Promise返回一個值；Observable返回0至N個值。所以Promise對應的操作符是.then()，Observable對應的是.subscribe
Observable，還額外支持map，filter，reduce和相似的操作符
Observable 可以取消，Promise不可以
Angular也還是網頁應用，所以一般的提高網頁西能的技巧都是通用的。針對Angular，還有一些特殊的優化技巧:
AOT編譯。之前提到過不要在客戶端編譯
應用程序已經最小化（uglify和tree shaking）
去掉不必要的import語句。如果有遺留，那么打包時也會打進來。
確保應用中已經移除了不使用的第三方庫。同上。
項目較大時，考慮延遲載入(Lazy Loading), 保證首頁的加載速度。
Angular CLI提供了升級命令(ng update)，同時，官網（https://update.angular.io/）也有升級指南。選擇從哪個版本升級到哪個版本后，會給出一步一步的升級命令，直接執行就好。
感謝各位的閱讀！關于“Angular8基礎知識點有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
