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使用),今天重点来聊 ...
随机推荐
- P1906联合权值
描述 无向连通图 G 有 n 个点,n-1 条边.点从 1 到 n 依次编号,编号为 i 的点的权值为 WiWi, 每条边的长度均为 1.图上两点(u, v)的距离定义为 u 点到 v 点的最短距离. ...
- javascript练习-扑克牌
下面用枚举类型来实现一副扑克牌的类: //定义一个玩牌的类 function Card(suit,rank){ function inherit(p){ if(p==null) throw TypeE ...
- uva 11357 Matches
// uva 11357 Matches // // 题目大意: // // 给你n个火柴,用这n个火柴能表示的非负数有多少个,不能含有前导零 // // 解题思路: // // f[i] 表示正好用 ...
- [XAF] How to define a business class at runtime or allow end-users to configure its members via the application UI?
How to define a business class at runtime or allow end-users to configure its members via the applic ...
- hdu 5718(Oracle)大数加法
曾经有一位国王,统治着一片未名之地.他膝下有三个女儿. 三个女儿中最年轻漂亮的当属Psyche.她的父亲不确定她未来的命运,于是他来到Delphi神庙求神谕. 神谕可以看作一个不含前导零的正整数n n ...
- JS实现雪花效果
演示效果 http://www.9696e.com/demo/snow/ 春节之前新一博客也会一直挂着的. 加载链接 <script src="http://www.9696e.com ...
- sum() 函数
sum()的参数是一个list 例如: sum([1,2,3])
- Linux学习进阶路线图
摘自:http://blog.csdn.net/zdwzzu2006/article/details/4334791 Linux 基础 Linux 基础 Linux安装专题教程 Linux中文环境 L ...
- Knockoutjs 实践入门 (1) 属性绑定
1 是什么? 使用MVVM模式的简单,动态的Javascript UI. 2 优点 声明式绑定 UI 自动更新 依赖追踪 模板化 3 如何使用 & ...
- .net core 中环境变量的配置
配置文件: Properties目录下的launchSettings.json IISExpress配置 "ASPNET_ENV": "EnvironmentOne&qu ...