搜尋
首頁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是用C編寫的嗎?檢查證據JavaScript是用C編寫的嗎?檢查證據Apr 25, 2025 am 12:15 AM

是的,JavaScript的引擎核心是用C語言編寫的。 1)C語言提供了高效性能和底層控制,適合JavaScript引擎的開發。 2)以V8引擎為例,其核心用C 編寫,結合了C的效率和麵向對象特性。 3)JavaScript引擎的工作原理包括解析、編譯和執行,C語言在這些過程中發揮關鍵作用。

JavaScript的角色:使網絡交互和動態JavaScript的角色:使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心,因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容,2)通過DOMAPI操作網頁,3)支持複雜的交互效果如動畫和拖放,4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript:連接解釋C和JavaScript:連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1)C 代碼編譯成WebAssembly模塊,引入到JavaScript環境中,增強計算能力。 2)在遊戲開發中,C 處理物理引擎和圖形渲染,JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序:JavaScript的不同應用從網站到應用程序:JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中,JavaScript與HTML、CSS一起操作DOM,實現動態效果,並支持如jQuery、React等框架。 2)通過ReactNative和Ionic,JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行,支持高並發請求。

Python vs. JavaScript:比較用例和應用程序Python vs. JavaScript:比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化,JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色,使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺,用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用,支持全棧開發。

C/C在JavaScript口譯員和編譯器中的作用C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。1)C 用于解析JavaScript源码并生成抽象语法树。2)C 负责生成和执行字节码。3)C 实现JIT编译器,在运行时优化和编译热点代码,显著提高JavaScript的执行效率。

JavaScript在行動中:現實世界中的示例和項目JavaScript在行動中:現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用,涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web:核心功能和用例JavaScript和Web:核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互;2)在用戶提交數據前進行客戶端驗證,提高用戶體驗;3)通過AJAX技術實現與服務器的無刷新通信。

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脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

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

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器