AngularJs route ng路由 单页面应用(下)
来源:互联网 发布:js后退一页 编辑:程序博客网 时间:2024/04/20 10:00
AngularJS ng路由应用
上回说道,ng路由的基本概念,基本了解了ng路由是做什么用的,这一回我们说一下ng路由的指令,语法,还有一些描述,用一个小案例来详细为大家讲解一下ng路由的实际用途。
ng路由:
ng路由是AngularJS官方提供的一种简单的路由操作。
ng路由主要分三个组成部分:路由指令、路由服务、路由服务提供者。
语法:
<ng-view [onload=”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="#!/">首页</a></li> <li><a href="#!/shopcart/xiangle">购物车</a></li></ul>
<!-- 指定显示模板的位置 --><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切换效果,都是在同一页面上点击锚点展示不同的页面,使用起来也非常的方便,系统资源也不会被过多的占用。
希望今天的案例可以帮助到大家~
2 0
- AngularJs route ng路由 单页面应用(下)
- AngularJs route ng路由 单页面应用(上)
- angularJS 路由 ng-route
- AngularJs ng-route路由详解
- AngularJs ng-route路由详解
- ng中的路由和单页面应用
- AngularJS学习(六) 路由控制 ng-route
- AngularJS 路由:ng-route 与 ui-router
- AngularJS 路由:ng-route 与 ui-router
- angularjs-route路由总是跳到登陆(欢迎)页面
- angularJs 中 ng-route与ui-router路由的区别
- Angularjs ng-route用法
- angularJs搭建多页面应用-angularJs路由。
- angularJs-route路由详解
- AngularJS $route路由
- AngularJS中的基础路由,通过ng-route实现基本的路由功能
- AngularJs ng的路由机制
- 关于AngularJs ng-router路由
- 数组的操作——查表法
- 作业3
- Servlet入门篇
- git提交的常见错误(长期更新)
- 网页常见效果,jquery弹出层
- AngularJs route ng路由 单页面应用(下)
- 交换排序-冒泡排序
- Java 连接MySQL,返回Json数据
- poj3279 Fliptile 好题
- 《数据结构》课程测验系统
- deepin 15.4 wifi 不正常工作
- MVP架构在Android平台上的实现分析(二)
- SurfaceFlinger
- Centos部署ffmpeg