zoukankan      html  css  js  c++  java

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

    

     
    

    

    
    
                
    
                
              
    • 
              
    
              
  • 

                相关阅读:
    
                
                  .Net中通过反射技术的应用插件程序的开发入门 
                    
    html超链接button 
                    
    WCF 跨域 Http绑定 
                    
    在ASP.NET MVC中修改默认代码生成/支架模板 
                    
    使用Lambda表达式重构委托 
                    
    使用公用表表达式（CTE）简化嵌套SQL 
                    
    WCF同域动态绑定服务地址 
                    
    WCF 跨域TCP绑定 
                    
    Silverlight 基础收集 
                    
    WCF服务控制台托管方法（不使用配置文件） 
                    
                        
              
    • 
              
    
              
  • 
                原文地址：https://www.cnblogs.com/eveblog/p/4838813.html
              
    • 

            

          



          
          

            

            

          

        

      

      



      

      

        

          Copyright © 2011-2022 走看看