ui-router的探究

首先是示例:

这是我自己写的一个路由demo,这里我们可以看到,页面由一个导航条,以及内容页组成,导航条上有三个按钮,分别对应了三个页面,而页面会在内容页进行更新,并不会重新请求新页面。

而我们看到的home页上的三行文字,并不是在同一个页面上,实际上是由额外的3个页面组织起来的。

ui-sref-active指令检测当前的激活状态,如果你的页面激活的是这个路由,则该标签会激活active样式,ui-sref定义了当前按钮指向的路由,具体地址的组成可以看图。

这里定义了具体的路由策略。

如果路由到/home,则目标的模板地址为./bt.html(你存放静态页面的路径),以此类推

home.bt2则定义了该路由的子路由,以此类推。

最后一行代码定义了非定制的路由策略请求时会重定向到/home/bt2/bt3,注意这里书写的参数格式!!!

这样,当我们访问这个页面时,会通过重定向引导到/home/bt2/bt3的URL上,所以在该过程中所有的相关html都会被加载,我们从网络请求就可以看出,路由是根据页面的请求顺序依次向服务器请求页面的。

最近在工作里发现项目里的路由定义里有这么一句:

targetHeader: {org: true, space: false},

后来本人也写了个demo尝试了一下,弄懂了这句话的用途以及在项目里的功能。

首先,本人在路由定义里也加了这几句话,并且在对应页面的控制器里加了作用域的赋值表达式。

查询了ui-router的文档,在路由中由用户自行定义的属性可以在$state的current属性中获取到,我们将它赋值给$scope对象对应的属性。

然后就可以在页面中显示它。

页面代码:

<div class="header">我是bt,我接收到了targetHeader.org:{{targetHeader.org}},和targetHeader.space:{{targetHeader.space}}</div>

之后我给每一个子路由都给了个自定义属性,然后发现了一个问题。项目中这个组件是一直存在的,如果不是重新发送请求的话,这个组件的作用域状态不会更改,即使我们在路由上重新定义了属性的值。

那么怎么解决这个问题呢?

我查看了一下$state的源代码,看有这么一行代码

$rootScope.$broadcast(‘$stateChangeSuccess‘, to.self, toParams, from.self, fromParams);

这不就是之前研究过的作用域通信吗?所以,我们只要在代码里捕获这个句柄,在路由状态改变时重新获取一次值就可以了

代码如下:

$rootScope.$on("$stateChangeSuccess", function() {
    $scope.targetHeader = $state.current.targetHeader;
});
时间: 2024-10-14 10:45:45

ui-router的探究的相关文章

Angularjs中UI Router全攻略

摘自:Angularjs中UI Router全攻略 温馨提示:想要了解 angular-ui-router的同学,从上往下读一遍,能带随着coding那就更好了,保证你对angular-ui-router基本全部掌握. 如何引用依赖angular-ui-router angular.module('app',["ui.router"]) .config(function($stateProvider){ $stateProvider.state(stateName, stateCofi

ngRoute 和 ui.router 的使用方法和区别

在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比. ngRoute 使用方法 1) 引入 angular-route lib 无论是 ngRoute 还是 ui.router ,作为框架额外的附加功能,都必须以 模块依赖 的形式被引入. 1 <script src="lib/angular-route.js"></sc

angular : $location &amp; $state(UI router)的关系

次序:angular 的 location会先跑 $rootScope.$on("$locationChangeStart", function (scope, newUrl, oldUrl) { log("$locationChangeStart from " + oldUrl) log("$locationChangeStart to " + newUrl) }); 接着是 ui router $state $rootScope.$on(&q

Angularjs中UI Router用法小记录

今天自己参考已有的项目代码学习了下UI Router的用法,写了个小demo,验证了下自己的想法,现把使用情况记录一下. 1.入口文件index.html,引入项目所需的js文件,标注ng-app,创建ui-view元素,为后面的嵌套做容器准备. <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8">

[转]AngularJS 使用 UI Router 实现表单向导

本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的UI Router以及Angular ngAnimate module创建一个带动画的多步表单.这项技术可以用在你想要简化用户操作的大表单上. 我们看到这项技术已经应用在了许多的网页上.比如购物车,注册表单,入职流程以及许多多步表单,让用户更容易在线填写表单. 下面我们将构建它: 使用UI Rout

angular 的ui.router 定义不同的state 对应相同的url

Angular UI Router: Different states with same URL? The landing page of my app has two states: home-public, home-logged-in. Now I want to show both states on the same URL, but let the controller and template depend on the user session (is the user log

ui router 介绍

1. 路由规则 rap框架页面路由基于ui-router实现 1.1 ui-router 一个基本的路由状态如下所示: 路由配置: $stateProvider .state('po',{ url:'/po', abstract:false, templateUrl:'./pages/master.html', resolve:{ deps:"i am a test" }, controller:'po_controller' }) 前台界面: <div ui-view>&

ui router digest 10 time

refer : https://github.com/angular-ui/ui-router/issues/600 $urlRouterProvider.when("/", "/companys") redirect to companys 时,如果被 onStateChange 拦截并且 preventDefault() + $state.go('otherState'), otherState有使用 templateUrl 需要异步加载的话,那么就会出现这个

AngularJS学习之 ui router

1.安装 bower install --save angular_ui-router 2.在项目主页面 index.html中添加 <div ui-view=""></ui-view>/*login页面,dashboard.html将会嵌入此处*/ 3.在app.js页面设置 .config(function ($stateProvider,$urlRouterProvider) { $urlRouterProvider.otherwise('/login')

Angularjs ui router,路由嵌套 父controller执行问题

路由路径设置:structured.text   :structured是第一层路由,text是第二层路由: 问题如下,当$state.transitionTo路由到第二层是,structured的controller也会执行一次,导致页面控件重新加载刷新. $state.transitionTo( "structured.text", { args : $stateParams }, { reload: false} ); 查了github看到 https://github.com/