Angular開發(fā)者指南之入門介紹
什么是Angular
AngularJS是動態(tài)Web應(yīng)用程序的結(jié)構(gòu)框架。 它允許您使用HTML作為模板語言,并允許您擴展HTML的語法以清晰,簡潔地表達應(yīng)用程序的組件。AngularJS的數(shù)據(jù)綁定和依賴注入消除了許多你不得不編寫的代碼。這一切都發(fā)生在瀏覽器中,使其成為任何服務(wù)器技術(shù)的理想合作伙伴。
動態(tài)應(yīng)用程序和靜態(tài)文檔之間的動態(tài)適配常常通過以下方式解決
- 一個庫:一組在編寫網(wǎng)絡(luò)應(yīng)用程序時非常有用的函數(shù)。你的代碼是負(fù)責(zé)在它調(diào)用庫中它認(rèn)為合適的。 例如jQuery
- 框架:Web應(yīng)用程序的特定實現(xiàn),其中你的代碼填充詳細(xì)信息??蚣苁秦?fù)責(zé),當(dāng)它需要某些應(yīng)用程序特定時調(diào)用你的代碼。 例如,durandal,ember等。
AngularJS采取另一種方法。 它嘗試通過創(chuàng)建新的HTML結(jié)構(gòu)來最小化文檔中心HTML和應(yīng)用程序需要的阻抗之間的不匹配。 AngularJS通過我們調(diào)用指令的構(gòu)造來教導(dǎo)瀏覽器的新語法。 示例包括:
- 數(shù)據(jù)綁定:{{}}
- DOM控制結(jié)構(gòu),用于重復(fù),顯示和隱藏DOM片段
- 支持表單和表單驗證
- 將新行為附加到DOM元素,例如DOM事件處理
- 將HTML分組為可重用組件。
一個完整的客戶端解決方案
AngularJS不是構(gòu)建Web應(yīng)用程序的客戶端的整體謎題中的單一部分。它處理所有你曾經(jīng)用手寫的DOM和AJAX粘合代碼,并把它放在一個定義良好的結(jié)構(gòu)中。這使得AngularJS認(rèn)為應(yīng)該如何構(gòu)建一個CRUD(創(chuàng)建,讀取,更新,刪除)應(yīng)用程序。 但是,雖然它的意見,它也試圖確保其意見只是一個起點,你可以輕易改變。 AngularJS提供了以下開箱即用的:
- 在一個連貫的集合中構(gòu)建一個CRUD應(yīng)用程序所需的一切:數(shù)據(jù)綁定,基本模板指令,表單驗證,路由,深層鏈接,可重用組件和依賴注入
- 可測試性故事:單元測試,端到端測試,模擬和測試線束
- 發(fā)布應(yīng)用程序以目錄布局和測試腳本為起點。
AngularJS的討巧之處
AngularJS通過向開發(fā)人員提供更高級別的抽象來簡化應(yīng)用程序開發(fā)。像任何抽象一樣,它以靈活性為代價。換句話說,不是每個應(yīng)用程序都適合AngularJS。AngularJS是用CRUD應(yīng)用程序構(gòu)建的。幸運的是,CRUD應(yīng)用程序代表了大多數(shù)Web應(yīng)用程序。 為了理AngularJS有什么好處,但它有助于理解什么時候一個應(yīng)用程序不是一個很好的適合AngularJS。
游戲和GUI編輯器是使用密集和棘手的DOM操作的應(yīng)用程序的例子。這些類型的應(yīng)用程序不同于CRUD應(yīng)用程序,因此可能不是一個很好適合AngularJS。在這些情況下,最好使用具有較低抽象級別的庫,例如jQuery。
AngularJS的禪
- 注冊回調(diào):注冊回調(diào)會雜亂你的代碼,使得很難看到樹的森林。 刪除常見的樣板代碼,如回調(diào)是一件好事。 它大大減少了你必須做的JavaScript編碼量,它使你更容易看到你的應(yīng)用程序做什么。
- 以編程方式操縱HTML DOM:操縱HTML DOM是AJAX應(yīng)用程序的基石,但它很繁瑣,容易出錯。通過聲明性地描述在應(yīng)用程序狀態(tài)更改時UI應(yīng)該如何更改,您將從低級DOM操作任務(wù)中釋放出來。大多數(shù)使用AngularJS編寫的應(yīng)用程序從不需要以編程方式操作DOM,盡管如果你愿意的話。
- 與UI進行數(shù)據(jù)封送:CRUD操作構(gòu)成了大多數(shù)AJAX應(yīng)用程序的任務(wù)。 從服務(wù)器到內(nèi)部對象到HTML表單的編組數(shù)據(jù)流,允許用戶修改表單,驗證表單,顯示驗證錯誤,返回到內(nèi)部模型,然后返回到服務(wù)器,創(chuàng)建了很多模板文件代碼。 AngularJS消除了幾乎所有的這個樣板,留下描述應(yīng)用程序的整體流程的代碼,而不是所有的實現(xiàn)細(xì)節(jié)。
- 寫入大段的初始化代碼只是為了開始:通常你需要寫很多管道只是為了獲得一個基本的“Hello World”AJAX應(yīng)用程序工作。使用AngularJS,您可以使用服務(wù)輕松引導(dǎo)應(yīng)用程序,這些服務(wù)以類似Guice的依賴注入方式自動注入到應(yīng)用程序中。這允許你快速開始開發(fā)功能。作為獎勵,你可以完全控制自動化測試中的初始化過程。
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
相關(guān)文章
AngularJs bootstrap搭載前臺框架——js控制部分
本文主要介紹AngularJs bootstrap搭載前臺框架js控制部分的資料,這里有實現(xiàn)代碼,有興趣的小伙伴可以參考下2016-09-09
Angular2使用Guard和Resolve進行驗證和權(quán)限控制
本篇文章主要介紹了Angular2使用Guard和Resolve進行驗證和權(quán)限控制,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
Angular應(yīng)用程序的Hydration基本概念詳解
這篇文章主要為大家介紹了Angular應(yīng)用程序的Hydration基本概念詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
Angular.js中ng-if、ng-show和ng-hide的區(qū)別介紹
angularJS中的ng-show、ng-hide、ng-if指令都可以用來控制dom元素的顯示或隱藏。那么這篇文章就給大家主要介紹了Angular.js中ng-if、ng-show和ng-hide的區(qū)別,需要的朋友可以參考借鑒,下面來一起看看吧。2017-01-01
AngularJS基礎(chǔ) ng-options 指令詳解
本文主要介紹AngularJS ng-options 指令,這里對ng-options指令的知識做了詳細(xì)整理,并附有詳細(xì)的代碼示例,有需要的小伙伴可以參考下2016-08-08
關(guān)于angular表單動態(tài)驗證的一種新思路分享
在Angular?中不管是模板驅(qū)動表單還是響應(yīng)式表單,對于動態(tài)創(chuàng)建表單的支持都很好,下面這篇文章主要給大家介紹了關(guān)于angular表單動態(tài)驗證的一種新思路,需要的朋友可以參考下2022-03-03
如何在Angular8.0下使用ngx-translate進行國際化配置
這篇文章主要介紹了如何在Angular8.0下使用ngx-translate進行國際化配置,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
AngularJS入門教程之學(xué)習(xí)環(huán)境搭建
這篇文章主要介紹了AngularJS入門教程之學(xué)習(xí)環(huán)境搭建,本教程將指導(dǎo)您完成一個簡單的應(yīng)用程序創(chuàng)建過程,包括編寫和運行單元測試、不斷地測試應(yīng)用,需要的朋友可以參考下2014-12-12
Angular實現(xiàn)類似博客評論的遞歸顯示及獲取回復(fù)評論的數(shù)據(jù)
這篇文章主要給大家介紹了關(guān)于Angular如何實現(xiàn)類似博客評論的遞歸顯示及獲取回復(fù)評論的數(shù)據(jù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11

