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使用),今天重点来聊 ...
随机推荐
- Linq-分组统计
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...
- 微信分享接口SDK简介使用
很久没做移动端活动了,想不少人都参与过微信里面的活动,既然活动就少不了分享.那我就行一个前端的角度说说如何实现微信分享的吧. 对应微信分享,现在已有公共接口,微信的开发者文档SDK:https://m ...
- Django 中 如何使用 settings.py 中的常量
在用django 框架开发 python web 程序的时候 , 在模板页面经常会用到 settings.py 中设置的常量,比如MEDIA_URL, 我尝试过在模板页面用类似如下的方式 程序代码 { ...
- javascript练习-方法借用
方法借用其实也可以叫做多重继承 var generic = { //返回一个字符串,这个字符串包含构造函数的名字(如果构造函数包含名字) //这个以及所有非继承来的,非函数属性的名字和值 toStri ...
- styleId妙用
styleId妙用: <html:text property="etpsBlocReg.cptlTotal" style="width: 94%;" re ...
- Sqlite 管理工具收藏
1.SQLite Administrator http://download.orbmu2k.de/files/sqliteadmin.zip 2.SQLite2009Pro-v3.8.3.1 h ...
- oracle迁移mysql数据库注意
oracle转mysql修改: . substr() substr( string , 0, 10) 这里测试 必须从 第一位获取 既是 substr(string , 1 , 10)2. to_ch ...
- MyEclipse使用技巧
1. 大小写切换: Ctrl + Shift + X 大写: Ctrl + Shift + Y 小写: 2. 自动导包: Ctrl + Shift + O 3. 运行前自动保存 ...
- C++模板&泛型编程
---恢复内容开始--- 一.泛型编程 定义:编写与类型无关的逻辑代码,是代码复用的一种手段.模板是泛型编程的基础 模板分为:函数模板和类模板 函数模板:代表了一个函数家族,该函数与类型无关,在使用时 ...
- 使用git将代码push到osc上
1.下载git客户端 2.在osc上创建项目 ①使用:git bash here ②在目录下执行:git init ③ssh-keygen -t rsa -C "xqs@gmail.com& ...