AngularJS教程


AngularJS 是什麼?

AngularJS是一個非常強大的JavaScript庫,用於在單頁應用程序(SPA)項目。它擴展了HTML DOM的附加屬性,使之更適應用戶操作。 AngularJS是開源的,完全免費的,並且由數千名世界各地的開發。它是根據Apache許可證2.0版許可。

AngularJS是一個開源Web應用程序框架。它最初是由Misko Hevery和Adam Abrons開發於2009年。現在是由谷歌維護。

AngularJS的定義,它的官方文檔介紹如下:

AngularJS是動態的Web應用程序結構框架。它可以讓你使用HTML作爲模板語言,擴展HTML的語法清晰,簡潔地表達應用程序的組件。Angular分明的數據綁定和依賴注入必須編寫代碼。而這一切都在瀏覽器內發生,這使得它與任何服務器技術的理想合作伙伴。

特點

  • AngularJS是一個功能強大的基於JavaScript開發框架來創建富互聯網應用(RIA)。

  • AngulajJS爲開發者提供選項來編寫客戶端應用程序(使用JavaScript)在一個乾淨的MVC(模型 - 視圖 - 控制器)的方式。

  • AngularJS應用是跨瀏覽器兼容的。自動AngularJS處理適用於每個瀏覽器的javascript代碼。

  • AngularJS是開源的,完全免費的,並且由數千名世界各地的開發。它是根據Apache許可證2.0版許可。

總體而言,AngularJS是一個框架可以用來構建大規模,高性能的網絡應用,同時也易於維護。

核心功能

以下是AngularJS的最重要的核心的功能:

  • 數據綁定:它是模型和視圖組件之間的數據的自動同步。

  • 適用範圍:這些是指模型對象。充當控制器和視圖之間的膠水。

  • 控制器:這些是綁定到特定範圍的Javascript函數。

  • 服務:AngularJS配有多個內置的服務,例如$http提供XMLHttpRequest。這些是在應用程序實例化一次的單一對象。

  • 過濾器:這些從數組項目中選擇一個子集,並返回一個新的數組。

  • 指令:指令是關於DOM元素標記(如元素,屬性,CSS等等)。這些可以被用來創建作爲新的自定義窗口小部件自定義的HTML標籤。 AngularJS有內置的指令(ngBind,ngModel...)

  • 模板:這些都與控制器和模型信息呈現的視圖。這些可以使用「諧音」的單個文件(如index.html),或在一個頁面上的多個視圖。

  • 路由:它是切換視圖的概念。

  • 模型 - 視圖 :MVC是一個設計模式將應用劃分爲不同的部分(稱爲模型,視圖和控制器),每一個具有不同的責任。 AngularJS沒有傳統意義上的MVC實現,而是更接近於MVVM(模型 - 視圖 - 視圖模型)。AngularJS團隊讓它作爲模型視圖而不管。

  • 深層鏈接:深層鏈接能夠使其可書籤應用程序的狀態進行編碼的URL。應用程序可以從該URL爲相同的狀態恢復。

  • 依賴注入: AngularJS有一個內置的依賴注入子系統,通過使應用程序幫助開發人員更易於開發,理解和測試。

概念

下圖描繪了AngularJS,我們將詳細在隨後的章節討論的一些重要部分。

AngularJS Concepts

AngularJS的優點

  • AngularJS提供在一個非常乾淨和維護方式來創建單頁的應用。

  • AngularJS提供了數據綁定功能爲HTML從而給用戶提供豐富而敏感的體驗

  • AngularJS代碼可單元測試。

  • AngularJS使用依賴注入和運用關注點分離。

  • AngularJS提供了可重用的組件。

  • AngularJS能爲開發人員編寫更少的代碼,並獲得更多的功能。

  • 在AngularJS,視圖都是純HTML頁面,並用JavaScript編寫控制器完成業務處理。

AngularJS應用程序可以在所有主要瀏覽器和智能手機,包括Android和iOS系統的手機/平板電腦上運行。

AngulaJS的缺點

雖然AngularJS帶有許多加分,但是我們應該考慮以下幾點:

  • 不安全:JavaScript只有框架編寫的應用程序在AngularJS是不安全的。服務器端的認證和授權是必須的,以保持應用程序的安全。

  • 不可降解:如果應用程序的用戶禁用JavaScript的話用戶將只能看到基本的頁面,僅此而已。

AngularJS組件

AngularJS框架可分爲以下三個主要部分組成:

  • ng-app : 該指令規定,並鏈接一個AngularJS應用程序的HTML。

  • ng-model : 該指令結合AngularJS應用數據的值到HTML的輸入控件。

  • ng-bind : 該指令子帶AngularJS應用數據的HTML標籤。