​【摘要】angular.js 準確的來說，應該不是一個框架，是一個 js 庫，一個依賴於 jQuery 的進一步封裝，去除繁瑣的 DOM 操作，使用資料驅動的 MVC 模組化庫。

哎，很難受，連續兩個大坑，都被我碰上了，以前沒有寫過 angular，還以為 angular 就是跟 vue, react 一樣的框架，沒想到 angular.js 跟 angular2 ，竟然沒有半毛錢關係，我是服了。竟然是一個老古董專案。

只能退一步想了，先把基礎地基打好了，後面再深入框架原理。

還是按照三大步驟：

what: 什麼是 angular.jswhy: 為什麼要使用 angular.jshow: 如何使用 angular.js什麼是 angular.js

angular.js準確的來說，應該不是一個框架，是一個 js庫，一個依賴於 jQuery的進一步封裝，去除繁瑣的 DOM操作，使用資料驅動的 MVC模組化庫。

這裡扯到 MVC這個詞語，也不是很清楚，我自己的理解 M其實就是 Module模組，一個 .html就是一個模組， V其實就是我們 .html裡面那些 DOM元素， C就是我們用來操作 V那些 js指令碼。

我大概畫了一個簡單的草圖：

為什麼要使用 angular.js

額，我必須要吐槽一下，為毛還要使用 angular.js，為毛不使用 angular2，好歹讓我入門 ts 也好啊，好了，既來之，則安之。

用這個 js 庫的一個關鍵原因就是因為可以去除繁瑣的 DOM操作。使用資料驅動檢視的方式，進行開發，非常高效。

如何使用 angular.jsng-app載入一個入口應用模組

var app = angular.module('ngApp', []);

有點類似，Vue 專案的 let app = new Vue();

ng-init初始化資料

<div ng-app="ngApp" ng-init="message='hello world'"></div>

有點類似 Vue 中的 data()屬性。

ng-controller 控制器

<div ng-app="ngApp" ng-init="message='hello world'" ng-controller="ngController"></div>

<script type="text/javascript">

var app = angular.module('ngApp', [])

var controller app.controller('ngController', function($scopr) {})

</script>

ng-bind資料繫結

有點類似 Vue 中的 v-bind

ng-model資料雙向繫結

有點類似 Vue 中的 v-model

<input type="text" ng-model="message">

ng-repeat資料迴圈

有點類似 Vue 中的 v-for

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">

<p>使用 ng-repeat 來迴圈陣列</p>

<ul>

<li ng-repeat="x in names">

{{ x }}

</li>

</ul>

</div>

ng-if為HTML增加選擇功能，只有在表示式值為true時，當前元素才新增到DOM樹

有點類似 Vue 中的 v-if

ng-show有點類似 v-showng-src有點類似 :srcng-click有點類似 @clickng-style有點類似 :styleng-class有點類似 :classng-show/ng-hide有點類似 jq 的中 show(),hide()ng-disabled有點類似 :disabledng-checked有點類似 :checked$scope有點類似 Vue 中的 data()屬性filter過濾器，有點類似Vue 中的 filter$scope.$watch有點類似 Vue 中的 watch屬性

今天就先到這裡吧，其實應該是有些先入為主了，因為其實 Vue 是學了 angular.js 的思想的。

這裡有一個很重要的思考方式就是遷移思考。