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)