AngularJs学习笔记一

一：什么是angularJs？

基于javascript开发的客户端应用框架，使我们可以更加快捷，简单的开发web应用。
诞生于2009年，后来被google收购，用在了很多项目中。
适用于CRUD应用或者SPA单页面网站的开发。

angularJs资源

http://www.angularjs.org/

https://www.github.com/angular/

http://www.angularjs.cn/

http://www.ngnice.com/

http://woxx.sinaapp.com/

angularJs下载

http://www.bootcdn.cn/angular.js/

如果安装了nodejs，可以用cmd命令安装下载：npm install angular

angularJs有哪些特性？

MVC模式
模块系统
指令系统
依赖注入
双向数据绑定

注：以下教程是针对1.3.0的版本

二、angularJs的MVC方式

数据的挂载
ng-controller
双大括号表达式

angularJs的作用域

$scope 局部作用域
$rootScope 全局作用域
依赖注入服务

利用ng-app引入，用ng-controller控制，html里面引入用双大括号

头部

<!DOCTYPE HTML>
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

js中

function Aaa($scope){
    $scope.name = 'hello';
    $scope.age = '20';
}

html

<div ng-controller="Aaa">
    <p>{{name}}</p>
 </div>

模板

 1 <!DOCTYPE HTML>
 2 <html ng-app>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <script src="angular.min.js"></script>
 7 <script>
 8 function Aaa($scope){
 9     $scope.name = 'hello';
10     $scope.age = '20';
11 }
12 </script>
13 </head>
14 
15 <body>
16 <div ng-controller="Aaa">
17     <p>{{name}}</p>
18  </div>
19 </body>
20 </html>

三、简介指令与双向数据绑定

angularJs的指令系统

ng-app 初始化指令可以加在标签上
ng-controller 连接数据和视图的指令

angularJs的双向数据绑定

MVVM M数据 v视图数据会影响视图视图变化会影响数据
$timeout 定时器需要在参数中定义
ng-click
ng-model

 1 <!DOCTYPE HTML>
 2 <html ng-app>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <script src="angular.min.js"></script>
 7 <script>
 8 
 9 function Aaa($scope,$timeout){
10     $scope.name = 'hello';
11     $timeout(function(){
12         $scope.name = 'hi';
13     },2000);
14     $scope.show = function(){
15         $scope.name = 'hi';
16     };
17 }
18 </script>
19 </head>
20 
21 <body>
22 <!--<div ng-controller="Aaa" ng-click="name='hi'">-->
23 <div ng-controller="Aaa" ng-click="show()">
24     <p>{{name}}</p>
25 </div>
26 </body>
27 </html>

ng-model

<script>
function Aaa($scope,$timeout){
    $scope.name = 'hello';
}
</script>
</head>
<body>
<div ng-controller="Aaa">
    <input type="text" ng-model="name">
    <p>{{name}}</p>
</div>

四、购物金额实例操作

购物金额计算
过滤器 currency 货币格式化
$watch 监听数据变化三个参数 true可选参数针对集合进行监听除了监听参数还可以监听函数

$scope.$watch('iphone.money',function(newVal,oldVal){
        
    },true)

 1 <!DOCTYPE HTML>
 2 <html ng-app>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <script src="angular.min.js"></script>
 7 <script>
 8 function Aaa($scope,$timeout){
 9     $scope.iphone = {
10         money : 5,
11         num : 1,
12         fre : 10
13     };
14     $scope.sum = function(){
15         return $scope.iphone.money * $scope.iphone.num;
16     };
17     /*$scope.$watch('iphone.money',function(newVal,oldVal){
18         console.log(newVal);
19         console.log(oldVal);
20     },true);*/
21     $scope.$watch($scope.sum,function(newVal,oldVal){
22         //console.log(newVal);
23         //console.log(oldVal);
24         $scope.iphone.fre = newVal >= 100 ? 0 : 10; //费用超过100运费为0
25     });
26 }
27 </script>
28 </head>
29 <body>
30 <div ng-controller="Aaa">
31     <p>价格:<input type="text" ng-model="iphone.money"></p>
32     <p>个数:<input type="text" ng-model="iphone.num"></p>
33     <p>费用:<span>{{ sum() | currency:'￥' }}</span></p>
34     <p>运费:<span>{{iphone.fre | currency:'￥'}}</span></p>
35     <p>总额:<span>{{ sum() + iphone.fre | currency:'￥'}}</span></p>
36 </div>
37 </body>
38 </html>

五、angularJs中的模块化操作

angularJs的模块化

angular.module
压缩的问题

普通模块写法

var m1 = angular.module('myApp',[]);
m1.controller('Aaa',function($scope){
    $scope.name = 'hello';
});
m1.controller('Bbb',function($scope){
    $scope.name = 'hi';
});

进化模块写法 （解决压缩问题）

var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
    $scope.name = 'hello';
}]);
m1.controller('Bbb',['$scope',function($scope){
    $scope.name = 'hi';
}]);

