angular笔记

angular方法

1. bind

绑定对象，作为函数的上下文

2. forEach

对象或数组的迭代函数

            var json = {"name":"hello","age":"20","sex":'男'};
              angular.forEach(json,function(val,key){
                  console.log(val);//hello  20  男
                  console.log(key);//name age sex
              });

              var results=[];
              angular.forEach(json,function(val,key){
                  this.push(key+'--'+val);
              },results);
              console.log(results);// ["name--hello", "age--20", "sex--男"]

3. copy

数组或对象深度拷贝

              $scope.a={name:'张三'};
              $scope.b={age:10};
              $scope.c=angular.copy($scope.a,$scope.b);

              console.log($scope.a);//{name:'张三'}
              console.log($scope.b);//{name:'张三'}

4. formJson

反序列化，将字符串转换成json对象

              var json = '{"name":"hello","age":"20"}';
              console.log(json);//{"name":"hello","age":"20"}  字符串

              $scope.json=angular.fromJson(json);
              console.log($scope.json);//对象

5. toJson

序列化，将json对象转换成字符串

              var json = {"name":"hello","age":"20"};
              console.log(json);//json对象

              $scope.json=angular.toJson(json);
              console.log($scope.json);//json字符串

6. extend

继承

              $scope.a={name:'张三'};
              $scope.b={age:10};

              $scope.c=angular.extend($scope.b,$scope.a);
              console.log($scope.b);//{age: 10, name: "张三"}

7. 比较

8. $scope里的$apply

作用：$scope 提供$apply 方法传播 Model 的变化
使用场景：AngularJS 外部的控制器（DOM 事件、外部的回调函数如 jQuery UI 空间等）调用了 AngularJS 函数之
后，必须调用$apply。在这种情况下，你需要命令 AngularJS 刷新自已（模型、视图等）， $apply就是
用来做这件事情的。

 
      

          

            {{name}} {{age}}
          
      
       
    

9. $scope里的$watch

作用：$watch 方法监视 Model 的变化

    
      


          


              
单价:
              
个数:
              
费用:{{ sum() | currency:'￥' }}
              
运费:{{iphone.fre | currency:'￥'}}
              
总额:{{ sum() + iphone.fre | currency:'￥'}}
          

      
      
       
    

引入模块

html

    
    
    
    




    

     
        {{name}}
    
    

     
        {{name}}
    
    

     
        {{name}}
    

js

var app2 = angular.module("myApp2", []);
app2.controller('secondController',function($scope){
    $scope.name='李四';
});
app2.controller('threeController',function($scope){
    $scope.name='王五';
});

angular事件指令

1. ng-selected

作用：ng-selected 属性的表达式返回 true 则选项被选中。

    
        
        
        
    
    
      

          

              
              
                  11111
                  22222
              
          
      
      
    

2. ng-change

作用：

• ng-change
  指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作。
• ng-change
  指令需要搭配 ng-model 指令使用。
• ng-change
  事件在值的每次改变时触发，它不需要等待一个完成的修改过程，或等待失去焦点的动作。
• ng-change
  事件只针对输入框值的真实修改，而不是通过 JavaScript 来修改。

    
        
        
        
    
    
      

          

              
              {{c}}
          
      
      
    

3. ng-copy ng-cut ng-paste

• ng-copy
  按下复制键的时候执行的事件
• ng-cut
  按下剪切键的时候执行的事件
• ng-paste
  按下黏贴键的时候执行的事件

    
        
        
        
    
    
      

          

              {{aaa}}
              {{bbb}}
              {{ccc}}
          
      
      
       
    

ng-bind ng-cloak ng-non-bindable

• ng-bind
  指令告诉 AngularJS 使用给定的变量或表达式的值来替换 HTML 元素的内容。
• ng-cloak
  指令用于在 AngularJS 应用在加载时防止 AngularJS 代码未加载完而出现的问题。
• ng-non-bindable
  指令用于告诉 AngularJS 当前的 HTML 元素或其子元素不需要编译。

    
        
        
        
    
    
      

          

              
             

                
              
{{text}}
                 
              
{{text}}
          
      
      
    

ng-repeat

作用：用于循环输出指定次数的 HTML 元素

    
        
        
        
    
    
    
    

        
Which is your favorite?
        
            {{name}}
            
        
        
You chose {{my.favorite}}
    
    

ng-disabled ng-readonly ng-value

ng-disabled： 表达式返回 true 则表单字段将被禁用。
ng-readonly： 表达式返回 true 则表单域为只读。
ng-checked ：属性返回 true，复选框(checkbox)或单选按钮(radio)将会被选中。
ng-value： 指令用于设置 input 或 select 元素的 value 属性。

样式指令

• ng-class
• ng-style
• ng-href
• ng-src
• ng-attr-(suffix)
  作用：绑定的样式指令值可以是字符串也可以是变量，能双向数据绑定
  绑定的样式可以加：，然后后面跟着布尔值，若为真则起作用

DOM 操作指令

