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) |
