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使用),今天重点来聊 ...
随机推荐
- IE跨域访问问题
可能出现的症状: 1.跨域无法登录. 2.同一页面请求同一域名SESSION无法获取.(SESSION_ID一直在变) 一般情况下在方法前加上以下代码: header("P3P: CP=CU ...
- AngularJS是什么
先标明来源: https://code.angularjs.org/1.3.15/docs/guide/introduction 也就是官网针对1.3.15版的说明 What Is Angular? ...
- NRF24L01--使用STM32F103
看了两天的24l01的相关资料了,一直有点模糊,今天下午感觉有点懂了,在板子上调试成功了,但是还没进行通讯测试.stm32和arduino进行通信还没成功 ,:( 先把stm32的NRF24L01配置 ...
- [UCSD白板题] Primitive Calculator
Problem Introduction You are given a primitive calculator that can perform the following three opera ...
- 测试文档锁：doc.LockDocument()
/// <summary> /// 总结:用到DocumentManager.Open(filePath)时,如果是ForWrite,就需要用到lock文档锁. /// </summ ...
- 日常工作中的点滴:C# 根据字节长度截包含中文的字符串
方法中利用正则表达式判断某个字符是否是中文 public string SubStringB(string text,int length){ int target=0; int b=0; for(i ...
- iOS开发 swift3.0中文版
swift3.0中文版: http://pan.baidu.com/s/1nuHqrBb
- Windows 8 一起学习
收藏慢慢看 http://www.devdiv.com/Windows_Phone-windows_-thread-130302-1-1.html
- vertica在电信的应用
本文介绍了什么 ´ 电信级大数据分析典型需求 ´ Vertica数据库特点及与其他数据库对比 ´ Vertica核心技术介绍 ´ 基于Vertica的典型分系统架构简介 电信级大数据分析典型需求 ´ ...
- windows编程：第一个windows程序
#define WIN32_LEAN_AND_MEAN #include <windows.h> #include <windowsx.h> #include <math ...