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的優點

• 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標籤。