Angular、React、Vue被稱為前端三大框架，其中Angular在全球前端框架中排名第一，人氣最高！為了幫助更多的同學(xué)們快速學(xué)習(xí)前端高階技術(shù)，今天長(zhǎng)沙Web前端培訓(xùn)班為各位小伙伴準(zhǔn)備了前端Angular全套教程分享。首先是Angular框架介紹：

       AngularJS 誕生于2009年，由Misko Hevery 等人創(chuàng)建，后為Google所收購(gòu)。是一款優(yōu)秀的前端JS框架，已經(jīng)被用于Google的多款產(chǎn)品當(dāng)中。AngularJS有著諸多特性，最為核心的是：MVC（Model–view–controller）、模塊化、自動(dòng)化雙向數(shù)據(jù)綁定、語(yǔ)義化標(biāo)簽、依賴注入等等。

       AngularJS 是一個(gè) JavaScript框架。它是一個(gè)以 JavaScript 編寫的庫(kù)。它可通過 <script> 標(biāo)簽添加到HTML 頁(yè)面。AngularJS 通過 指令 擴(kuò)展了 HTML，且通過 表達(dá)式 綁定數(shù)據(jù)到 HTML。AngularJS 是以一個(gè) JavaScript 文件形式發(fā)布的，可通過 script 標(biāo)簽添加到網(wǎng)頁(yè)中。

       任何Angular應(yīng)用程序都由7個(gè)基本組成部分組成。這些是：組件、模板、元數(shù)據(jù)、數(shù)據(jù)綁定、指令、服務(wù)、依賴注入又名DI、組件。下面我們就Angular這7個(gè)基本組成部分進(jìn)行一一解釋

       1、組件

       任何Angular應(yīng)用程序都必須至少擁有一個(gè)組件。這稱為根組件。它通過組件層次結(jié)構(gòu)與頁(yè)面DOM（文檔對(duì)象模型）對(duì)應(yīng)連接起來(lái)。無(wú)論Angular應(yīng)用程序具有多少組件，每個(gè)組件都定義了一個(gè)有關(guān)數(shù)據(jù)邏輯的類，組件在應(yīng)用中扮演的角色取決于該組件的類。每個(gè)類都與一個(gè)HTML模板相關(guān)聯(lián)，該模板定義了界面視圖。在組件 @Component () 下定義的是裝飾器decorator，每個(gè)裝飾器都將特定類型的元數(shù)據(jù)附加到使用它們的原始類中，裝飾漆作用是讓系統(tǒng)知道這些類是什么以及它們應(yīng)該做什么。

       2、模板

       顧名思義，這些是將HTML與Angular標(biāo)記結(jié)合起來(lái)的，它們能夠在將HTML元素投射到屏幕上之前對(duì)其進(jìn)行修改。模板利用管道來(lái)改善用戶體驗(yàn)。管道通過轉(zhuǎn)換顯示值來(lái)實(shí)現(xiàn)。這僅僅意味著可以使用管道根據(jù)用戶的區(qū)域設(shè)置添加時(shí)間和貨幣等單位。Angular帶有大量預(yù)定義的管道。但是，也可以定義自己的管道。

       3、元數(shù)據(jù)

       類如何處理取決于元數(shù)據(jù)，類裝飾器用于將元數(shù)據(jù)附加到類。任何附加了@Component類裝飾器的類都稱為Component類。為了提供Angular創(chuàng)建組件所需的必要信息，類Decorator通過配置選項(xiàng)進(jìn)行配置，這些配置選項(xiàng)是指令，選擇器和templateURL。

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

       綁定標(biāo)記負(fù)責(zé)將應(yīng)用程序數(shù)據(jù)與DOM連接。有兩種類型的數(shù)據(jù)綁定，即：事件綁定 - 允許應(yīng)用程序響應(yīng)目標(biāo)環(huán)境中的用戶輸入。它通過更新應(yīng)用程序數(shù)據(jù)來(lái)實(shí)現(xiàn)。屬性綁定 - 允許插值，這些值是從應(yīng)用程序數(shù)據(jù)計(jì)算到HTML中的。與用戶選擇一樣，DOM的變化會(huì)反映在程序數(shù)據(jù)中。這稱為[雙向數(shù)據(jù)綁定]。它是通過ngModel指令實(shí)現(xiàn)的。

       5、指令

       模板指令負(fù)責(zé)提供邏輯。在顯示視圖之前，Angular會(huì)評(píng)估指令并解析模板中存在的綁定語(yǔ)法，以便修改DOM和HTML元素。這是根據(jù)程序數(shù)據(jù)和邏輯完成的。有三種類型的指令：

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

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

       結(jié)構(gòu)指令 - 通過添加或刪除DOM元素來(lái)修改DOM布局

       6、服務(wù)

       當(dāng)需要某些與特定視圖無(wú)關(guān)的數(shù)據(jù)或邏輯時(shí)，將創(chuàng)建服務(wù)類。此外，這些數(shù)據(jù)或邏輯需要跨組件共享。服務(wù)類定義緊跟在@Injectable（）裝飾器之前。它的作用是提供元數(shù)據(jù)，允許服務(wù)以依賴的形式注入客戶端組件。

       7、依賴注入（DI）

      簡(jiǎn)單地說，DI可以使組件類保持精簡(jiǎn)和高效。這使類能夠委派任務(wù)，例如從服務(wù)器獲取數(shù)據(jù)，直接登錄到控制臺(tái)，以及驗(yàn)證用戶對(duì)服務(wù)的輸入。

       Angular都有哪些優(yōu)勢(shì)？介紹了Angular框架，下面我們?cè)賮?lái)介紹下它的優(yōu)點(diǎn)：Angular有以下4個(gè)優(yōu)點(diǎn)：

       1、模板功能強(qiáng)大豐富，并且是聲明式的，自帶了豐富的Angular指令；

       2、是一個(gè)比較完善的前端MV*框架，包含模板，數(shù)據(jù)雙向綁定，路由，模塊化，服務(wù)，過濾器，依賴注入等所有功能；

       3、自定義Directive，比jQuery插件還靈活，但是需要深入了解Directive的一些特性，簡(jiǎn)單的封裝容易，復(fù)雜一點(diǎn)官方?jīng)]有提供詳細(xì)的介紹文檔，我們可以通過閱讀源代碼來(lái)找到某些我們需要的東西，如：在directive使用 $parse；

       4、比較大膽的引入了Java的一些東西（依賴注入），能夠很容易的寫出可復(fù)用的代碼，對(duì)于敏捷開發(fā)的團(tuán)隊(duì)來(lái)說非常有幫助，我們的項(xiàng)目從上線到目前，UI變化很大，在摸索中迭代產(chǎn)品，但是js的代碼基本上很少改動(dòng)。

       簡(jiǎn)單來(lái)說Angular是個(gè)真正意義上的框架，它給出了復(fù)雜應(yīng)用會(huì)遇到的問題的解決方案，真正的一站式構(gòu)建，省心。據(jù)說掌握了angular框架的前端，待遇也會(huì)高一些哦！

上一篇

長(zhǎng)沙IT培訓(xùn)班分享：谷歌、阿里都在使用的dart編程語(yǔ)言

下一篇

?長(zhǎng)沙IT培訓(xùn)整理：CentOS 7 安裝教程