• 前端網頁設計
  • Angular
  • import_contacts Angular 簡易介紹
    6449
適用範圍

網站開發人員

實用性:
重要性:

Angular 簡易介紹

AngularJS

它是由 Google 開發的,一個開源的 JavaScript 框架,是一個單頁式架構(SPA) 簡單來說就是最終只有一個頁面,透過JS更新資料,處理畫面更新等等。
因開放原始碼,更吸收了廣大社群,不同的意見、測試、回饋不斷更新進步到至今,目前已經到了 Angular 4。

基本特性

1.MVVM 架構:

控制器 (Controllers) 與 檢視 (Views) 分離的非常乾淨,以注入方式後實作,實現了關注點分離方式。

2.雙向資料繫結 Two Way Data-Binding:

非常實用的功能之一,資料如果發生變化的話立即反映至畫面更新,對於開發人員而言只須關注在於資料操作即可。
例如:

<script>
  angular.module('Example', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.name = 'Hello Word';
    }]);
</script>
<input type="text" ng-model="name" />

預設 name 值為 Hello Word 當 controller 載入後 input 將綁定預設值,
如在瀏覽器畫面中的 input 中輸入任何字元,也會即時寫入 name 變數中,
或者透過 web api 等等方式取直後放入 name 中,也會即時反應至畫面中,減少了Get Set 值得動作相當實用。

3.依赖注入

只需要在需要地方注入即可使用
例如 模組 (Module) 、 工廠 (factory) 、 服務 (service) 、 提供者 (provider) 、 常數值 (value) 等等。

4.指令

Html DOM元素上的方式,使DOM能有特殊行為
例如,ng-mode, ng-repeat, ng-show, ng-If ... 等等

Angular 2 ~ 4

Angular 2 開始之後,可以說是完全另一個面貌,之間發生了巨大變化

變化一

整體速度與效能的提升

變化二

預設使用 TypeScript 強化了弱型別的 JavaScript,在編譯時期就能做型別檢查,提升程式碼品質。

變化三

Angular 2 直接內建了一套路由機制,簡單的設定就能達到單頁式架構,換頁瀏覽網站的功能。
(Angular 1.x 雖然也內建了一套路由機制,但對於多層路由不支援,功能較簡陋,以至於必須仰賴第三方套件 ui-route)