开发者社区> 技术小阿哥> 正文

AngularJs(2)

简介:
+关注继续查看

<!doctype html>

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

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

<head>

<meta charset="UTF-8">

<title>AngularJs初识2</title>

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

<script type="text/javascript" src="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" src="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" src="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>

1
<br>

<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>

1
<br>



本文转自 沉迷学习中 51CTO博客,原文链接:http://blog.51cto.com/12907581/1929085,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
16697 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
36544 0
使用SSH远程登录阿里云ECS服务器
远程连接服务器以及配置环境
14844 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
21205 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
17255 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23629 0
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
37365 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
22473 0
13689
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载