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

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

.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

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