angular.js 1.3.10
mvvm, 也叫作mvc, 谷歌在推广这个框架, 主要致力于解决ajax开发过程中带来的痛苦; 建议放到服务器环境下;
- 改变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指向谁, 函数名, 参数1, 参数2, 参数```);
- copy
var arr1 = [1,2,3];
var arr2 = [];
angular.copy(arr1, arr2);
angular.copy(克隆谁, 克隆到哪里去);
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(); 比较两个元素是否相等;
var arr1 = [1,2,3,4];
var arr2 = [1,2,3,4];
alert(angular.equals(arr1, arr2));//true,
angular 对比过后NaN 和NaN 相等;
- forEach(): 循环, 可以循环数组和json
var arr = ['a', 'b', 'c', 'd'];
angular.forEach(arr, function(v, k){
console.log('v', 'k')//v==>元素 k===>下标
});
angular.forEach(循环谁, fn(v, k));
- isArray(); isDate();
var oDate = new Date();
alert(angular.isDate(oDate));
lowercase(); uppercase();
angular命名空间: ng-开头;
第一个程序:
天生就产生数据的元素: input类, ng-model="name"; 数据名称;
展示数据: {{name}}
<div ng-app> ng-app: 开启angular的应用模式;
<input type="text" value="" ng-model='a' />
{{a}}
</div>
指令(directive): 指令以ng-开头, 扩展HTML语法;
- ng-app
- ng-init
- ng-bind
- ng-model
- ng-show
ng-app一个页面只能有一个;所以一般都加给HTML
另一种展示数据的方式: ng-bind="数据名称"; 数据出错不会展示模板标记;
<div ng-app> ng-app: 开启angular的应用模式;
<input type="text" value="" ng-model='a' />
{{a}}
<strong ng-bind="a"></strong>
</div>
- ng-init: 初始化数据, 针对非input类标签;
<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: 点击
<div ng-init="a=false">
<input type="button" value="按钮" ng-click="a=!a" />
<div id="div1" ng-show="a"></div>
</div>
- ng-repeat: 循环
<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, 依赖注入, 双向数据绑定;
依赖注入:
<input type="text" ng-model="a">
<input type="text" ng-model="a">
双向数据绑定: 函数传参, 名字定死, 跟顺序无关;
- 定义控制器: function show($scope){$scope.a=12}
- <div ng-controller="show"></div>
// angular.module(模块名, [依赖的模块], fn[配置函数]);
<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>
多个控制器: 可以继承, 继承看DOM结构, 也可以进行数据的传递
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>
多个控制器之间的数据传递:
- 子级传递给父级:
传递: $emit(发生的数据名称, 发射的数据),
接收: $on() - 父级传递给子级:
传递:
接收: $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">
父级的: {{a}}
<div ng-controller="ctrl2">
<input type="number" ng-model="aaa" ng-change="c()"/> <br/>
{{b}}
</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;
//把数据给子级:
$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">
父级的: {{a}}
<div ng-controller="ctrl2">
<input type="number" ng-model="aaa" ng-change="c()"/> <br/>
<div ng-controller="ccc">{{aaa}}</div>
</div>
</div>
数据脏检查: 数据更改了, 但是视图没有更改;
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>
控制器中注入的都是服务[service]:
- $scope,
- $timeout
- $interval
