为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 AngularJs

AngularJs

标签：
JavaScript

<!doctype html>

<!-- 要在这里引用模块名 -->

<html lang="en" ng-app='myApp'>

<head>

<meta charset="UTF-8">

<title>AngularJs初识2</title>

<!--引入AngularJs的文件-->

<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="angular.min.js"></script>

<script type="text/javascript">

//模块化:angular.module(模块名，空数组)

/* 

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

  phonecatApp.controller('PhoneListCtrl',function($scope,$rootScope) {

  $scope.name='Hello world';

  })

  //建议用这种方式,解决压缩问题!

var m1 = angular.module('myApp', []);

  m1.controller('one',['$scope',function($scope) {

  $scope.name='Hello world';

  }])

    m1.controller('two',['$scope',function($scope) {

  $scope.name='Hi world';

  }])

 工具方法:

  1:angular.bind();---类似---》call()/apply(); 改this指向

  function show(a,b){

alert(this);

alert(a+":"+b);

}

angular.bind(document,show)(3,4);

2:angular.copy();-------》拷贝对象

var a  ={

'name':'张三'

};

var b  = {

'age':'18'

};

var c = angular.copy(a,b);------->a把所有值覆盖给了b

console.log(c);

console.log(b);

3:angular.extend();-------》继承对象

var a  ={

'name':'张三'

};

var b  = {

'age':'18'

};

var c = angular.extend(a,b); ------》a继承了b的属性

console.log(c);

console.log(a);

console.log(b);

4：angular.isArray(); 判断是否为一个数组对象

var  arr = [];

console.log(angular.isArray(arr));

5:  angular.isDate();   判断是否为一个日期对象

6： angular.isDefined(); 判断是否存在

7:  angular.isUndefined(); 判断是否不存在

8:  angular.isFunction(); 判断是否为一个函数

9:  angular.isNumber(); 判断是否为一个数字

10: angular.isObject(); 判断是否为一个对象

11: angular.isString(); 判断是否为一个字符串对象

12: angular.isElement(); 判断是否为一个元素（标签对象）

13: angular.version             获取AngularJs的版本号

console.log(angular.version);

14:angular.equals(a,b);         比较是否相等

注意:

var a = NaN;

var b = NaN;

 a==b;                           false

console.log(angular.equals(a,b));  //为true 

15:angular.forEach(对象,回调函数,result);

对象:数组对象，集合对象,json对象...

回调函数有两个参数:值,对象名(下标)

result:在回调函数中this代表它。

var json={

'name':'八重樱',

'age' :'500'

};

var result={


};

angular.forEach(json,function(value,index){

console.log(index+":"+value);

this[index]=value;

this.love='卡莲'

},result);

console.log(result);

16: angular.fromJson();  将字符串转换为json对象类似与JSON.parse();


var str = '{"name":"芽衣","age":"18"}';

//var json=JSON.parse(str);

var json  = angular.fromJson(str);

console.log(json);


angular.toJson(); 将json对象转化为字符串类似与JSON.stringify();

第二个参数,true.是否换行，可读性高

var json={

'name':'八重樱',

'age' :'500'

};

//var str  = JSON.stringify(json);

var str = angular.toJson(json,true);

console.log(str);

console.log(typeof(str));

17: angular.lowercase/uppercase  大小写转换

console.log(angular.lowercase('HELLO'));

console.log(angular.uppercase('hello'));

18: angular.bootstrap(绑定模块的对象,[]) 动态初识化模块  不使用ng-app

[] ---------->ng-app

['myApp']---->ng-app='myApp'

var m1 = angular.module('myApp', []);

  m1.controller('one',['$scope',function($scope) {

  $scope.name='Hello world';

   }])

   m1.controller('two',['$scope',function($scope) {

  $scope.name='Hi world';

   }])

   document.onclick=function(){

    angular.bootstrap(this,['myApp']);

   }

$scope.$apply()  看实例!

setTimeout(function(){

  $scope.name='ok';(值不会改变)

},2000);


var m1 = angular.module('myApp', []);

  m1.controller('one',['$scope',function($scope) {

  $scope.name='Hello world';

  setTimeout(function(){

  $scope.$apply(function(){

  $scope.name='ok';(值会改变)

  });

},2000);

}])

document.onclick=function(){

    angular.bootstrap(this,['myApp']);

   }

angular.module().run();//建立全局作用域的属性

var m1 = angular.module('myApp', []);

m1.run(['$rootScope',function($rootScope){

$rootScope.name='Hello world';

}]);

console.log(m1);

 自定义过滤器:

var m1 = angular.module('myApp', []);

//让字符串的首字母大写

m1.filter('firstUpper',function(){

return function(str,num){

return str.charAt(0).toUpperCase()+str.substring(1)+num;

}

});

 m1.controller('one',['$scope','$filter',function($scope,$filter) {

  //$scope.name='Hello world';

  $scope.name=$filter('firstUpper')('Hello world',2);

  }])

ng-repeat指令-----》in遍历集合  

<li ng-repeat='data in dataList'>`data`</li>

  var m1 = angular.module('myApp', []);

m1.controller('one',['$scope','$filter',function($scope,$filter) {

  //$scope.name='Hello world';

  $scope.dataList=['姬子','琪雅娜','芽衣'];

  }])

                            表格例子：

               

<!doctype html>

<html lang="en" ng-app='myApp'>

<head>

<meta charset="UTF-8">

<title>Document</title>

<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="angular.min.js"></script>

<script type="text/javascript">

var m1 = angular.module('myApp', []);

m1.controller('one',['$scope','$filter',function($scope,$filter) {

//原始数据

  var  oData=[

  {'name':'八重樱','age':'500','phone':'134845','email':'cc.com'},{'name':'芽衣','age':'15','phone':'13455845','email':'cb.com'},{'name':'琪雅娜','age':'13','phone':'13455845','email':'ca.com'}

  ];

  $scope.dataList=oData;

  $scope.fn_sort=function(arg){

  //开关

  arguments.callee['fn_sort'+arg]=!arguments.callee['fn_sort'+arg];

  //排序，第三个参数，控制从大---》小，小----->大

  $scope.dataList=$filter('orderBy')($scope.dataList,arg,arguments.callee['fn_sort'+arg]);

  }

  $scope.fn_serach = function(){

  //过滤器

  $scope.dataList=$filter('filter')(oData,$scope.seaVal);

  }

  }])

</script>

</head>

<body>

<div ng-controller='one'>

<input type='text' ng-model='seaVal'/> <input type="button" value='搜索' ng-click='fn_serach()'>

<hr/>

<table border='1'>

<tr>

<td ng-click='fn_sort("name")'>姓名</td>

<td ng-click='fn_sort("age")'>年龄</td>

<td>电话</td>

<td>邮箱</td>

</tr>

<tr ng-repeat='data in dataList'>

<td>`data`.`name`</td>

<td>`data`.`age`</td>

<td>`data`.`phone`</td>

<td>`data`.`email`</td>

</tr>

</table>

</div>

</body>

</html>


            

                    事件指令

ng-click------------------->onclick

ng-mousedown--------------->onmousedown

其他都类似

区别在于，js原生的事件不支持{{}}表达式

                       

                         ng-readonly ：输入框等不是按钮的禁用

ng-disabled:按钮禁用

true:禁用

false:不禁用

                        ng-checked：是否选中

                        ng-value 和value  

                        na-value='text'=======>value='`text`' //提高用户体验

$interval指令 用法类似setInterval()

                        

                禁用例子:

<!doctype html>

<html lang="en" ng-app='myApp'>

<head>

<meta charset="UTF-8">

<title>ng-disabled</title>

<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="angular.min.js"></script>

<script type="text/javascript">

var m1 = angular.module('myApp', []);

//需要添加$interval

m1.controller('one',['$scope','$interval',function($scope,$interval) {

var now = 5;

$scope.text=now+'秒';

$scope.isDisabled=true;

/* 第一种，使用$apply

var setTime=setInterval(function(){

$scope.$apply(function(){

now--;

$scope.text=now+'秒';

if(now==0){

clearInterval(setTime);

$scope.isDisabled=false;

$scope.text='可以点击啦';

}

});

},1000);

*/

