AngularJS/Vue/React 都是通過JS利用H5自定義標簽和屬性的能力，提供一些指令和邏輯控制，實現(xiàn)界面邏輯。所以他們在很多設(shè)計方面都有相似點。
JS部分
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
使用模塊定義應(yīng)用app，并創(chuàng)建controller控制器
如果有依賴模塊，angular.moduel('myApp',['依賴的模塊']);
II、作用域 $scope 控制器controller和 HTML5元素 交互的中介
可以在 $scope 中定義數(shù)據(jù)/函數(shù)，然后在 HTML5 元素中使用；反過來，也可以通過 $scope 引用HTML5 中的因素
a、每個controller 都有一個 $scope
b、全局有一個 $rootScope，各個控制器直接如果想共享數(shù)據(jù)則通過 $rootScope
app.controller('myCtrl', ['$scope','$rootScope',function($scope,$rootScope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
$scope.inc = function(){
}
}]);
2、概念
I、參數(shù) - 數(shù)據(jù)存取
{{ 變量名 }}
支持表達式操作
{{ Number + 1}}
{{ firstName + '-' + lastName }}
{{ i > 0 ? 1 : 0}}
II、邏輯控制
a、迭代
{{ x.name + ', ' + x.country }}
b、條件判斷
可以控制當前的元素是否出現(xiàn)
經(jīng)典的表格處理
{{ x.Name }}
{{ x.Name }}
{{ x.Country }}
{{ x.Country }}
從基本頁面邏輯處理看，angularJS和Vue的用法是一致的。
3、綁定
I、模型ng-model - 表單數(shù)據(jù)綁定 （雙向綁定）
其實，雙向綁定非常類似 Java中的 JavaBean ，JavaBean的變化影響到具體的展示，同樣具體的展示也會影響JavaBean的值，典型的應(yīng)用比如在ORM中，或者JSP中
輸入你的名字:
$scope.text = [];
II、數(shù)據(jù)綁定/元素綁定 ng-bind
剩余字數(shù):
-- 這個例子是兩者使用區(qū)別最直觀的，ng-model 綁定一個參數(shù)，然后在js中使用（也可以反向影響），這里的HTML的value是 主動觸發(fā)的，ng-bind 從 js提供一個方法/值， HTML 的值是被動使用的
ng-bind是從$scope -> view的單向綁定
ng-modle是$scope <-> view的雙向綁定
從綁定數(shù)據(jù)來看，angularJS和Vue也是一致的。
4、邏輯-事件-控制
前面沒有展開來說，從這里詳細描述一下
a、從作用域來說，Vue并沒有做明確說明，可以認為是一個Vue對象就是一個作用域；而angularJS 則定義了scope作用域和普通js數(shù)據(jù)區(qū)分開來
b、顯式的在 模塊基礎(chǔ)上 定義了 控制器，這是Vue沒有的
c、把 方法 分為 控制器和服務(wù)，做了區(qū)分， 控制器需要 DI 依賴注入(這是Spring的設(shè)計理念也用在這里)服務(wù)才能使用，這點 Vue 也沒有做特殊處理
從這些來看，angularJS 要比 Vue 復(fù)雜的多
更多依賴注入的問題，后面再詳細描述
I、ng-xxx指令+ 控制器方法
隱藏/顯示
名:
姓:
姓名: {{firstName + " " + lastName}}
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
}
});
II、其他方法
過濾器
AngularJS 使用了 管道符 | 用來過濾數(shù)據(jù) -- 和Linux類似，Vue也類似
filter -- 選擇子集
lowerCase/uppercase -- 大小寫轉(zhuǎn)換
orderBy -- 排序
currency -- 轉(zhuǎn)換為貨幣形式
{{ (x.name | uppercase) + ', ' + x.country }}
5、表單元素
同Vue一樣，通過 ng-model 綁定數(shù)據(jù)
比如文本輸入框：
Last Name:
6、組件化
angularJS通過自定義指令來實現(xiàn)組件化的功能，和Vue的自定義指令不是一個概念。
I、典型例子
var app = angular.module("myApp", []);
app.directive("caption", function() {
return {
template : '{{x.name}}'
};
});
循環(huán)對象:
{{ x.name + ', ' + x.country }}
II、組件化的步驟
一、注冊一個組件
a、定義組件 通過模塊的指令 app.directive("caption", function(){});
b、定義組件類型 restrict: 'E', 指定是 屬性還是標簽
c、定義控制器，里面定義一些邏輯
d、編譯 complie 方法，在模版替換的各個生命周期階段，可以有回調(diào)函數(shù)
二、使用 template 進行替換 標簽元素
三、父控件(外層) 傳遞數(shù)據(jù)給 子控件(內(nèi)層)，通過 在 scope中定義的 屬性，可以直接把數(shù)據(jù)傳給內(nèi)層
四、子控件(內(nèi)層) 傳遞數(shù)據(jù)給父控件(外層),通過事件來傳遞
使用 scope.$broadcast 把事件廣播出去， scope.$on 監(jiān)聽事件
使用 scope.$watch 觸發(fā)事件
其中，二、三、四步，angularJS和Vue極其相似，只是在第一步，angularJS 明顯復(fù)雜很多
define(['angular','bootstrap','css!test.style.control'], function() {
var showpane = angular.module('test.app.control',[])
showpane.directive('testShowpane', function() {
return {
restrict: 'E',
transclude: true,
scope: {
data : '=',
},
controller: [ "$scope", function(scope) {
var scrolls = scope.scrolls = scope.data;
console.log(scrolls);
}],
compile: function(tEle, tAttrs) {
console.log(tEle.html());
return {
pre: function(scope, iElem, iAttrs){
console.log('pre link => ' + iElem.html());
},
post: function(scope, iElem, iAttrs){
console.log('post link => ' + iElem.html());
_link(scope, iElem, iAttrs);
}
}
},
template:
'
\
\
\
\
',
replace: true
};
function _link(scope, iElem, iAttrs){
function percentHeight(num){
return (Math.round(1 / num * 10000) / 100.00 + "%");
}
scope.$watch('data', function(newValue,oldValue) {
if (scope.data) {
scope.heightStyle = "height:" + percentHeight(newValue.length) +";";
scope.$broadcast("datachange", newValue);
}
}, true);
scope.$on('datachange',function (event, msg) {
console.log(msg);
});
}
});
return showpane;
});
7、其他
I、ng-option 下拉框
II、表單驗證
所有表單都有 這幾個屬性，以及對應(yīng)的方法驗證 $dirty/$invalid/$error
III、全局API
比較 isArray/ isDate/ isNumber ...
轉(zhuǎn)換 formJSON /toJSON 可以把Json序列化成字符串，也可以把字符串反序列化成 Json
迭代 foreach
系統(tǒng) bootstrap 啟動/ element 獲取 HTML DOM
其他常見指令
IV、控制元素可視化 ng-disabled/ng-show/ng-hidd
V、包含文件
--模塊話的一種方式，把重復(fù)的代碼在這里模塊化
完整的angular 組件化 例子可以見參見《完整的客戶端組件化案例 angularJS + requireJS》
