angular路由操作
在单页面应用程序中比如angular应用，我们需要根据url的变化(即：不同的请求)，来分配不同的资源。根据请求的URL来决定执行哪个模块，这个过程叫路由，同时，我们需要设计路由规则。
下面给出一个简单的小demo:
html结构：
<body ng-app='rootApp'>
<ul>
<li><a href='#/'>主页</a></li>
<li><a href='#/floor1'>一楼</a></li>
<li><a href='#/floor2'>二楼</a></li>
</ul>
<!-- ng-view 渲染站位 -->
<div ng-view></div>
</body>
<!-- 引入angular包 -->
<script src='bower_components/angular/angular.js'></script>
<!-- 引入angular-route包 -->
<script src='bower_components/angular-route/angular-route.js'></script>
<!-- 下面是渲染模板 -->
<script id='tmpl' type='text/ng-template'>
<h1>{{placeholder}}</h1>
</script>js结构：
/* 此处定义模块，由于需要设定路由，所以要注入ngRoute */
var rootApp = angular.module('rootApp', ['ngRoute']);
/* 定义路由表（路由规则）*/
rootApp.config(['$routeProvider', function($routeProvider) {
/* $routeProvider 就相当于交通警察，根据when和otherwise指挥路由走向 */
$routeProvider
.when('/', {
// 当请求的“URL” / , 找当前定义控制器和视图
controller: 'DefaultController',
/* template: '<h1>{{hello}}</h1>' */
templateUrl: 'tmpl'
})
.when('/floor1/1', {
controller: 'Floor1',
templateUrl: 'tmpl'
})
/* 这里用:id这种形式来保存路由参数，以便后来用$routeParams可以取到 */
.when('/floor2/:id/:name/:age', {
controller: 'Floor2',
templateUrl: 'tmpl'
})
.otherwise({
/* 都不匹配，定向到根目录 */
redirectTo: '/'
});
}]);
// 定义相关控制器
rootApp.controller('DefaultController', ['$scope', function($scope) {
$scope.placeholder= '当前为主页';
}]);
rootApp.controller('Floor1', ['$scope', function($scope) {
$scope.placeholder = '当前为1楼';
}]);
rootApp.controller('Floor2', ['$scope', '$routeParams', function($scope, $routeParams) {
/* $routeParams 用于解析请求参数 */
console.log($routeParams);
$scope.placeholder= '当前为2楼';
}]);
总结：
angular中的路由需要使用它的ngRoute模块，具体使用方法如上所示，其中路由表的设计是通过模块配置$routeProvider的when和otherwise来处理不同的请求参数。
其中ng-view用于占坑，when中的template或者是templateUrl用于渲染控制层定义的数据，去填这个坑，其中路由参数是根据:parmName 来指定，通过$routeParams来解析参数。
angular路由操作的更多相关文章
- angular 路由项目例子
angular 路由是我在工作中体验非常便捷的一点, 这是详细的API ,查看API 可以了解很多东西, https://github.com/angular-ui/ui-router/wiki/Qu ...
- Angular路由的定义和使用
一.什么是routing(路由) Almost all non-trivial, non-demo Single Page App (SPA) require multiple pages. A se ...
- angular路由（自带路由篇）
一.angular路由是什么? 为了实现SPA多视图的切换的效果,其原理可简述为每个 URL 都有对应的视图和控制器.所以当我们给url后面拼上不同的参数就能通过路由实现不同视图的切换. 二.文件总览 ...
- Angular 路由守卫
1. 路由 Angular路由: 可以控制页面跳转:可以在多视图间切换: 2. 路由守卫 Angular路由守卫: 在进入或离开某路由时,用于判断是否可以离开.进入某路由::: return true ...
- angularjs中使用锚点，angular路由导致锚点失效的两种解决方案
壹 ❀ 引 公司新项目开发中,首页要做个楼层导航效果(如下图),要求能点击图标对应跳到楼层即可,因为不需要跳转过度动画,也要求最好别用JQ,想着原生js操作dom计算top的兼容性,想着用锚点实现算 ...
- angular路由——ui.route
angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- angular路由详解：
1.$routeProvider ngRoute模块中的服务 2.otherwise:设置用于路由改变时,与任何其他定义的路由无法匹配的时候执行的代码 3.when:为$route服务定义新的路由 例 ...
- angular 路由的引用
使用angular路由 遇到的坑. 使用cmd 安装好node.js 安装成功 输入node -v 能查看版本说明安装成功 搭建angular项目输入命令 npm install -g angu ...
- BackBone结合ASP.NET MVC实现页面路由操作
1. 问题的背景 什么是页面路由操作,就是通过浏览器地址栏的标记来实现页面内部的一些操作,这些操作具有异步性和持久性.应用场景主要有页面操作过程中的添加收藏夹的操作.后退操作等过程中能完全恢复界面. ...
随机推荐
- Hadoop RPC简单例子
jdk中已经提供了一个RPC框架-RMI,但是该PRC框架过于重量级并且可控之处比较少,所以Hadoop RPC实现了自定义的PRC框架. 同其他RPC框架一样,Hadoop RPC分为四个部分: ( ...
- json和xml的两者区别
服务器端返回给客户端的数据一般都是JSON格式,JSON数据以键值的形式保存,数据之间以逗号分隔,{}表示对象,[]表示数组.JSON数据解析方案有四种,JSONKit,SBJson,TouchJso ...
- [dsu on tree]【学习笔记】
十几天前看到zyf2000发过关于这个的题目的Blog, 今天终于去学习了一下 Codeforces原文链接 dsu on tree 简介 我也不清楚dsu是什么的英文缩写... 就像是树上的启发式合 ...
- E 洛谷 P3598 Koishi Loves Number Theory[数论]
题目描述 Koishi十分喜欢数论. 她的朋友Flandre为了检测她和数论是不是真爱,给了她一个问题. 已知 给定和个数,求对取模. 按照套路,呆萌的Koishi当然假装不会做了,于是她来向你请教这 ...
- msp430系统时钟
转自 http://m.blog.csdn.net/blog/msdumin/38441493# MSP430基础时钟模块包含以下3个时钟输入源. 一.4个时钟振荡源 1.LFXT1CLK: 外部晶 ...
- javascript函数大全
JavaScript函数大全 1.document.write(""); 输出语句2.JS中的注释为//3.传统的HTML文档顺序是:document->html->( ...
- 2017年 Java 程序员，风光背后的危机
不得不承认,经历过行业的飞速发展期,互联网的整体发展趋于平稳.为什么这么说?为什么要放在 Java 程序员的盘点下说? 的确,对于进可攻前端,后可守后端大本营的 Java 程序员而言,虽然供应逐年上涨 ...
- 【数据结构】——搜索二叉树的插入，查找和删除（递归&非递归）
一.搜索二叉树的插入,查找,删除 简单说说搜索二叉树概念: 二叉搜索树又称二叉排序树,它或者是一棵空树,或者是具有以下性质的二叉树 若它的左子树不为空,则左子树上所有节点的值都小于根节点的值 若它的右 ...
- SpringBoot简单连接数据库以及查询数据
实现大概思路:配置数据库环境-->实体类-->新建**Repostory接口并且继承JpaRepository-->配置URL映射以及请求方式- 首先,在数据库中新建名称为dbgir ...
- selenium+chrome抓取淘宝搜索抓娃娃关键页面
最近迷上了抓娃娃,去富国海底世界抓了不少,完全停不下来,还下各种抓娃娃的软件,梦想着有一天买个抓娃娃的机器存家里~.~ 今天顺便抓了下马爸爸家抓娃娃机器的信息,晚辈只是觉得翻得手酸,本来100页的数据 ...