项目
1.【ngRoute模块】
Route:路由：通过某条线路找目标内容
ngRoute:模块的目标，就是根据浏览器中的URl中的一个特殊地址标记，查找到该标记对应的页面，并异步加载到当前页面的ngView指令中；使用步骤：
1）创建唯一的html页面，声明容器ngView指令，引入angular.js angular-route.js
2）创建模块页面
3) 创建module 声明依赖ng ngRoute两个模块；
4）在module中配置路由字典
module .config(function($routeProvider){//配置路由字典 指定路由地址与模板对象的对应关系
$routeProvider
.when('/s',{
templateUrl:'tpl/start.html',
controller:'startCtrl'//此处声明的控制器可以供当前模板页面中的所有元素使用
})
.when('/m',{
templateUrl:'tpl/main.html'
})
.otherwise({//若url提供了不存在的路由地址 重定向
redirectTo:'/s'
})
5）使用浏览器测试
http://IP地址/index.html#/strat;
2.ngAnimate模块
angular本身没有提供任何动画效果，但ngAnimate提供了一些“动画钩子(hooks)”，可以钩住JS Transition Keyframes动画效果；
ngAnimate模块为下述指令定义了一些动画钩子：
- ngRepeat
- ngInclude
- ngIf
- ngSwitch
- ngShow
- ngHide
- ngClass
- ngView:
演示：使用ngAnimate调用Transition;
1.引入angular.js angular-animate.js；
2.自定义模块：依赖'ng','ngRoute','ngAnimate'模块；相关指令就会自动生成相关的钩子；
3.针对钩子编写动画；
<style>
body{
position: relative;
overflow-x: hidden;
}
.page{
transition:all .3s linear;
position:absolute;/*改left要绝对定位*/
width:100%;
}
/*要离开的元素动画开始的样式*/
.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;
}
</style>
1.补充：如何实现页面包含
项目中，习惯把多个页面中完全一样的内容，单独提取出来作为一个独立的文件(如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>
5.补充ngRoute知识点：—— 路由参数
路由参数：一个模板页面跳转到第二个模板页面时，可以在URL中向第二个页面传递数据——路由参数的作用类似于多页应用中的查询字符串：“?k=v&k=v”，只是SPA应用中模板页面间跳转时一般不使用查询字符串。路由参数形如：
http://127.0.0.1/index.html#/detail/33/5000/bj
http://127.0.0.1/index.html#/detail/50/11000/sh
路由地址后固定名称的尾部可以追加一些变量，用于传递数据——路由参数。
目标页面如何声明路由参数的变量名：
.when('/detail/:age/:salary/:loc' , { } )
目标页面如何读取路由参数的值：
.controller('目标页面的控制器', function($scope, $routeParams){
console.log($routeParams); //{age:'', salary:'', loc:''}
})
6.注意：Angular的$http发送异步请求
GET请求： $http.get('url?k=v').success(fn);
POST请求： $http.post('url', 'k1=v1&k2=v2').success(fn);
提示：默认情况下，$http发起的POST请求消息有个默认头部：
Content-Type: application/json
PHP服务器是无法接收这种请求数据的！必须让客户端修改请求头部为：
Content-Type: application/x-www-form-urlencoded
实现方法：
module.run(function($http){
//配置POST请求的默认头部
$http.defaults.headers.post = {'Content-Type' : 'application/x-www-form-urlencoded'}
})
|
jQuery补充函数： var str = jQuery.param(obj); 作用：把一个JS对象转换为一个字符串，形如：'k1=v1&k2=v2&...'，转换后的字符串可用于HTTP请求数据。 |
