分析第十講插件1

1、第十講 angularjsngRoutengAnimate 插件ngSanitize學(xué)習(xí)要點(diǎn)：Angularjs 中的Angularjs 中的Angularjs 中的ngSanitizengRoute ngAnimate主講教師：（樹根）：(PhoneGap 中文網(wǎng))合作合作： (IT 營)1Angularjs 中的 ngSanitize讓瀏覽器簡析 html引入 jsangular-sanitize.min.js在 module 中引入一下插件 var app = angular.module(myApp, ngSanitize);3. 使用綁定數(shù)據(jù)2Angularjs 中的 ngRoute

2、AngularJS 路由介紹：AngularJS 路由功能是一個純前端的解決方案，與熟悉的路由不太一樣。路由，通過不同的 URL 會路由到不同的控制器上(controller)，再渲染(render)到頁面(HTML)。AngularJS 的前端路由，需求提前對指定的(ng-app)，定義路由規(guī)則(routeProvider)，然后通過不同的 URL，告訴(ng-app)加載哪個頁面(HTML)，再渲染到(ng-app)視圖(ng-view)中。AngularJS 的前端路由，雖然 URL 輸入不一樣，頁面展示不一樣，其實(shí)完成的單頁(ng-app)視圖(ng-view)的局部刷新。這樣來看，A

3、ngularJS 做單頁應(yīng)用就有點(diǎn)標(biāo)配的感覺了。AngularJS 路由使用：引入 js 依賴注入var m1 = angular.module(myApp,ngRoute);m1.config($routeProvider,function($routeProvider)$routeProvider.when(/aaa/:num,template : 首頁的內(nèi)容name,/templateUrl controller : Aaa).when(/ccc,template : 課程的內(nèi)容name, controller : Ccc).otherwise(redirectTo : /aaa););

4、數(shù)據(jù)顯示:$routeParams獲取參數(shù)路由事件:$on$routeChangeStart$routeChangeSucs/Errorm1.run($rootScope,function($rootScope)$rootScope.$on($routeChangeStart,function(event,current,pre) console.log(event);console.log(current); console.log(pre);););頁面跳轉(zhuǎn):無標(biāo)題文檔var m1 = angular.module(myApp,ngRoute); m1.config($routeProvi

5、der,function($routeProvider)$routeProvider.when(/aaa/:num,template : 首頁的內(nèi)容name, controller : Aaa).when(/bbb,template : 學(xué)員的內(nèi)容name, controller : Bbb).when(/ccc,template : 課程的內(nèi)容name, controller : Ccc).otherwise(redirectTo : /aaa););m1.run($rootScope,function($rootScope)$rootScope.$on($routeChangeStart,

6、function(event,current,pre)1.$location.path(aaa/123) 2.ionic 路由插件/angular-ui/ui-router3Angularjs 中的 ngAnimateconsole.log(event); console.log(current); console.log(pre);););m1.controller(Aaa,$scope,$location,$routeParams,function($scope,$location,$r outeParams)$ = o;$scope.$location = $location; cons

7、ole.log( $routeParams ););m1.controller(Bbb,$scope,function($scope)$ = hi;);m1.controller(Ccc,$scope,function($scope)$ = 你好;);首頁學(xué)員課程1. 引入 jsvar m1 = angular.module(myApp,ngAnimate);使用下面的幾種方式使用說明：當(dāng)有一個單頁面的程序，并且想為這個頁面添加動畫效果。點(diǎn)擊某一個會將一個試圖滑出，同時將另一個試圖滑入。就會用到 ngAnimate1. 使用ngRoute 來為的頁面路由2. 使用ngAnimate 來為頁面創(chuàng)

8、建動畫效果3. 對頁面使用 CSS Animations4. 當(dāng)離開或進(jìn)入試圖時，的每一個頁面會有不同的動畫效果ngAnimateCSS3 的方式（1）：ng-enterng-enter-active ng-leaveng-leave-active支持的指令 if,view,repeat,include,swtich repeat：ng-enter-staggeranimation-delayngAnimateCSS3 的方式（2）：ng-hide-addng-hide-add-active ng-hide-removeng-hide-remove-active支持的指令class,show,hide,m等ngAnimateJS 方式animation()enter/leave removeClass/addClass感謝收看本次由 phonegap 中文網(wǎng)(本)提供我是主講老師： 樹根郵箱：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,1