AngularJS--ngAnimate模塊

 

 

1.ngRoute模塊的使用

  使用步驟：

  (1)建立index.html，引入css/js，聲明ngView

  (2)建立模板頁面

  (3)建立模塊，配置路由字典

    module.config(function($routeProvider){

             $routeProvider.

when('/start', {templateUrl: 'xxx.html'})

})

  (4)測試：  http://IP/index.html#/start

 

 

 

 

 

2.ngAnimate模塊的使用

  Angular自己沒有提供任何動畫效果，但ngAnimate模塊提供了一些「動畫鉤子(hooks)」，能夠鉤住用戶自定義JS(jQuery.animate())、Transition、Keyframes動畫效果。

  ngAnimate模塊爲下述指令提供的動畫鉤子：ngRepeat, ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView and ngClass。

演示：使用ngAnimate提供的動畫鉤子調用自定義的Transition動畫效果。

(1)引入angular.js、angular-animate.js

(2)自定義模塊聲明依賴ngAnimate模塊，相關指令就會自動生成動畫鉤子

(3)針對動畫鉤子編寫Transition動畫

   

    /*要離開的元素動畫開始時的樣式*/

    .page.ng-leave {

      left: 0;

      opacity: 1;

    }

    /*要離開的元素動畫結束時的樣式*/

    .page.ng-leave.ng-leave-active {

      left: -100%;

      opacity: 0;

    }

    /*要進入的元素動畫開始時的樣式*/

    .page.ng-enter {

      left: 100%;

      opacity: 0;

    }

    /*要進入的元素動畫結束時的樣式*/

    .page.ng-enter.ng-enter-active {

      left: 0;

      opacity: 1;

    }

 

 

 

3.AngularJS階段項目

   day01:

am：完成基本頁面切換效果

pm：每一個模板頁面的靜態內容

提升：仿「餓了麼」的樣式實現Bootstrap定製

   day02：

am：完成後臺PHP頁面

pm：發起AJAX請求，呈現動態數據

  

 

 

4.補充：如何實現頁面包含

 

  項目中，習慣把多個頁面中徹底同樣的內容，單獨提取出來做爲一個獨立的文件(如header.html、footer.html)，凡是須要此文件的頁面，引入該頁面便可。頁面包含能夠採用多種方案：

  (1)利用Web服務器的SSI命令：客戶端請求一個頁面，服務器一次返回多個頁面——須要修改Web服務器配置文件。

  (2)使用服務器端動態語言提供的頁面包含函數：如PHP:

include('header.php');

....echo '主體';

include('footer.php');

客戶端請求一個頁面，服務器返回多個PHP頁面組合後的一個頁面。

  (3)在客戶端使用AJAX技術：先加載一個頁面的主體內容，加載完成後，再去請求header.html、footer.html放到空容器中

<div id="header"></div>

<main>XXXXXXXX</main>

<div id="footer"></div>

-----------------------------------------

$.ready(function(){

$('#header').load('header.html');

$('#footer').load('footer.html');

})

    提示：AngularJS中ng模塊提供了一個指令：ngInclude，已經實現了方法3。

<div ng-include=" 'tpl/header.html' "></div>

 

 

 

 

面試題：說出下面幾段代碼運行後的效果：
View：       <p>{{count}}</p> Controller:     $scope.count=0;     setInterval(function(){       $scope.count++;     }, 1000)	View：       <p>{{count}}</p> Controller:     $scope.count=0;     $interval(function(){       $scope.count++;     }, 1000)
View：       <p>{{count}}</p> Controller:     $scope.count=0;     setInterval(function(){       $scope.count++;       $scope.$digest( );     }, 1000)	View：       <p>{{count}}</p> Controller:     $scope.count=0;     setInterval(function(){       $scope.count++;       $scope.$apply( );     }, 1000)
View：       <p>COUNT1: {{count1}}</p>     <p>COUNT2: {{count2}}</p> Controller:     $scope.count1=0;     $scope.count2=0;       setInterval(function(){       $scope.count1++;     }, 1000)     $interval(function(){       $scope.count2++;     }, 1000)	View：       <p>COUNT1: {{count1}}</p>     <p>COUNT2: {{count2}}</p> Controller:     $scope.count1=0;     $scope.count2=0;       setInterval(function(){       $scope.count1++;     }, 1000)     $interval(function(){       //$scope.count2++;     }, 1000)