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使用),今天重点来聊 ...
随机推荐
- mybatis按时间条件搜索
dto接受前台字符串时间格式 @DateTimeFormat(pattern = "yyyy-MM-dd") private Date contractStartDt; @Date ...
- maven环境终于可以了
说说maven可以后小小的体会吧,虽然还没有用maven运行过工程,体会是pom.xml中的dependency属性可以帮助管理项目中的jar包,只要在这里配置下需要的jar包,保存后就会自动从中央仓 ...
- d3 API axis
场景 1.画网格线 使用方法.innerTickSize(): 指定内刻度大小 或者 .tickSize(inner, outer): 2.内外刻度线 innerTickSize outerTickS ...
- 黑马程序员+SQL基础(下)
---------------------- <a href="http://edu.csdn.net"target="blank">ASP.Net ...
- WindowsPhone技术和XNA技术
介于公司目前还没有涉及WP(WindowsPhone)项目的开发,而我本身是学习WP开发的,因此在这里稍微入门的介绍一点WP的知识. 一.简介 Windows Phone具有桌面定制.图标拖拽.滑动控 ...
- 网易云信，发送验证码短信C#版代码
网易云信发送短信代码(C# 版)....需要注意SHA1 String有转换小写!!!! using System; using System.Collections.Generic; using S ...
- WebRTC实现网页版多人视频聊天室
因为产品中要加入网页中网络会议的功能,这几天都在倒腾 WebRTC,现在分享下工作成果. 话说 WebRTC Real Time Communication 简称 RTC,是谷歌若干年前收购的一项技术 ...
- Backbone源码解析（五）：Route和History（路由）模块
今天是四月十二号,距离上次写博已经将近二十天了.一直忙于工作,回家被看书的时间占用了.连续两个礼拜被频繁的足球篮球以及各种体育运动弄的精疲力竭,所以很少抽时间来写技术博客.今天抽出时间把backbon ...
- Java提高篇(三二)-----List总结
前面LZ已经充分介绍了有关于List接口的大部分知识,如ArrayList.LinkedList.Vector.Stack,通过这几个知识点可以对List接口有了比较深的了解了.只有通过归纳总结的知识 ...
- 深入探究js中无所不在的this
黄金守则: this对象是在运行时基于函数的执行环境绑定的:在全局函数中,this等于window而当函数被作为某个对象的方法调用时, this等于那个对象. 下面是一些相关实践: --------- ...