搜尋
首頁web前端js教程什麼是 AngularJS? AngularJS簡介_AngularJS

什麼是 AngularJS?

AngularJS 是一個為動態WEB應用設計的結構架構。它能讓你使用HTML作為模板語言,透過擴充HTML的語法,讓你能更清楚、簡潔地建構你的應用元件。它的創新點在於,利用 資料綁定 和 依賴注入,它使你不用再寫大量的程式碼了。這些都是透過瀏覽器端的Javascript實現,這也使得它能夠完美地和任何伺服器端技術結合。

AngularJS是為了克服HTML在建造應用上的不足而設計的。 HTML是一門很好的為靜態文字展示設計的聲明式語言,但要建立WEB應用的話它就顯得乏力了。所以我做了一些工作(你也可以覺得是小花招)來讓瀏覽器做我想要的事。 formatDate

通常,我們是透過以下技術來解決靜態網頁技術在建構動態應用上的不足:

1.類別庫 - 類別庫是一些函數的集合,它能幫助你寫WEB應用程式。起主導作用的是你的程式碼,由你來決定何時使用類別庫。類別庫有:jQuery等

2.框架 - 框架是一種特殊的、已經實現了的WEB應用,你只需要對它填充具體的業務邏輯。這裡框架是起主導作用的,由它來根據具體的應用邏輯來呼叫你的程式碼。框架有:knockout、sproutcore等。

AngularJS使用了不同的方法,它嘗試去補足HTML本身在建構應用上的缺陷。 AngularJS透過使用我們稱為識別碼(directives)的結構,讓瀏覽器能夠識別新的語法。例如:

1.使用雙大括號{{}}語法進行資料綁定;
2.使用DOM控制結構來實現迭代或隱藏DOM片段;
3.支援表單和表單的驗證;
4.能將邏輯代碼關聯到相關的DOM元素上;
5.能將HTML分組成可重複使用的元件。

端對端的解

AngularJS試圖成為成為WEB應用中的一種端對端的解決方案。這意味著它不只是你的WEB應用中的一個小部分,而是一個完整的端對端的解決方案。這會讓AngularJS在建構一個CRUD(增加Create、查詢Retrieve、更新Update、刪除Delete)的應用時顯得很「固執」(原文為 opinionated,意指沒有太多的其他方式)。但是,儘管它很“固執”,它仍然能確保它的“固執”只是在你構建應用的起點,並且你仍然可以靈活變動。 AngularJS的一些出眾之處如下:

1.建構一個CRUD應用程式可能用到的全部內容包括:資料綁定、基本範本識別碼、表單驗證、路由、深度連結、元件重複使用、依賴注入。
2.測試方麵包括:單元測試、端對端測試、模擬和自動化測試框架。
3.具有目錄佈局和測試腳本的種子應用作為起點。

AngularJS的可愛之處

AngularJS透過為開發者呈現一個更高層次的抽象來簡化應用的開發。如同其他的抽象技術一樣,這也會損失一部分彈性。換句話說,並不是所有的應用都適合用AngularJS來做。 AngularJS主要考慮的是建構CRUD應用。幸運的是,至少90%的WEB應用都是CRUD應用。但是要了解什麼適合用AngularJS構建,就得了解什麼不適合用AngularJS構建。

如遊戲,圖形介面編輯器,這種DOM操作很頻繁也很複雜的應用,和CRUD應用就有很大的不同,它們不適合用AngularJS來構建。像這種情況用一些更輕、簡單的技術如jQuery可能會更好。

一個簡單的AngularJS實例

下面是一個包含了一個表單的典型CRUD應用。表單值先經過驗證,然後用來計算總值,這個總值會被格式化成本地的樣式。以下有一些開發者常見的概念,你要先了解:

1.將資料模型(data-model)關聯到視圖(UI)上;
2.寫入、讀取、驗證使用者的輸入;
3.根據模型計算新的值;
4.將輸出格式本地化。

index.html:

複製程式碼 程式碼如下:



   
       
       
    頭>
   
       

            發票:
           

           

           
                數量 成本
               
                   
                   
               
            表>
           

            總計: {{數量 * 花費 |幣幣}}
       

    身體>


