angularJs 笔记(一)

一、模块的依赖与注入(官方推荐方式)

把myApp设置为启动点，同时把多个模块注入到myApp里面。 var myApp=anglar.moudle('app',['myController','myDirective','myService']); var myController=anglar.moudle('controller',[]); var myDirective=anglar.moudle('directive',[]); var myService=anglar.moudle('service',[]);

二、{{取值表达式}}与ng-bind的区别

{{取值表达式}}在网络加载缓慢时用户会到{{取值表达式}}的标签会影响用户体验，解决方案使用ng-bind

三、ng-class 用法

a)、ng-class="{{className}}" 直接使用class b)、ng-class="{error:isError,warning:isWarning}" 当isError或isWarning为true时，显示error或warning相应的样式。

四、ng-show 用法

a)、toggleMenu开关的实现(点击按钮时，每次取反)

html: <div ng-show="toggleMenu()"></div> js: $scope.menuState={show:false}; $scope.toggleMenu=function(){ $scope.menuState.show=!$scope.menuState.show; }

五、ngAnimate 用法

1、支持ngAnimate的基本指令

ngShow ngHide ngIf ngRepeat ngView ngClass ngInclude ngSwitch

2、实现步骤如下：

a)、在页面引入angular-animate.js b)、在启动点注入ngAnimate模块 var myApp=anglar.moudle(‘app’,[‘ngAnimate’]); c)、在ui-view或者ng-view加上相应的className d)、className的定义 定义相应的基础样式和@keyframes动画 写相应的动画样式（样式之间没有空格） .ng-enter{} .ng-leave{} .class.ng-enter{} .class.ng-leave{}

ngAnimate 相应文章：http://www.tuicool.com/articles/nMZvUjm Angular官方动画库:http://augus.github.io/ngAnimate/