AngularJS--ngRoute模块

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

1.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;

    }

2.补充：如何实现页面包含

  项目中，习惯把多个页面中完全一样的内容，单独提取出来作为一个独立的文件(如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)