您的位置：首页 > Web前端 > JavaScript

Angular.js（二）

2017-07-18 18:35 190 查看
angular.js的模块化：主要的好处就是减少变量间的污染，也可以做到模块间的相互依赖，js部分采用模块的方式写，页面的没有变化

angular.module（'涵数名称'，[所要依赖的模块，如果不需要依赖别的模块，一个空数组就可以]）；

采用下面的写法，在开发或者压缩都不会出现问题

<!DOCTYPE html>
<html ng-app='MyApp'>  //ng-app = "规定从哪个模块开始初始化"
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Examples</title>
<script src="js/angular.js"></script>
<script>
var m1 = angular.module('MyApp',[]); 
//angular.moduel('模块的名称',[需要依赖哪些模块])
m1.controller('A',['$scope',function($scope){  
//m1下有一个controller方法('函数名称',['$scope',function($scope){}]);
$scope.name = "你好";
}]);
m1.controller('B',['$scope',function($scope){
$scope.name = "明天你好";
}]);
</script>
</head>
<body>
<div ng-controller = 'A'>
<p>{{name}}</p>
</div>
<div ng-controller = 'B'>
<p>{{name}}</p>
</div>
</body>
</html>


angular.js的工具方法

angular.bind：改变this的指向

function show(a,b){
alert(a);
alert(b);
alert(this)
}
//下面的三种传参的形式，最后的结果弹出的都是 ：10,100，hello
angular.bind('hello',show,10,100)();
angular.bind('hello',show)(10,100);
angular.bind('hello',show,10)(100);


angular.copy：拷贝对象

var a = {name : '小明'}
var b = {age : 20}
//把a的全部内容copy给c
var c = angular.copy(a);
console.log(c);    //显示object{name : '小明'}
//把a的全部内容copy给c和b
var c2 = angular.copy(a,b);
console.log(c2);   //显示object{name : '小明'}
console.log(b);    //显示object{name : '小明'}


angular.entend：对象继承

var a = {name : '小明'}
var b = {age : 20}
//c会继承a中的所有内容
var c = angular.extend(a);
console.log(c);    //显示object{name : '小明'}
//c会继承a和b中的所有内容,a和b的内容不会发生改变
var c2 = angular.extend(a,b);
console.log(c2);   //显示Object {name: "小明", age: 20}
console.log(b);    //显示object{age: 20}
angular.isArry：判断是不是数组（是数组返回true，不是返回false）

angular.isDate：判断是不是时间对象

angular.isDefind：判断一个元素是存在的（找的到返回true，找不到false）

angular.isUndefind：判断一个元素是不存在的（找的到返回true，找不到返回false）

angular.isFunction：判断是不是函数

angular.isNumber：判断是不是数字

angular.isObject：判断是不是对象

angular.isString：判断是不是字符串

angular.isElement：判断是不是元素（angular支持用jQuery获取的元素）

angular.version：查看angular的版本信息

angular.equals：判断两个元素是否相等（只要是相同的两个元素，就会返回true ，两个NaN比较，返回true，两个数组 [ ] 比较，返回true）

angular.forEach：循环便利

//针对是数组时，两个参数就可以了
var obj = ['a','b','c'];
angular.forEach(obj,function(value,i){
console.log(value);    // a b c  第一个参数代表数组中的每一项
console.log(i);        // 0 1 2  第二个参数代表位置
});

//针对是json时，想要返回数组，就需要有三个参数
var obj2 = {'name':'小明','age':'20'}
var result = [];
angular.forEach(obj2,function(value,key){
console.log(value);    //小明  20
console.log(key);      //name  age
this.push(key + ':' + value)  //this指的就是result
},result)
console.log(result)


angular.fromJson/toJson：将字符串解析成json/将json转化为字符串

//将字符串转化为json
var str = {"name":"hi","age":"20"}
var json = angular.fromJson(str);
console.log(json);
//将json转为字符串
var json = {name : 'hi',age:20}
var str = angular.toJson(json,true);  //加上true，让字符串看起来更整洁
console.log(str);


angular.identity/noop：参数传的是什么，最后返回的就是什么