script.js:
複製程式碼以下程式碼:

函數 InvoiceCntl($scope) {
    $scope.qty = 1;
    $scope.cost = 19.95;
}

端對端檢定:
複製程式碼以下程式碼:

it('應該顯示角度綁定', function() {
    Expect(綁定('數量 * 成本')).toEqual('$19.95');
    input('數量').enter('2');
    input('cost').enter('5.00');
    Expect(綁定('數量 * 成本')).toEqual('$10.00');
});
function InvoiceCntl($scope){$scope.qty = 1;$scope.cost = 19.95;}

運作效果:

複製程式碼程式碼如下:

發票:
數量成本
總計:{{數量 * 成本 |貨幣}}

試試看上面這個例子,然後我們一起看下這個例子的工作原理。在``標籤裡,我們用一個`ng-app`識別碼標明這是一個AngularJS應用。這個`ng-app`標識符使 AngularJS**自動初始化**(自動初始化)你的應用。我們用``標籤來載入AngularJS 腳本:

複製程式碼程式碼如下:

數量:
成本:

這個輸入框的widget看起來很普通,但如果認識到以下幾點那它就不普通了:

1.當頁面載入完後,AngularJS會依照widget裡的宣告的模型名字(qty、cost)產生同名變數。你可以把這些變數認為是MVC設計模式中的M(Model);

2.注意上面widget裡的input有著特殊的能力。如果你們沒有輸入資料或輸入的資料無效,這個input輸入框會自動變紅。輸入框的這個新特性,能讓開發者更容易實現CRUD應用程式中常見的欄位驗證功能。

終於,我們可以來看神祕的雙大括號{{}}了:

複製程式碼 程式碼如下:

Total: {{qty * cost | currency}}

這個{{表達式}}標記是AngularJS的資料綁定。其中的表達式可以是表達式和過濾器({{ expression | filter }})的組合。 AngularJS提供了過濾器來對輸入輸出資料格式化。

上面的這個例子裡,{{}}裡的表達式讓AngularJS把從輸入框中獲得的資料相乘,然後把相乘結果格式化成本地貨幣樣式,然後輸出到頁面上。

值得一提的是,我們既沒有呼叫任何AngularJS的方法,也沒有像用框架一樣去寫某個具體邏輯,就是完成了上述函數。這個實作背後的是因為瀏覽器做了比以往產生 靜態頁面更多的工作,讓它能滿足動態WEB應用的需求。 AngularJS使得動態WEB應用的開發門檻降到不需要類別函式庫或框架的程度。

AngularJS的「禪道(理念)」

Angular信奉的是,當組成視圖(UI)同時又要寫軟體邏輯時,聲明式的程式碼會比命令式的程式碼好得多,儘管命令式的程式碼非常適合用來表述業務邏輯。

1.將DOM操作和應用邏輯解耦是一種非常好的思路,它能大大改善程式碼的可調性;
2.將 測試 和 開發 同等看待是一種非常非常好的思路,測試的難度在很大程度上取決於程式碼的結構;
3.將客戶端和伺服器端解耦是一種特別好的做法,它能讓兩邊並行開發,並且使兩邊程式碼都能實現重複使用;
4.如果框架能夠在整個開發流程中引導著開發者:從設計UI,到編寫業務邏輯,再到測試,那對開發者將是極大的幫助;
5.「化繁為簡,化簡為零」總是好的。

AngularJS能將你從以下的惡夢中解脫出來:

1.使用回呼: 回呼的使用會打亂你的程式碼的可讀性,讓你的程式碼變得支離破碎,很難看清原本的業務邏輯。移除一些常見的程式碼,例如回調,是件好事。大幅減少你因為JavaScript這門語言的設計而不得不寫的程式碼,能讓你把自己應用的邏輯看得更清楚。

2.手動編寫操作DOM元素的程式碼:操作DOM是AJAX應用很基礎的一部分,但它也總是很「笨重」且容易出錯。用聲明的方式描述的UI介面可隨著應用程式狀態的改變而變化,能讓你從寫出低階的DOM操作程式碼中解脫出來。絕大部分用AngularJS寫的應用程式裡,開發者都不用再自己去寫操作DOM的程式碼,不過如果你想的話還是可以去寫。

