> For the complete documentation index, see [llms.txt](https://note.niefee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://note.niefee.com/summary/4/2016-nian-4-yue-19-ri.md).

# 2016年4月19日

\[TOC]

## 2016年4月19日

### angularjs

#### 内部传播方式

* $emit
  * 向上广播
* $broadcast
  * 向下广播
* event
  * targetScope
    * 点击目标
  * currentScope
    * 当前目标
  * name
    * 事件名称
  * stopPropagation()
    * 阻止冒泡
* 内部传播方式
  * $routeChangeStart
  * $viewContentLoaded

#### 运动插件

* CSS3的方式
* ng-enter
  * 运动进入开始
* ng-enter-active
  * 运动进入结束
* ng-leave
  * 运动离开开始
* ng-leave-active
  * 运动离开结束
* 支持的指令
  * if,view,repeat,include,swtich
  * repeat
    * ng-enter-stagger
    * animation-delay

```css
.box{ transition:1s all;}
.box.ng-enter{ opacity:0;}
.box.ng-enter-active{ opacity:1;}
.box.ng-leave{ display:none;}
.box.ng-enter-stagger{
    animation-delay : 100ms;
}
```

* ng-hide-add
* ng-hide-add-active
* ng-hide-remove
* ng-hide-remove-active
* 支持的指令
  * class,show,hide,model等

```css
.box{ width:200px; height:200px; background:red; transition:1s all;}
.box.ng-hide-remove{ opacity:0;}
.box.ng-hide-remove-active{ opacity:1;}
.box.ng-hide-add{ opacity:1;}
.box.ng-hide-add-active{ opacity:0;}
```

* JS方式
  * animation()
  * enter/leave
  * removeClass/addClass

```javascript
m1.animation('.box',function(){
    return {
        addClass : function(element,sClass,done){
            //console.log(element);
            //console.log(sClass);
            //console.log(done);
            $(element).animate({width:0,height:0},1000,done);
        },
        removeClass : function(element,sClass,done){
            $(element).css({width:0,height:0});
            $(element).animate({width:200,height:200},1000,done);
        }
    };
});
```

#### ngResource

支持 RESTful 架构模式

* get()
  * 获取的内容
* query()
  * 区别
* save()
* delete()
