agularJs 路由
angularJs的路由方式：
先定义一个模板ng-app-->然后定义路由的规则（routeProvider）在服务config里-->然后通过不同的URL实现
到单页面加载的所需页面的效果。
以上只是大概流程。
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular.min.js"></script>
<!-- 这是需要插件引入的：angular-route
注意不同版本的angularJs，插件最好对应上这个版本的号，（如果找不到对应版本，相近版本也可以） -->
<script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>
</head>
<body ng-controller="myCon">
<!-- 路由 -->
<!-- ng-click="$location.path('/aaa')" 来改变路径
功能与href的哈希值一样
-->
<a href="#aaa/123">首页</a>
<a href="#bbb/345">aass</a>
<a href="#ccc/76567">qqoc</a>
<div ng-view></div>
<script>
// 使用插件ngRoute
// 可以实现页面切换的效果
// 还有历史记录的功能，可以返回
var myApp=angular.module("myApp",["ngRoute"])
// config配置是最早就执行的方法，所以在里面写好路由规则
.config(['$routeProvider',function($routeProvider){
$routeProvider
/*路由跳转的函数*/
.when("/aaa/:num",{
template: '<p>首页送你温暖</p>{{name}}',
/*可以定义一个控制器，来限制作用域*/
controller:"aaa"
})
.when("/bbb/:num",{
template: '<p>aass送你高温</p>{{name}}',
controller:"bbb"
})
.when("/ccc/:num",{
template: '<p>qqoc送你高冷</p>{{name}}',
controller:"ccc"
})
// 配置其他的路径跳转，可以想成default
.otherwise({
// 重定向地址
// 可以理解为设置默认路径
redirectTo:"/aaa"
})
}]) // 假设我们需要在每次路由发生变化时，都执行一个函数来验证用户的权限，放置这个功能唯一合理的地方就是run方法
// 不过它是全局的
.run(["$rootScope",function($rootScope){
// $on用于接收event与data
// $routeChangeStart这个事件会在路由跳转前触发
$rootScope.$on("$routeChangeStart",function(ev,current,pre){
// 接受三个参数，一个是事件对象，一个是当前对象，一个是之前的对象
console.log(ev);
console.log(current);
console.log(pre);
})
}])
.controller("myCon",["$scope","$routeParams","$location",function($scope,$routeParams,$loaction){
// $scope.$loaction=$loaction;
// console.log($loaction);
// 服务$routeParams保存了地址栏中的参数，例如{id : 1, name : 'tom'}
console.log($routeParams);
}])
.controller("aaa",["$scope",function($scope){
$scope.name="za";
}])
.controller("bbb",["$scope",function($scope){
$scope.name="cs";
}])
.controller("ccc",["$scope",function($scope){
$scope.name="vd";
}])
</script>
</body>
</html>
简化版代码：
这个可以更加简单的知道它的基础使用；
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular.min.js"></script>
<!-- 这是需要插件引入的：angular-route
注意不同版本的angularJs，插件最好对应上这个版本的号，（如果找不到对应版本，相近版本也可以） -->
<script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>
</head>
<body>
<!-- 路由 -->
<a href="#aaa">首页</a>
<a href="#bbb">aass</a>
<a href="#ccc">qqoc</a>
<div ng-view></div>
<script>
// 使用插件ngRoute
// 可以实现页面切换的效果
// 还有历史记录的功能，可以返回
var myApp=angular.module("myApp",["ngRoute"])
// config配置是最早就执行的方法，所以在里面写好路由规则
.config(['$routeProvider',function($routeProvider){
$routeProvider
/*路由跳转的函数*/
.when("/aaa",{
template: '<p>首页送你温暖</p>{{name}}'
})
.when("/bbb",{
template: '<p>aass送你高温</p>{{name}}'
})
.when("/ccc",{
template: '<p>qqoc送你高冷</p>{{name}}'
}) }]) </script>
</body>
</html>
agularJs 路由的更多相关文章
- AgularJS中Unknown provider: $routeProvider解决方案
最近在学习AgularJS, 做到http://angularjs.cn/A00a这一步时发现没有办法执行路由功能, 后来翻看控制台日志,发现提示Unknown provider: $routePro ...
- Angular2入门系列教程6-路由（二）-使用多层级路由并在在路由中传递复杂参数
上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...
- Angular2入门系列教程5-路由（一）-使用简单的路由并在在路由中传递参数
上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...
- nodejs进阶(3)—路由处理
1. url.parse(url)解析 该方法将一个URL字符串转换成对象并返回. url.parse(urlStr, [parseQueryString], [slashesDenoteHost]) ...
- .NetCore MVC中的路由（2）在路由中使用约束
p { margin-bottom: 0.25cm; direction: ltr; color: #000000; line-height: 120%; orphans: 2; widows: 2 ...
- .NetCore MVC中的路由（1）路由配置基础
.NetCore MVC中的路由(1)路由配置基础 0x00 路由在MVC中起到的作用 前段时间一直忙于别的事情,终于搞定了继续学习.NetCore.这次学习的主题是MVC中的路由.路由是所有MVC框 ...
- ASP.NET路由模型解析
大家好,我又来吹牛逼了 ~-＿-~ 转载请注明出处:来自吹牛逼之<ASP.NET路由模型解析> 背景:很多人知道Asp.Net中路由怎么用的,却不知道路由模型内部的运行原理,今天我就给大家 ...
- 路由的Resolve机制（需要了解promise）
angular的resovle机制,实际上是应用了promise,在进入特定的路由之前给我们一个做预处理的机会 1.在进入这个路由之前先懒加载对应的 .js $stateProvider .state ...
- Android业务组件化之子模块SubModule的拆分以及它们之间的路由Router实现
前言: 前面分析了APP的现状以及业务组件化的一些探讨(Android业务组件化之现状分析与探讨),以及通信的桥梁Scheme的使用(Android业务组件化之URL Scheme使用),今天重点来聊 ...
随机推荐
- gem sources --add http://ruby.taobao.org/
gem sources gem sources gem sources --remove http://ruby.taobao.org/ gem sources --add http://ruby ...
- Python学习之路--Socket
Socket socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. sock ...
- 移动端web开发 问题
1.APP 返回按钮 <a href='#' onclick='javascript:history.back(-1);'></a> 返回有问题需要使用 href='javas ...
- Linux内核--网络栈实现分析（五）--传输层之UDP协议（上）
本文分析基于Linux Kernel 1.2.13 原创作品,转载请标明出处http://blog.csdn.net/yming0221/article/details/7532512 更多请看专栏, ...
- 【String与基本类型之间的转换】以及【进制转换】
1. 基本数据类型---->字符串类型: 方法一:使用连接一个空字符串,例如 基本数据类型+“” : 方法二:静态方法 String.valueOf(),具体有: String.valueOf ...
- PHP程序员面临的成长瓶颈
作为Web开发中应用最广泛的语言之一,PHP有着大量的粉丝,那么你是一名优秀的程序员吗?在进行自我修炼的同时,你是否想过面对各种各样的问题,我该如何突破自身的瓶颈,以便更好的发展呢? PHP工程师面临 ...
- Oracle常用函数笔记
一.字符函数 1.dual 临时表 oracle中的临时变量表,此表只返回第一行第一列 例如:select sysdate from dual 输出:2014-6-9 11:20:39 2.Initc ...
- 【腾讯Bugly干货分享】微信Tinker的一切都在这里，包括源码(一)
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57ecdf2d98250b4631ae034b 最近半年以来,Android热补 ...
- dojo/aspect源码解析
dojo/aspect模块是dojo框架中对于AOP的实现.关于AOP的详细解释请读者另行查看其它资料,这里简单复习一下AOP中的基本概念: 切面(Aspect):其实就是共有功能的实现.如日志切面. ...
- 那些年使用Hive踩过的坑
1.概述 这个标题也是用血的教训换来的,希望对刚进入hive圈的童鞋和正在hive圈爬坑的童鞋有所帮助.打算分以下几个部分去描述: Hive的结构 Hive的基本操作 Hive Select Hive ...