angular.js 1.3.10
mvvm, 也叫作mvc, 谷歌在推廣這個(gè)框架, 主要致力于解決ajax開(kāi)發(fā)過(guò)程中帶來(lái)的痛苦; 建議放到服務(wù)器環(huán)境下;
- 改變this的指向:
function show(){
alert(this);
}
show();//window;
var c = angular.bind(21, show);
c();//21;
//傳參:
var c = angular.bind(12, show, 'abc', 'def');
angular.bind(this指向誰(shuí), 函數(shù)名, 參數(shù)1, 參數(shù)2, 參數(shù)```);
- copy
var arr1 = [1,2,3];
var arr2 = [];
angular.copy(arr1, arr2);
angular.copy(克隆誰(shuí), 克隆到哪里去);
console.log(arr2);
- angular.element: angular中的dom操作;類似于window.onload
angular.element(document).ready(function(){
alert('1');
});
angular.element(document).ready(function(){
var oDiv = document.getElementById('div1');
angular.element(oDiv).on('clcik', function(){
angualr.element(this).css('background', 'red')
});
});
- equals(); 比較兩個(gè)元素是否相等;
var arr1 = [1,2,3,4];
var arr2 = [1,2,3,4];
alert(angular.equals(arr1, arr2));//true,
angular 對(duì)比過(guò)后NaN 和NaN 相等;
- forEach(): 循環(huán), 可以循環(huán)數(shù)組和json
var arr = ['a', 'b', 'c', 'd'];
angular.forEach(arr, function(v, k){
console.log('v', 'k')//v==>元素 k===>下標(biāo)
});
angular.forEach(循環(huán)誰(shuí), fn(v, k));
- isArray(); isDate();
var oDate = new Date();
alert(angular.isDate(oDate));
lowercase(); uppercase();
angular命名空間: ng-開(kāi)頭;
第一個(gè)程序:
天生就產(chǎn)生數(shù)據(jù)的元素: input類, ng-model="name"; 數(shù)據(jù)名稱;
展示數(shù)據(jù): {{name}}
<div ng-app> ng-app: 開(kāi)啟angular的應(yīng)用模式;
<input type="text" value="" ng-model='a' />
{{a}}
</div>
指令(directive): 指令以ng-開(kāi)頭, 擴(kuò)展HTML語(yǔ)法;
- ng-app
- ng-init
- ng-bind
- ng-model
- ng-show
ng-app一個(gè)頁(yè)面只能有一個(gè);所以一般都加給HTML
另一種展示數(shù)據(jù)的方式: ng-bind="數(shù)據(jù)名稱"; 數(shù)據(jù)出錯(cuò)不會(huì)展示模板標(biāo)記;
<div ng-app> ng-app: 開(kāi)啟angular的應(yīng)用模式;
<input type="text" value="" ng-model='a' />
{{a}}
<strong ng-bind="a"></strong>
</div>
- ng-init: 初始化數(shù)據(jù), 針對(duì)非input類標(biāo)簽;
<div ng-init="a=12">
{{a}}
</div>
<div ng-init="arr=['a', 'b', 'c', 'd']">
{{arr}}
</div>
- ng-show="true/false" ng-hide="true/false"
<div ng-show="true/fasle" style="width: 100px; height: 100px; background: red;"></div>
<input type="checkbox" ng-model="a" />
{{a}}
<div ng-show="a" stylw="width: 100px; height:100px; background: red;"></div>
- ng-click: 點(diǎn)擊
<div ng-init="a=false">
<input type="button" value="按鈕" ng-click="a=!a" />
<div id="div1" ng-show="a"></div>
</div>
- ng-repeat: 循環(huán)
<div ng-init="arr=['a', 'c', 'b', 'd']">
<ul>
<li ng-repeat="val in arr">{{val}}</li>
</ul>
</div>
<div ng-init="arr=['a', 'c', 'b', 'd']">
<input type="button" ng-click="arr.push('123')" />
<ul>
<li ng-repeat="val in arr">{{val}}</li>
</ul>
</div>
控制器: controller, 依賴注入, 雙向數(shù)據(jù)綁定;
依賴注入:
<input type="text" ng-model="a">
<input type="text" ng-model="a">
雙向數(shù)據(jù)綁定: 函數(shù)傳參, 名字定死, 跟順序無(wú)關(guān);
- 定義控制器: function show($scope){$scope.a=12}
- <div ng-controller="show"></div>
// angular.module(模塊名, [依賴的模塊], fn[配置函數(shù)]);
<html ng-app="app" lang="en">
var app = angular.module('mk', []);
//app.controller(控制器的名稱, fn)
app.controller('show', function($scope){
$scope.a = 12;
});
<div ng-controller="show">{{a}}</div>
多個(gè)控制器: 可以繼承, 繼承看DOM結(jié)構(gòu), 也可以進(jìn)行數(shù)據(jù)的傳遞
var app = angular.module('mk', []);
app.controller('show1', function($scope){
$scope.a = 12;
});
app.controller('show2', function($scope){
$scope.a = 23;
})
//use:1
<div ng-controller="show1">
{{a}}
</div>
<div ng-controller="show2">
{{a}}
</div>
//use:2
<div ng-controller="show1">
{{a}}
<div ng-controller="show2">
{{a}}
</div>
</div>
多個(gè)控制器之間的數(shù)據(jù)傳遞:
- 子級(jí)傳遞給父級(jí):
傳遞: $emit(發(fā)生的數(shù)據(jù)名稱, 發(fā)射的數(shù)據(jù)),
接收: $on() - 父級(jí)傳遞給子級(jí):
傳遞:
接收: $on
var app = angular.module('mk', []);
app.controller('ctrl1', function($scope){
<!-- $scope.a =0; -->
$scope.$on('data', function(event, data){
$scope.a = data+1;
})
});
app.controller('ctrl2', function($scope){
$scope.c = function(){
alert($scope.aaa);
$scope.$emit('data', $scope.aaa);
};
})
<div ng-controller="ctrl1">
父級(jí)的: {{a}}
<div ng-controller="ctrl2">
<input type="number" ng-model="aaa" ng-change="c()"/> <br/>
{载矿}
</div>
</div>
var app = angular.module('mk', []);
app.controller('ctrl1', function($scope){
<!-- $scope.a =0; -->
$scope.$on('data', function(event, data){
$scope.a = data+1;
//把數(shù)據(jù)給子級(jí):
$scope.$broadcast('newdata', data);
})
});
app.controller('ctrl2', function($scope){
$scope.c = function(){
alert($scope.aaa);
$scope.$emit('data', $scope.aaa);
};
})
app.controller('ccc', function($scope){
$scope.$on('new-data', function(event, data){
$scope.aaa = data - 1;
});
});
<div ng-controller="ctrl1">
父級(jí)的: {{a}}
<div ng-controller="ctrl2">
<input type="number" ng-model="aaa" ng-change="c()"/> <br/>
<div ng-controller="ccc">{{aaa}}</div>
</div>
</div>
數(shù)據(jù)臟檢查: 數(shù)據(jù)更改了, 但是視圖沒(méi)有更改;
var app = angular.module('mk', []);
app.controller('ctrl', functin($scope){
$scope.a =1;
//1
setTimeout(function(){
$scope.a = 12;
}, 1000);
//2
setTimeout(function(){
$scope.$apply(function(){
$scope.a = 12;
});
});
});
//3.
app.controller('ctrl', function($scope, $timeout){
$scope.a = 2;
$timeout(function(){
$scpe.a = 3;
});
});
<div ng-controller="ctrl">
{{a}}
</div>
控制器中注入的都是服務(wù)[service]:
- $scope,
- $timeout
- $interval