• ng-show
  
  表达式为 true 时显示指定的 HTML 元素，否则隐藏指定的 HTML 元素。
• ng-if
  
  表达式为 false 时移除 HTML 元素。
• ng-switch

expression的值为ng-switch-when中的值，相等的项显示
你可以通过使用 ng-switch-default 指令设置默认选项，如果都没有匹配的情况，默认选项会显示。

• ng-open
  
  ...
  
  如果 ng-open 的表达式返回 true 则 details 列表是可见的。

ng-bind ng-bind-html ng-bind-template ng-Include

• ng-bind
  显示数据类似于 {{}}
• ng-bind-html
  解决 ng-bind 中只能绑定一个的问题
• ng-bind-template
  解析 html 代码，需要引入插件ngSanitize

• ng-Include
  加载外部页面

    
        
        
        
    
    
      

        

            {{url}}
            

        
          
      
      
    

$sce

在我们的项目当中会遇到这样的情况，后台返回的数据中带有各种各样的html标签.对于angular 1.2一下的版本我们必须要使用$sce这个服务来解决我们的问题。它可以通过使用$sce.trustAsHtml()。该方法将值转换为特权所接受并能安全地使用“ng-bind-html”。

    
    
    




    

        {{name}}
        

    

ng-model ng-model-options

• ng-model
  可以将输入域的值与 AngularJS 创建的变量绑定。
• ng-model-options
  控制双向事件绑定的时候 触发事件的方式
  

  

    
更新输入框:
    
    
在失去焦点时绑定输入框的值到 scope 变量中:
    {{name}}
  

该实例演示了如何使用 ng-model-options 指令绑定在失去焦点时输入框的值到 scope 变量中。

过滤器

1. uppercase， lowercase 大小转换

{{ "lower cap string" | uppercase }} //结果： LOWER CAP STRING
{{ "TANK is GOOD" | lowercase }} //结果： tank is good

2. json 格式化

{{ {foo: "bar", baz: 23} | json }} //结果： { "foo": "bar", "baz": 23 }

3. date 格式化

{{ 1304375948024 | date }} //结果： May 3, 2011
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }} //结果： 05/03/2011 @ 6:39AM
{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }} //结果： 2011-05-03 06:39:08

4. number 格式化

{{ 1.234567 | number:1 }} //结果： 1.2
{{ 1234567 | number }} //结果： 1,234,567

5. currency 货币格式化

{{ 250 | currency }} //结果： $250.00
{{ 250 | currency:"RMB ￥ " }} //结果： RMB ￥ 250.00

6. filter 查找

{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:'s'}} //查找含有有 s 的行
//上例结果： [{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test
abc"}]
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:{'name':'iphone'} }} //查找 name 为 iphone 的行
//上例结果:[{"age":20,"id":10,"name":"iphone"}]

7. limitTo 字符串，对像的截取

{{ "i love tank" | limitTo:6 }} //结果： i love
{{ "i love tank" | limitTo:-4 }} //结果： tank
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | limitTo:1 }} //结果： [{"age":20,"id":10,"name":"iphone"}]

8. orderBy 对像排序