其中头部首先需要引用模块名字

<html ng-app="myApp">

第一个普通模块开发的版本是可以的，但是上线进行压缩处理时候局部作用域$scope会出问题找不到可能会被压缩成$,所以推荐用进化的写法数组的写法更好。

angularJs的工具方法

angular.bind
angular.copy
angular.extend

angular.bind(); -> $.proxy() : 改this指向

function show(n1,n2){
    alert(n1);
    alert(n2);
    alert(this);//指向window
}
普通写法
 angular.bind(document,show)();
 传参写法
angular.bind(document,show,3)(4);

angular.copy();  //拷贝对象

var a = {
    name : 'hello'
};
var b = {
    age : '20'
};
 var c = angular.copy(a);    //a把所有值给了c
var c = angular.copy(a,b);   //a把所有值覆盖给了b 此时b=hello

angular.extend();   //对象继承

var a = {
    name : 'hello'
};
var b = {
    age : '20'
};
var c = angular.extend(b,a); //b=c=20,a=hello

六、anglarJs中的工具方法

angular.isArray 判断参数是否是数组是返回true
angular.isDate 是否是时间对象
angular.isDefined 判断一个元素存在
angular.isUndefined 不存在
angular.isFunction 判断是不是函数
angular.isNumber 判断是不是数字
angular.isObject 判断是不是对象
angular.isString 判断是不是字符串
angular.isElement 判断是不是元素
angular.version
angular.equals
angular.forEach
angular.fromJson/toJson
angular.identity/noop
angular.lowercase/uppercase
angular.element
angular.bootstrap
angular.injector

八、angular.module 创建模块

$scope

$scope.$watch
$scope.$apply

angular.module

controller
run

注：模块下面不止run和controller还有很多操作方法

controller的使用方法

 1 <!DOCTYPE HTML>
 2 <html ng-app="myApp" >
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 
 6 <title>无标题文档</title>
 7     <script src="angular.min.js"></script>
 8 <script>
 9     var m1 = angular.module('myApp',[]);
10    m1.controller('Aaa',function($scope){
11        $scope.name = 'hello';
12    })
13    m1.controller('Bbb',function($scope){
14        $scope.name = 'hi';
15    })
16 </script>
17 </head>
18 <body>
19 <div ng-controller="Aaa">
20     <p>{{name}}</p>
21 </div>
22 <div ng-controller="Bbb">
23     <p>{{name}}</p>
24 </div>
25 
26 </body>
27 </html>

其中头部要加代码引入模块

<html ng-app="myApp" >

run的使用方法

run的作用相当于初始化全局数据，然后把值在里面进行挂载操作，不需要创建再引用控制器

 1 <!DOCTYPE HTML>
 2 <html ng-app="myApp" >
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6     <script src="angular.min.js"></script>
 7 <script>
 8     var m1 = angular.module('myApp',[]);
 9     m1.run(['$rootScope',function($rootScope){
10         $rootScope.name = 'hello';
11     }])
12 </script>
13 </head>
14 <body>
15 <div>
16     <p>{{name}}</p>
17 </div>
18 </body>
19 </html>

如果进行局部作用域于时会报错的，所以run没有局部作用域，controller可以相当于局部作用域

 m1.run(['$scope',function($scope){
        $scope.name = 'hello';
    }])

//不会打印出来hello

九.angularJs的过滤器

currency 货币金额过滤器
number 文字转化成数字
lowercase/uppercase 大小写转换
json 格式化数据格式，让其更加工整
limitTo 截取数组字符串
date 日期时间格式化，以毫秒计算
orderBy 对数组排序，但是有格式限制
filter 过滤

  <script>
        var m1 = angular.module('myApp',[]);
        m1.controller('Aaa',function($scope){
            $scope.name = '7755.22000222';
        })
    </script>

currency 货币金额过滤器

 <p>{{name | currency}}</p>   //$7,755.22

加个分隔符竖线写上currency，默认美元货币符号 ,通过后面加个冒号修改货币符号

 <p>{{name | currency:"￥"}}</p> //￥7,755.22

 <p>{{name | number}}</p>  //7,755.220

会把文字转化成数字，比方加上数字千分位分隔符，默认写小数点会保留小数点后三位，通过加加参数改变保留位数

 <p>{{name | number:5}}</p>  //7,755.22000

 <p>{{name | uppercase}}</p> //hello 会转换成HELLO

json的用法

 1 <!DOCTYPE HTML>
 2 <html ng-app="myApp">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5     <title>json用法</title>
 6     <script src="angular.min.js"></script>
 7     <script>
 8         var m1 = angular.module('myApp',[]);
 9         m1.controller('Aaa',function($scope){
10             $scope.name = {"name":"hello","age":"22"};
11            /*
12             不加json打印出
13             {"name":"hello","age":"22"}
14             加json打印出
15             {
16             "name": "hello",
17                     "age": "22"
18           }
19           格式更加工整
20             <pre> 标签是来定义预格式化的文本。被包围在 pre 元素中的文本会保留空格和换行符
21           */
22         })
23     </script>
24 </head>
25 <body>
26 <div ng-controller="Aaa">
27  <pre> <p>{{name|json}}</p></pre>
28 </div>
29 </body>
30 </html>