angular.lowercase/uppercalse：大小写的转换

angular.element：获取元素

//前提是没有引入jQuery文件
<div id="box">1223</div>
<script>
var oBox = document.getElementById('box');
angular.element(oBox).css('background','red');
</script>
//引入jQuery文件以后 angular.element = $
<div id="box">1223</div>
<script>
//两种方法结果一样
angular.element('#box').css('background','red');
$('#box').css('background','red');
</script>


angular.bootstrap：动态的初始化，就可以不用在html中添加ng-app  

动态初始化的好处就是 想什么时候初始化就初始化

ng-app = '模块名称' ，如果有多个ng-app
= '模块'，只会初始化第一个模块，想实现多个模块一起初始化，必须采用js的方法：angular.bootstrap

var m1 = angular.module('myApp1',[]);
m1.controller('A',['$scope',function($scope){
$scope.name = 'hello';
}])

var m2 = angular.module('myApp2',[]);
m2.controller('B',['$scope',function($scope){
$scope.name = 'world';
}])

document.onclick = function(){    //当点击document的时候，会动态的初始化多个模块
var aDiv = document.getElementsByTagName('div');
angular.bootstrap(aDiv[0],['myApp1']);
angular.bootstrap(aDiv[1],['myApp2']);
}


angular.injector：（在angular内部实现的）注册器

$scope.$apply：针对数据的变化

function A($scope){
$scope.name = "hello";
setTimeout(function(){
$scope.$apply(function(){
$scope.name = "hi";   //当$scope.name中的内容发生改变时，就触发了这个定时器
})
},2000)
}
angular.run：初始化全局变量，可以省略控制器（全局组作用域，可以省略angular.controller）

<script>
var m1 = angular.module('myApp',[]);
m1.run(['$rootScope',function($rootScope){
$rootScope.name = "hello";
}]);
</script>
</head>
<body>
<div><p>{{name}}</p></div>
</body>
angular的过滤器

currency：金额的过滤（默认情况下为$，变成￥时，需要过滤 |currency：'￥'）

number：对数字的过滤（有小数时，默认情况下显示三位小数， | numbe：‘想要显示几位小数’）

lowercase/uppercase：可以将大小写转换

json：将字符串转换为json格式

limitTo：将字符串截取几位 | limitTo：2（截取两位字符）

date：过滤为日期 

orderBy：（数组中存放的数据是以json的形式存储的）对数组中的json数据进行排序  | orderBy ： ‘age’ ：true   如果写true，代表的就是逆排序

filter：过滤器 | filter ：‘l’ （过滤出包含 l 的所有数据）  |filter ：‘l’ ：true （过滤出满足数据为 l 的数据）

过滤器扩展部分

可组合使用过滤器  {{ name | limitTo ：2 | uppercase }}

js中使用过滤器

$scope / $rootScope / $timeout / $filter

var m1 = angular.module('myApp',[]);
m1.controller('A',['$scope','$filter',function($scope,$filter){
$scope.name = $filter('limitTo')('hello',3); // 字符串hello，经过滤器过滤后截取三个字符
}])
自定义过滤器：下面的两种方法都可以将字符串的首字母变成大写

angular.module   controller / run    filter

<script>
var m1 = angular.module('myApp',[]);
m1.filter('filst',function(){
return function(str){
console.log(str); //返回的就是 hello
return str.charAt(0).toUpperCase() + str.substring(1);
}
})
m1.controller('A',['$scope',function($scope){
$scope.name ='hello';
}])

</script>
</head>
<body>
<div ng-controller = "A">
<p>{{name | filst}}</p>
</div>
</body>
<script>
var m1 = angular.module('myApp',[]);
m1.filter('first',function(){
return function(str){
console.log(str);   //返回的就是 hello
return str.charAt(0).toUpperCase() + str.substring(1);
}
})
m1.controller('A',['$scope','$filter',function($scope,$filter){
$scope.name =$filter('first')('hello');
}])

</script>
</head>
<body>
<div ng-controller = "A">
<p>{{name}}</p>
</div>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  模块化 angular.js 框架
相关文章推荐
新的分享
章节导航