{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id':true }} //根 id 降序排
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id' }} //根据 id 升序排

9. 控制器使用 filter

   m1.controller('Aaa',['$scope','$filter',function($scope,$filter){
       $scope.name = $filter('date')('236478234','hh');
       $scope.name = $filter('uppercase')('hello');
  }]); 

10. 自定义控制器

方法1：
使用filter()方法添加控制器

	
    


        

        {{'Hello  哈哈' | replaceHello }}
    

方法2：
向控制器添加$filter，使用其设置过滤器

方法3：
外部引入js，添加过滤器
html：

	
    
    


        

            {{name | rHello}}
            

            {{name | rHello:3:5}}
            

            {{name | rJs}}
            {{name}}
        

js：

var appFilter=angular.module("myApp.filter",[]);
appFilter.filter('rJs',function(){
    return function(input,n1,n2){
        console.log(input);
        console.log(n1);
        console.log(n2);
        return input.replace(/js/, "javascript");
    }
});

自定义服务provide里的provider、factory及service方法

当你初试 Angular 时，很自然地就会往 controller 和 scope 里堆满不必要的逻辑。一定要早点意识到，controller 这一层应该很薄；也就是说，应用里大部分的业务逻辑和持久化数据都应该放在 service 里。很多人问道，关于如何在 controller 里保存持久化数据。这就不是 controller 该干的事。出于内存性能的考虑，controller 只在需要的时候才会初始化，一旦不需要就会被抛弃。因此，每次当你切换或刷新页面的时候，Angular 会清空当前的 controller。与此同时，service 可以用来永久保存应用的数据，并且这些数据可以在不同的 controller 之间使用。

1. 添加provide服务的方法

1. 在module中添加

    
    
    



{{name}}

2. 通过方法添加

2.provider特点

1. 返回值要写进$get的回调中
2. 返回值的内容可以是数字、字符串及对象
3. Providers 是唯一一种你可以传进 .config() 函数的 service。当你想要在 service对象启用之前，先进行模块范围的配置，那就应该用 provider。

    
    
    



     

        {{name}}
      

在config中配置

3.factory

Factory 方法直接把一个函数当成一个对象的$get 方法可以直接返回字符串.
用 Factory 就是创建一个对象，为它添加属性，然后把这个对象返回出来。你把service 传进 controller 之后，在 controller 里这个对象里的属性就可以通过factory 使用了。

3. service

Service 是用"new"关键字实例化的。因此，你应该给"this"添加属性，然后 service返回"this"。你把 service 传进 controller 之后，在 controller 里 “this” 上的属性就可以通过 service 来使用了

4. provider、factory及service方法的不同点

1. provider的返回值必须放在 this.$get=function(){ }中；
2. provider、factory返回值可以是数字、字符串及对象，service返回值必须是对象；
3. Provider是唯一一种你可以传进 .config() 函数的 service。

$interpolateProvider改变数据绑定的格式

该服务必须在config中配置

    
    
    



{{name}}
 ##name##

location服务

1. `$locationChangeStart
   
2. `$locationChangeSuccess
   
3. replace( )
   如果被调用，就会用改变后的 URL 直接替换浏览器中的历史记录，而不是在历史记录中新建一条信息，这样可以阻止『后退』。

(function(){
     angular.module('Demo', [])
     .controller('testCtrl',["$location","$scope",testCtrl]);
     function testCtrl($location,$scope) {
        var url = "http://example.com:8080/#/some/path?foo=bar&baz=xoxo#hashValue";
        $location.absUrl();// http://example.com:8080/#/some/path?foo=bar&baz=xoxo#hashValue  返回 url，带有所有的片段
        $location.url();// some/path?foo=bar&baz=xoxo
        $location.protocol();// http 当前 url 的协议 
        $location.host();// example.com  url 中的主机路径
        $location.port();// 8080
        $location.path();// /some/path
        $location.search();// {foo: 'bar', baz: 'xoxo'}
        $location.search('foo', 'yipee');
        $location.search();// {foo: 'yipee', baz: 'xoxo'}
        $location.hash();// #hashValue
        $scope.$on("$locationChangeStart", function () {
          //监听url变化，在变化前做想要的处理
        });
        $scope.$on("$locationChangeSuccess", function () {
          //监听url变化，在变化后做想要的处理
        });
     }
  }());

$cacheFactory 锚点跳转

用法：$anchorScroll([hash]);
作用：当被调用的时候，页面会滚动到与元素相关联的指定的 hash 处，或者滚动到当前 $location.hash() 处。
它会监听 location.hash() 并且无论锚点值何时变化，都会自动地滚动到相应的位置。当不需要它时，可以调anchorScrollProvider.disableAutoScrolling()让它失效。

	

    	
{{id}}aaaaaaaaaa
    
    
{{id}}

$cacheFactory

作用：用于生成一个用来存储缓存对象的服务，并且提供对对象的访问。可以实现不同controller的数据共享
方法：

• put(key,value);
  在缓存对象中插入一个键值对(key,value)。
• get(key);
  在缓存对象中通过指定key获取对应的值。
• romove(key);
  在缓存对象中通过指定key删除对应的值。
• removeAll();
  删除缓存对象中所有的键值对。
• destroy();
  销毁这个缓存对象。
• info();
  获取缓存对象信息（id，size）。

$interpolate

要在字符串模板中做插值操作，需要在你的对象中注入$interpolate服务

	
        
    
{{showText}}

在{{ showText }}内部的文本中可以将{{name }}当做一个变量来使用，并对文本的变化进行实时更新

$q

参考 https://www.cnblogs.com/Likebard/p/7026095.html
$q就是一种对执行结果不确定的一种预先定义，如果成功，就xxxx；如果失败，就xxxx，就像事先给出了一些承诺。
比如，小白在上学时很懒，平时总让舍友带饭，并且事先跟他说好了，如果有韭菜鸡蛋就买这个菜，否则就买西红柿炒鸡蛋；无论买到买不到都要记得带包烟。

小白让舍友带饭()
.then(韭菜鸡蛋，西红柿炒鸡蛋)
.finally(带包烟)

其中defer()用于创建一个deferred对象，defer.promise用于返回一个promise对象，来定义then方法。then中有三个参数，分别是成功回调、失败回调、状态变更回调。
其中resolve中传入的变量或者函数返回结果，会当作第一个then方法的参数。then方法会返回一个promise对象，因此可以写成

xxxx
.then(a,b,c)
.then(a,b,c)
.then(a,b,c)
.catch()
.finally()

例子1

例子2

$log 调试

向控制台输出打印信息，简化调试和排除故障。

• log(); - 打印日志消息
• warn(); - 打印警告消息
• info(); - 打印信息消息
• error(); - 打印错误消息
• debug(); - 打印调试消息
  

    
        
        
        
    
    
      

          

              Message:
              
              log
              warn
              info
              error
              {{message}}