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