//第二种使用$interval指令 用法类似setInterval()

var setTime = $interval(function(){

now--;

$scope.text=now+'秒';

if(now==0){

$interval.cancel(setTime);

$scope.isDisabled=false;

$scope.text='可以点击啦';

}

},1000);

  }]);

</script>

</head>

<body>

<div ng-controller='one'>

<!-- 按钮 ng-disabled 

true  :禁用

false :不禁用 -->

<input type='button' value='`text`' ng-disabled='isDisabled'/>

        <!-- 输入框 ng-readonly 

true  :禁用

false :不禁用 -->

                <input type='text' value='`text`' ng-readonly='isDisabled'/>

                <input type='checkbox' ng-value='text' ng-checked='isDisabled'/>

                

<!-- 数据显示优化 

ng-cloack:

原理；数据未解析前，div的display:none

     数据解析后，div的display:block

ng-bind:适用用单个数据

ng-bind-template:适用用多个数据

-->

<div ng-cloack>`text`</div>


<div ng-bind='text'></div>

<div ng-bind-template='`text`,`text`'></div>

</div>

</body>

<script type="text/javascript">

alert("1");

</script>

</html>

*/


</script>

</head>

<body>

<div ng-controller='one'>

</div>

<!-- <div ng-controller='one'>`name`</div>

<div ng-controller='two'>`name`</div> -->

    

</body>


</html>



点击查看更多内容
发表于 2018.10.20 13:37， 共 1872 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

不要慕码人我要切诺基

JAVA开发工程师
手记
篇
粉丝
37
获赞与收藏
120

关注作者，订阅最新文章

相关文章推荐

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消