Angular全套知識講解,錯過必悔!

千鋒武漢發表於2021-09-02

       Angular、React、Vue被稱為前端三大框架,其中Angular在全球前端框架中排名第一,人氣最高!為了幫助更多的同學們快速學習前端高階技術,今天小千為各位小夥伴準備了前端Angular全套知識講解。首先是Angular框架介紹:

       AngularJS 誕生於2009年,由Misko Hevery 等人建立,後為Google所收購。是一款優秀的前端JS框架,已經被用於Google的多款產品當中。 AngularJS有著諸多特性,最為核心的是:MVC(Model–view–controller)、模組化、自動化雙向資料繫結、語義化標籤、依賴注入等等。

微信圖片_20210901173654

       AngularJS 是一個 JavaScript框架。它是一個以 JavaScript 編寫的庫。它可透過 <script> 標籤新增到HTML 頁面。 AngularJS 透過 指令 擴充套件了 HTML,且透過 表示式 繫結資料到 HTML。 AngularJS 是以一個 JavaScript 檔案形式釋出的,可透過 script 標籤新增到網頁中。

       任何Angular應用程式都由7個基本組成部分組成。這些是: 元件、 模板、 後設資料、 資料繫結、 指令、 服務、 依賴注入又名DI、 元件。 下面我們就Angular這7個基本組成部分進行一一解釋

       1、元件

       任何Angular應用程式都必須至少擁有一個元件。這稱為根元件。它透過元件層次結構與頁面DOM(文件物件模型)對應連線起來。無論Angular應用程式具有多少元件,每個元件都定義了一個有關資料邏輯的類,元件在應用中扮演的角色取決於該元件的類。每個類都與一個HTML模板相關聯,該模板定義了介面檢視。 在元件 @Component () 下定義的是裝飾器decorator,每個裝飾器都將特定型別的後設資料附加到使用它們的原始類中,裝飾漆作用是讓系統知道這些類是什麼以及它們應該做什麼。

       2、模板

       顧名思義,這些是將HTML與Angular標記結合起來的,它們能夠在將HTML元素投射到螢幕上之前對其進行修改。模板利用管道來改善使用者體驗。管道透過轉換顯示值來實現。這僅僅意味著可以使用管道根據使用者的區域設定新增時間和貨幣等單位。Angular帶有大量預定義的管道。但是,也可以定義自己的管道。

       3、後設資料

       類如何處理取決於後設資料,類裝飾器用於將後設資料附加到類。任何附加了@Component類裝飾器的類都稱為Component類。為了提供Angular建立元件所需的必要資訊,類Decorator透過配置選項進行配置,這些配置選項是指令,選擇器和templateURL。

       4、資料繫結

       繫結標記負責將應用程式資料與DOM連線。有兩種型別的資料繫結,即: 事件繫結 - 允許應用程式響應目標環境中的使用者輸入。它透過更新應用程式資料來實現。 屬性繫結 - 允許插值,這些值是從應用程式資料計算到HTML中的。 與使用者選擇一樣,DOM的變化會反映在程式資料中。這稱為[雙向資料繫結]。它是透過ngModel指令實現的。

       5、指令

       模板指令負責提供邏輯。在顯示檢視之前,Angular會評估指令並解析模板中存在的繫結語法,以便修改DOM和HTML元素。這是根據程式資料和邏輯完成的。有三種型別的指令:

       屬性指令 - 修改元件,元素或其他指令的行為或外觀

       元件 - 這些是帶有模板的指令

       結構指令 - 透過新增或刪除DOM元素來修改DOM佈局

       6、服務

       當需要某些與特定檢視無關的資料或邏輯時,將建立服務類。此外,這些資料或邏輯需要跨元件共享。 服務類定義緊跟在@Injectable()裝飾器之前。它的作用是提供後設資料,允許服務以依賴的形式注入客戶端元件。

       7、依賴注入(DI)

      簡單地說,DI可以使元件類保持精簡和高效。這使類能夠委派任務,例如從伺服器獲取資料,直接登入到控制檯,以及驗證使用者對服務的輸入。

       Angular都有哪些優勢? 介紹了Angular框架,下面我們再來介紹下它的優點:Angular有以下4個優點:

       1、模板功能強大豐富,並且是宣告式的,自帶了豐富的Angular指令;

       2、是一個比較完善的前端MV*框架,包含模板,資料雙向繫結,路由,模組化,服務,過濾器,依賴注入等所有功能;

       3、自定義Directive,比jQuery外掛還靈活,但是需要深入瞭解Directive的一些特性,簡單的封裝容易,複雜一點官方沒有提供詳細的介紹文件,我們可以透過閱讀原始碼來找到某些我們需要的東西,如:在directive使用 $parse;

       4、比較大膽的引入了Java的一些東西(依賴注入),能夠很容易的寫出可複用的程式碼,對於敏捷開發的團隊來說非常有幫助,我們的專案從上線到目前,UI變化很大,在摸索中迭代產品,但是js的程式碼基本上很少改動。

       簡單來說Angular是個真正意義上的框架,它給出了複雜應用會遇到的問題的解決方案,真正的一站式構建,省心。 據說掌握了angular框架的前端,待遇也會高一些哦!

       本文來自千鋒教育,轉載請註明出處。

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31548651/viewspace-2789997/,如需轉載,請註明出處,否則將追究法律責任。

相關文章