angularJs---route
route
route---‘路由’
ajax的弊端：
1.ajax请求不会留下history记录
2.用户无法直接通过url进入应用中的指定页面（保存书签，分享朋友？）
3.ajax不利于SEO
前端路由的实现原理是什么？
#哈希 也叫锚点，通过使用锚点实现页面刷新但不跳转。
html5中的history API
route可以说是angular的一大重点。 route可以实现局部页面无刷新跳转（相当于页面里嵌套了页面）
ng官方提供了一套路由 ng-route
1.引入外部文件：angular-route.js 2.把ngRoute模块注入到主模块 3.使用config函数 注入$routeProvider服务 4.在需要载入页面的地方 加上ng-view
$routeProvider的方法：
when（‘url’, {//code}） 该对象的属性有template/templateUrl--文件地址 controller：‘控制器名称’ url表示拼接在网址后头 #!url
otherwise（{//code}） 该方法表示默认的页面 ，接收一个对象，该对象有个属性redirectTo 表示从重定向
需要注意的是：当设置了controller选项时，主控制器就不能用在 标签含有属性ng-view里面了。
<body ng-app="app">
<div ng-controller="myCtrl">
<a href="#!/index">index</a>
<a href="#!/home">home</a>
<div ng-view> </div>
</div>
</body>
<script src="./js/angular.js"></script>
<script src="./js/angular-route.js"></script>
<script>
var app = angular.module('app', ['ngRoute']);
app.controller('myCtrl', function($scope){
$scope.name = 'dk';
})
app.config(function($routeProvider){
$routeProvider.when('/index',{
templateUrl:'./temp/index.html',
controller: 'indexCtrl'
}).when('/home', {
templateUrl: './temp/home.html'
}).otherwise('/index', {
templateUrl:'./temp/index.html',
controller: 'indexCtrl'
})
});
app.controller('indexCtrl', function($scope){
$scope.name = 'jjk'
})
</script>
在chrome中显示：
从外部引入angular-route.js 但无法进行深层次嵌套，这时，可以选用第3方插件：angular-ui-route.js
用ng制作的spa（单页面应用）经常有路由嵌套、路由平行的情况
第一种情况：页面嵌套
<body ng-app="app">
<div ng-controller="myCtrl">
<a href="#!/index">index</a>
<div ui-view style="border:1px solid green"> </div>
</div>
</body>
<script src="./js/angular.js"></script>
<script src="./js/angular-ui-router.js"></script>
<script>
var app = angular.module('app', ['ui.router']);
app.controller('myCtrl', function($scope){
$scope.name = 'dk';
})
app.config(function($stateProvider, $urlRouterProvider)
{
$urlRouterProvider.when('', '/index');
$stateProvider.state('index', {
url:'/index',
templateUrl:'./temp/index.html'
// controller: 'indexCtrl'
})
.state('index.page1',{
url: '/page1',
templateUrl: './temp/page1.html' })
.state('index.page2',{
url:'/page2',
templateUrl:'./temp/page2.html'
})
})
</script>
上面的代码中：
$urlRouterProvider.when('', '/index'); 表示默认页面
url 表示在当前网址的基础上加上url
同样可以有controller选项。
在chrome中显示：
第2种情况：多个ui-view存在同一个页面，互为平行关系。
body部分：script部分：
可以看出：给ui-view所在的标签一个name属性，由views选项控制所有的ui-view就可以实现一个页面多个视图。
<body>
<a href="#!/index">index</a>
<a href="#!/home">home</a>
<div ui-view name='view1'> </div>
<div ui-view name='view2'> </div>
<div>
<div ui-view name='view3' style="border:1px solid red"> </div>
</div> </body>
<script src="./js/angular.js"></script>
<script src="./js/angular-ui-router.js"></script>
<script>
var app = angular.module('demo', ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('index', {
url: '/index',
views: {
"view1": {
template: '<p>index first</p>'
},
"view2": {
template: '<p>index second</p>'
},
"view3":{
template:"<p>three</p>"
}
}
})
.state('home', {
url: '/home',
views: {
"view1": {
template: '<p>home first</p>'
},
"view2": {
template: '<p>home second</p>'
}
}
})
})
</script> </html>
在chrome中显示：
路由传参：在我们平时做的页面跳转都会传参，如：https://i.cnblogs.com/EditPosts.aspx?postid=6556246&update=1， postid=6556246&update=1就是参数。那路由又是如何实现传参的呢？
在url选项中: ‘/index/:id’ id即为参数 如果设置了参数 凡是页面/index/hot、/index/news之类的 hot news均表示参数而不是指第2层ui-view。
一般在a标签里 实现路由跳转 有2种写法：
1. <a href="#/index/hot"></a> hot为参数
2. 使用ui-sref
<a ui-sref="index({id:hot})">show index</a> index表示 路由的名字 ({id:hot})表示参数
监控路由的变化：
监控路由的变化有一般有2种方式
1. 路由状态发生改变时，可以通过监听' $stateChangeStart '、' $stateChangeSuccess '、' $stateChangeError '等事件
监控路由是在run阶段，通过注入$rootScope服务，使用$on监听这些事件。
$stateChangeStart 表示 路由状态开始改变 注意此时url还未改变了，视图还未更新。
$stateChangeSuccess表示 路由状态改变完成，此时url已经改变了，视图仍没有更新。
$stateChangeError 表示 路由状态改变错误。
var app = angular.module('app', ['ui.router', 'routers', 'directives', 'controllers', 'ionic']);
// app.controller('appCtrl',function($scope){
// $scope.tab = 'jjk';
// })
监听路由变化
app.run(['$rootScope', '$http', function ($rootScope,$http) {
$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
console.log(event);
console.log(toState);
console.log(toParams);
console.log(fromState);
console.log(fromParams);
console.log($rootScope.tab);
if (toState.name = 'home.list') {
$http({
url: "https://cnodejs.org/api/v1/topics",
method: 'GET',
params: {
limit: 10,
page: 1,
tab: toParams.id
}
}).then(function (res) {
// console.log(res.data);
if (res.data.success) {
$rootScope.news = res.data.data;
console.log($rootScope.news);
}
})
}
}
)
}])
注入$rootScope服务，监听$stateChangeSuccess
$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams)｛//code｝
请使用手机"扫一扫"x
angularJs---route的更多相关文章
- Part 39 AngularJS route change events
In this video we will discuss1. Different events that are triggered when a route change occurs in an ...
- part 36 AngularJS route reload
In this video we will discuss angular route service reload() method. This method is useful when you ...
- [译]用AngularJS构建大型ASP.NET单页应用（一）
原文地址:http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single 渣 ...
- AngularJS 基础
1. AngularJs 是一个JS 框架,是一种基于MVC的设计模式 2. script 需引用 <script src="angular.min.js">,安装包 ...
- AngularJS with MVC4 CRUD
CRUD using MVC Web API and AngularJS In this article I am going to demonstrate about how can we crea ...
- Visual Studio 2015 Owin+MVC+WebAPI+ODataV4+EntityFrawork+Identity+Oauth2.0+AngularJS 1.x 学习笔记之"坑"
1.AngularJS route 与 MVC route http://www.cnblogs.com/usea/p/4211989.html public class SingleRoute : ...
- 【MVC5】First AngularJS
※本文参照<ASP.NET MVC 5高级编程(第5版)> 1.创建Web工程 1-1.选择ASP.NET Web Application→Web API 工程名为[atTheMovie] ...
- Part 30 AngularJS routeparams example
Here is what we want to do : When we navigate to /students, the list of student names must be displa ...
- vue-router 的URL路径中#的意义
传送门 https://router.vuejs.org/zh-c... Router 构造配置 routes 类型: Array<RouteConfig> RouteConfig 的类型 ...
- Part 23 to 26 Routing in Angular
Part 23 AngularJS routing tutorial In general, as the application becomes complex you will have more ...
随机推荐
- CRM - 讲师与学生
一.讲师与学生简介 1.初始化 course_record, study_record.2.学习记录3.录入成绩4.显示成绩 ajax 查询 柱状图展示成绩 highcharts 5.上传作业(os模 ...
- Lightoj 1003 - Drunk（拓扑排序判断是否有环 Map离散化）
题目链接:http://lightoj.com/volume_showproblem.php?problem=1003 题意是有m个关系格式是a b:表示想要和b必须喝a,问一个人是否喝醉就看一个人是 ...
- Python开发【Django】：中间件、CSRF
CSRF 1.概述 CSRF(Cross Site Request Forgery)跨站点伪造请求,举例来讲,某个恶意的网站上有一个指向你的网站的链接,如果某个用户已经登录到你的网站上了,那么当这个用 ...
- python 面向对象 公有属性
公有属性定义 公有属性也叫作类变量 静态字段 class role(): # 传参数 # 公有属性都在这里定义 # 在类里直接定义的属性即是公有属性 nationality = 'JP' def ...
- PID参数调整的口诀
PID参数调整的口诀:参数整定找最佳,从小到大顺序查先是比例后积分,最后再把微分加曲线振荡很频繁,比例度盘要放大曲线漂浮绕大湾,比例度盘往小扳曲线偏离回复慢,积分时间往下降曲线波动周期长,积分时间再加 ...
- ubuntu update-alternatives
update-alternatives是ubuntu系统中专门维护系统命令链接符的工具,通过它可以很方便的设置系统默认使用哪个命令.哪个软件版本,比如,我们在系统中同时安装了open jdk和sun ...
- 时间格式—My97DatePicker控件使用
一.My97DatePicker控件使用(2步): 1:JSP页面:( class="Wdate" 显示控件图标) 引入控件包中的脚本: <script type=&qu ...
- 字王·国标二级字库汉字GB内码un码三合一对照表2016版
国标二级字库汉字GB内码un码三合一对照表 字王2016版 汉字内码表,是制作字库的基础,简单.便利的版本很少,根据实战经验,特此制作这个三合一版本的汉字.GB内码.Unicode码对照表: l 提供 ...
- Entity Framework 并发处理（转）
什么是并发? 并发分悲观并发和乐观并发. 悲观并发:比如有两个用户A,B,同时登录系统修改一个文档,如果A先进入修改,则系统会把该文档锁住,B就没办法打开了,只有等A修改完,完全退出的时候B才能进入修 ...
- javascript原生事件总结
javascript原生的事件,总结了一下,包括事件流.处理函数.事件对象这几样东西.而在兼容性方面,主要是老牌ie8以及以下和现代浏览器的差异,也就是ie和DOM事件标准的差异. 事件流这个事件流i ...