3.對UI介面讀寫資料: AJAX應用程式的很大一部是CRUD操作。一個經典的流程是把服務端的資料組成內部對象,再把對象編成HTML表單,用戶修改表單後再驗證表單,如果有錯再顯示錯誤,然後將資料重新組成內部對象,再回傳給伺服器。這個流程裡有太多太多要重複寫的程式碼,使得程式碼看起來總是在描述應用程式的全部執行流程,而不是具體的業務邏輯和業務細節。

4.開始前得寫大量的基礎性的程式碼: 通常你需要寫很多的基礎性的程式碼才能實現一個「Hello World」的應用。用AngularJS的話,它會提供一些服務讓你很容易地正式開始寫你的應用,而這些服務都是以一種Guice-like dependency-injection式的依賴注入自動加入到你的應用中去的,這讓你能很快的進入你應用的具體開發。特別的是,你還能全盤掌握自動化測試的初始化過程。

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
在JavaScript中替換字符串字符在JavaScript中替換字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替換方法詳解及常見問題解答 本文將探討兩種在JavaScript中替換字符串字符的方法:在JavaScript代碼內部替換和在網頁HTML內部替換。 在JavaScript代碼內部替換字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 該方法僅替換第一個匹配項。要替換所有匹配項,需使用正則表達式並添加全局標誌g: str = str.replace(/fi

自定義Google搜索API設置教程自定義Google搜索API設置教程Mar 04, 2025 am 01:06 AM

本教程向您展示瞭如何將自定義的Google搜索API集成到您的博客或網站中,提供了比標準WordPress主題搜索功能更精緻的搜索體驗。 令人驚訝的是簡單!您將能夠將搜索限制為Y

8令人驚嘆的jQuery頁面佈局插件8令人驚嘆的jQuery頁面佈局插件Mar 06, 2025 am 12:48 AM

利用輕鬆的網頁佈局:8 ESTISSEL插件jQuery大大簡化了網頁佈局。 本文重點介紹了簡化該過程的八個功能強大的JQuery插件,對於手動網站創建特別有用

構建您自己的Ajax Web應用程序構建您自己的Ajax Web應用程序Mar 09, 2025 am 12:11 AM

因此,在這裡,您準備好了解所有稱為Ajax的東西。但是,到底是什麼? AJAX一詞是指用於創建動態,交互式Web內容的一系列寬鬆的技術。 Ajax一詞,最初由Jesse J創造

什麼是這個'在JavaScript?什麼是這個'在JavaScript?Mar 04, 2025 am 01:15 AM

核心要點 JavaScript 中的 this 通常指代“擁有”該方法的對象,但具體取決於函數的調用方式。 沒有當前對象時,this 指代全局對象。在 Web 瀏覽器中,它由 window 表示。 調用函數時,this 保持全局對象;但調用對象構造函數或其任何方法時,this 指代對象的實例。 可以使用 call()、apply() 和 bind() 等方法更改 this 的上下文。這些方法使用給定的 this 值和參數調用函數。 JavaScript 是一門優秀的編程語言。幾年前,這句話可

通過來源查看器提高您的jQuery知識通過來源查看器提高您的jQuery知識Mar 05, 2025 am 12:54 AM

jQuery是一個很棒的JavaScript框架。但是,與任何圖書館一樣,有時有必要在引擎蓋下發現發生了什麼。也許是因為您正在追踪一個錯誤,或者只是對jQuery如何實現特定UI感到好奇

10張移動秘籍用於移動開發10張移動秘籍用於移動開發Mar 05, 2025 am 12:43 AM

該帖子編寫了有用的作弊表,參考指南,快速食譜以及用於Android,BlackBerry和iPhone應用程序開發的代碼片段。 沒有開發人員應該沒有他們! 觸摸手勢參考指南(PDF)是Desig的寶貴資源

如何創建和發布自己的JavaScript庫?如何創建和發布自己的JavaScript庫?Mar 18, 2025 pm 03:12 PM

文章討論了創建,發布和維護JavaScript庫,專注於計劃,開發,測試,文檔和促銷策略。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

倉庫:如何復興隊友
1 個月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
1 個月前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器