limitTo的用法

 $scope.name ="hello"; //he
 $scope.name=['a','b','c','d'] //["a","b"] 
    
  <p>{{name|limitTo:2}}</p>

date的用法

  $scope.name ="13344444"; //Jan 1, 1970
    <p>{{name|date}}</p>

格式可以用参数调整,参数非常多，可从API上查找

 <p>{{name|date:'fullDate'}}</p> // Thursday, January 1, 1970

orderBy的用法

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>json用法</title>
    <script src="angular.min.js"></script>
    <script>
        var m1 = angular.module('myApp',[]);
        m1.controller('Aaa',function($scope){
           $scope.name=[
               {name:"heem",age:"33"},
               {name:"asd",age:"13"},
               {name:"dddf",age:"43"},
               {name:"ggg",age:"83"}
           ]
            //age排序 [{"name":"asd","age":"13"},{"name":"heem","age":"33"},{"name":"dddf","age":"43"},{"name":"ggg","age":"83"}] 数字从小到大
            //name排序 [{"name":"asd","age":"13"},{"name":"dddf","age":"43"},{"name":"ggg","age":"83"},{"name":"heem","age":"33"}]  字母a-z
            //参数true 进行逆排序 [{"name":"ggg","age":"83"},{"name":"dddf","age":"43"},{"name":"heem","age":"33"},{"name":"asd","age":"13"}]
        })
    </script>
</head>
<body>
<div ng-controller="Aaa">
    <p>{{ name | orderBy : 'age' : true }}</p>
</div>
</body>
</html>

filter的用法

<p>{{ name | filter : 'asd'}}</p> // 保留下来[{"name":"asd","age":"13"}]剩下的被过滤掉都是都是针对数据值

<p>{{ name | filter : '3'}}</p>  //[{"name":"heem","age":"33"},{"name":"asd","age":"13"},{"name":"dddf","age":"43"},{"name":"ggg","age":"83"}] 只要包含就会筛选出来

<p>{{ name | filter : 'asd':true}}</p>//true匹配完整的[{"name":"asd","age":"13"}]

十.过滤器扩展及自定义过滤器

过滤器可以组合使用 通过分隔符竖线来连接

  $scope.name='heelo' 

 <p>{{ name | limitTo : 2 | uppercase}}</p> // HE 截取2个字符并且转化成大写

除了在表达式操作过滤器也可以在js里面操作过滤器，可以通过依赖注入的方式来实现

JS中使用过滤器

$scope/$rootScope/$timeout
$filter

写法操作格式如下：

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

$scope.name = $filter('uppercase')('hello'); //HELLO 转大写

}]);

注入$scope','$filter ，然后在function里面写上参数。
数字过滤

 $scope.name = $filter('number')('12342256');//12,342,256
 $scope.name = $filter('number')('12342256.11111111',3);//保留小数点三位 在后面进行限制传参  12,342,256.111

自定义过滤器

controller/run
filter

注：通过angular.module下的方法filter进行自定义，angular.module下面前面讲过还有controller和run方法

自定义首字母大写的过滤功能

因为在filter是在模块下的方法，所以要在model下进行自定义函数

  m1.filter('firstUpper',function(){
            return function(str){
               // console.log(str) //str=hello 
                return str.charAt(0).toUpperCase() + str.substring(1);
            }
        })

在下面引用

 <p>{{ name | firstUpper}}</p>

如果想传参可以继续加个参数如传个num

 1 <!DOCTYPE HTML>
 2 <html ng-app="myApp">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5     <title>自定义</title>
 6     <script src="angular.min.js"></script>
 7     <script>
 8         var m1 = angular.module('myApp',[]);
 9         m1.filter('firstUpper',function(){
10             return function(str,num){
11                // console.log(str) //str=hello
12                console.log(num) //num=5 
13                 return str.charAt(0).toUpperCase() + str.substring(1);
14             }
15         })
16         m1.controller('Aaa',['$scope','$filter',function($scope,$filter){
17             $scope.name = 'hello'; //Hello
18 
19         }])
20     </script>
21 </head>
22 <body>
23 <div ng-controller="Aaa">
24     <p>{{ name | firstUpper:5}}</p>
25 </div>
26 </body>
27 </html>

以上是在表达式中进行使用，也可以在js使用

 $scope.name = $filter('firstUpper')('hello'); //Hello 

  <p>{{ name }}</p>

posted @ 2015-09-28 16:53 Eve0803 阅读(310) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Eve

我与我周旋久已，宁做我。

AngularJs学习笔记一

公告