AngularJS ng路由应用
上回说道,ng路由的基本概念,基本了解了ng路由是做什么用的,这一回我们说一下ng路由的指令,语法,还有一些描述,用一个小案例来详细为大家讲解一下ng路由的实际用途。
ng路由:
ng路由是AngularJS官方提供的一种简单的路由操作。
ng路由主要分三个组成部分:路由指令、路由服务、路由服务提供者。
语法:
<ng-view [οnlοad=”string”] [autoscroll]=”string”></ng-view>
onload:当视图发生改变时执行属性值中的表达式
autoscroll:当视图发生改变时自动触发$anchorScroll事件
事件:
路由视图一旦加载时,就会自动触发$viewContentLoaded事件
描述:
内置服务对象$routeProvider主要用于进行路由配置
该服务的使用必须依赖ngRoute模块,也就是项目中必须添加animate-route.js
路由指令:ng-view
描述:
ngView指令主要用于将路由指向的页面渲染到当前页面的布局中。
指令概述:
指令会创建自己独立的作用域。
我们先来看一下路由的工作流程:
大致了解一下操作的流程,我们来做一个实际案例,为大家演示一下路由的正确用法:
首先我们来引入所需要的文件:
<!-- 引入核心框架文件 -->
<script src="../js/lib/AngularJS/angular.min.js"></script>
<!-- 引入Angular路由模块文件 -->
<script src="../js/lib/AngularJS/angular-route.js"></script>
接下来,我们创建两个锚点,用于路由的传递:
<ul>
<li><a href="#!/" target="_blank" rel="external nofollow" >首页</a></li>
<li><a href="#!/shopcart/xiangle" target="_blank" rel="external nofollow" >购物车</a></li>
</ul>
在body里指定一个显示路由传递的页面的一个模块:
<!-- 指定显示模板的位置 -->
<div ng-view></div>
接下来就是AngularJS路由的操作:
<script>
var app = angular.module("myApp", ["ngRoute"]);
/*
在不同的路由模板页面之间进行跳转时
就不可避免的设计到不同页面模板互相传递参数的问题
在Angular的路由中,通过URL地址进行参数的传递
如:要查看某用户的购物车商品,就必须传递用户账号作为查询的参数
http://www.mytaobao.com/ab/qu/#!/shopcart/xxx :查询账号为xxx的购物车商品
http://www.mytaobao.com/ab/qu/#!/shopcart/yyy:查询账号为yyy的购物车商品
将参数作为URL的一部分进行数据传递的方式,称为RESTful风格
Angular路由中,通过 :参数名称 的方式进行数据传递
获取路由地址中的参数,通过$routeParams服务来获取参数数据
*/
app.config(["$routeProvider", function($routeProvider) {
$routeProvider
.when("/", {
templateUrl:"template/main.html",
controller:function($rootScope,$scope) {
$scope.user = $rootScope.user;
}
}).when("/shopcart/:userID", {
templateUrl:"template/shopcart.html",
controller:function($routeParams) {
/*获取路由中传递的参数数据*/
console.log($routeParams.userID);
/*获取到参数,进行后续的操作*/
}
}).otherwise("/");
}]);
</script>
其实AngularJS的ng路由,类似与js中的选项卡,table切换效果,都是在同一页面上点击锚点展示不同的页面,使用起来也非常的方便,系统资源也不会被过多的占用。
希望今天的案例可以帮助到大家~