`
rensanning
  • 浏览: 3509723 次
  • 性别: Icon_minigender_1
  • 来自: 大连
博客专栏
Efef1dba-f7dd-3931-8a61-8e1c76c3e39f
使用Titanium Mo...
浏览量:37404
Bbab2146-6e1d-3c50-acd6-c8bae29e307d
Cordova 3.x入门...
浏览量:603960
C08766e7-8a33-3f9b-9155-654af05c3484
常用Java开源Libra...
浏览量:677498
77063fb3-0ee7-3bfa-9c72-2a0234ebf83e
搭建 CentOS 6 服...
浏览量:86981
E40e5e76-1f3b-398e-b6a6-dc9cfbb38156
Spring Boot 入...
浏览量:399561
Abe39461-b089-344f-99fa-cdfbddea0e18
基于Spring Secu...
浏览量:68981
66a41a70-fdf0-3dc9-aa31-19b7e8b24672
MQTT入门
浏览量:90291
社区版块
存档分类
最新评论

AngularUI Router 概要

 
阅读更多
通过AngularJS来创建SPA(single page application),要想让页面导航看起来跟一般Web页面一样的话,路由相当重要。AngularUI Router是AngularUI 团队开发的一个AngularJS路由模块,相比AngularJS的标准路由ngRoute,它更灵活,基于state而不是URL在一个页面中加载多个View并保持View的层次,Nested States & Views以及Multiple & Named Views。UI-Router被认为是AngularUI为开发者提供的最实用的一个模块。

和ngRoute相比:
  • $route -> $state
  • $routeParams -> $stateParams
  • $routeProvider -> $stateProvider
  • <div ng-view></div> -> <div ui-view></div>

(1)设置路由
在.config()方法中使用$stateProvider(不是$routeProvider)来配置应用或者模块的state:
$stateProvider.state('state名', {设置信息});


但是默认otherwise需要使用$urlRouterProvider来设置
$urlRouterProvider.otherwise('/tab/home');

设置whenPath(可用正则),当匹配是直接跳转到toPath
$urlRouterProvider.when(whenPath, toPath);

自定义URL捕获处理,handler方法有一个参数$location返回一个path
$urlRouterProvider.rule(handler);


例如:
$stateProvider
    .state("emp",{
        url:"/emp"
        ,templateUrl:"list.html"
        ,controller:"ListCtrl"
    })
    .state("emp.detail",{
        url:"/:empID"
        ,templateUrl:"emp.html"
        ,controller:"EmpCtrl"
    });


ngRoute的设置方法:
$routeProvider.when('url', {设置信息});


例如:
$routeProvider
    .when("/emp",{
        templateUrl:"list.html"
        ,controller:"ListCtrl"
    })
    .when("/emp/:empID"){
        templateUrl:"emp.html"
        ,controller:"EmpCtrl"
    };


(2)层次化
state可以嵌套,state名必须唯一,通过state名中的点来划分Parent/child层次。
格式为:父View.子View
比如:items.detail是items的子View。
$stateProvider
  .state("items", {
    abstract: true,
    url: "/items"
    templateUrl: "items.html" // 必须包含<ui-view/>
  })
  .state("items.detail", {
    url: "/detail", // URL就是"/items/detail"
    templateUrl: "items-detail.html"
  })
  .state("items.info", {
    url: "/info", // URL就是"/items/info"
    templateUrl: "items-info.html"
  });


(3)设置信息
url:默认相对路径(以^开头的是绝对路径)
views:每个子视图可以包含自己的模板、控制器和预载入数据。
abstract:设置为true时,只能被继承不能直接切换到此state
template、templateUrl、templateProvider:HTML字符串或者返回HTML字符串的函数、HTML模板的路径或者返回HTML模板路径的函数
controller、controllerProvider:可以是一个控制器函数或者已经被注册的控制器名称,controllerProvider是一个注入函数返回控制器函数或控制器名称
resolve:在路由到达前预载入一系列依赖或者数据,然后注入到控制器中。
data:数据不会被注入到控制器中,用途是从父状态传递数据到子状态。
onEnter/onExit:进入或者离开当前状态的视图时会调用这两个函数

URL使用举例:
url: '/inbox'
url: '/inbox/:inboxId'
url: '/inbox/{inboxId}'
url: '/inbox/{inboxId:[0-9a-fA-F]{6}}'
url: '/inbox/{inboxId:.*}'
url: '/inbox?sort'
url: '/inbox/:inboxId/messages/{sorted}?from&to'
url: '/party/:partyID/:partyLocation'
url: '/product/info/favorite?pid&jancode&showAddFavorite&fromPg'

(4)指定View名
<div ui-view="view1"></div>
<div ui-view="view2"></div>

.state("emp.detail"),{
    url:"/:empID"
    ,views:{
        view1:{
            templateUrl:"view1.html"
            ,controller:"View1Ctrl"
        }
        ,view2:{
            templateUrl:"view1.html"
            ,controller:"View1Ctrl"
        }
    }
}


初始View
.state("emp.detail"),{
    url:"/:empID"
    ,views:{
        "":{
            templateUrl:"emp.html"
            ,controller:"EmpCtrl"
        }
    }
}


view@state
.state("emp.detail.picture"),{
    url:"/all"
    ,views:{
        "@emp":{
            templateUrl:"picture.html"
            ,controller:"PictureCtrl"
        }
    }
}


(5)页面跳转
链接点击后跳转到指定state
<a href="#/emp/hoge/1234">Go</a>
<a ui-sref=".hoge({id:empID})">Go</a>


$state.go('state名' [, 参数] [, 可选项]);

参数在下一个控制器中通过$stateParams接收

可选项:
location:true(更新地址栏)、false(不更新地址栏)、replace(更新地址栏同时更新history记录)
inherit:true(继承当前URL的参数)、false
relative:跳转原来的state对象
notify:true(激发$stateChangeStart和$stateChangeSuccess)、false
reload:重新加载

$state.reload();
$state.includes(stateName [, params]);
$state.is(stateOrName [, params]);
$state.href(stateOrName [, params] [, options]);
$state.get([stateName]);
$state.current


(6)事件
state事件
  • $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){ ... })
  • $rootScope.$on('$stateNotFound', function(event, unfoundState, fromState, fromParams){ ... })
  • $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){ ... })
  • $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error){ ... })

view事件
View被加载但是DOM树构建之前时:
$scope.$on('$viewContentLoading', function(event, viewConfig){ ... });

View被加载而且DOM树构建完成时:
$scope.$on('$viewContentLoaded', function(event){ ... });


参考:
https://github.com/angular-ui/ui-router
https://docs.angularjs.org/api/ngRoute
http://angular-ui.github.io/ui-router/sample/
http://scotch.io/tutorials/javascript/angular-routing-using-ui-router
http://blog.eisneim.com/articles/dive_deep_into_ui-router.html
分享到:
评论

相关推荐

    AngularUI Router:AngulaJS中带有嵌套视图的灵活路由解决方案-开源

    UI-Router提供基于状态的路由。 应用程序的每个功能都定义为一个状态。 一个状态随时处于活动状态,UI-Router管理状态之间的转换。 每个状态都描述功能的URL,UI(一个或多个视图),数据先决条件和其他逻辑先决条件...

    Angular Router

    Angular Router by Victor Savkin English | 20 Mar. 2017 | ASIN: B06X9N272Y | 118 Pages | AZW3 | 2.44 MB Key Features Written by the creator of the Angular router, giving you the best information ...

    【JavaScript源代码】Vue router-view和router-link的实现原理.docx

     &lt;div id="app"&gt; &lt;router-link to='home'&gt;首页&lt;/router-link&gt; &lt;router-link to='about'&gt;关于&lt;/router-link&gt; &lt;router-view a=1&gt;&lt;router-view/&gt; &lt;/div&gt; router-view组件  export default { //函数式组件没有...

    pads-layout与router同步操作

    pads-layout与router同步操作,主要讲解pads-layout与router同步操作

    vue-router.js

    vue路由vue-router.js文件下载

    RouterOS屏蔽广告

    RouterOS屏蔽广告

    saprouter安装配置

    安装SAPROUTER后可以让SAP系统从外部访问登录,里面包含了多有的安装配置及出现的问题

    RouterOS软路由中文编码转换,RouterOS使用中文备注

    ROS软路由中不能直接使用中文,本工具可以将中文转换成RouterOS可识别的编码 本人将源码开放出来,供大家学习参考

    React-Router Demo

    React-Router DemoReact-Router DemoReact-Router DemoReact-Router DemoReact-Router DemoReact-Router DemoReact-Router DemoReact-Router DemoReact-Router DemoReact-Router DemoReact-Router DemoReact-Router ...

    router.config.js

    router.config.js

    RouterOS 路由软件IPv6 功能初探

    摘 要:RouterOS 是一种路由操作系统,通过该软件可以将普通的PC 电脑变成专业路由器,该软件经历了多次更新和改进,其功能在不断增强和完善。特别在无线、认证、策略路由、带宽控制和防火墙过滤等方面有着非常突出...

    Cisco router安装向导

    Cisco router安装向导 Cisco router安装向导Cisco router安装向导Cisco router安装向导Cisco router安装向导Cisco router安装向导Cisco router安装向导Cisco router安装向导Cisco router安装向导Cisco router安装...

    Angular-UI-Router包

    UI-Router被认为是AngularUI为开发者提供的最实用的一个模块,它是一个让开发者能够根据URL状态或者说是'机器状态'来组织和控制界面UI的渲染,而不是仅仅只改变路由(传统AngularJS应用实用的方式)。该模块为开发者...

    RouterOS精华教程-RouterOS中文手册

    RouterOS精华教程部分的RouterOS中文手册 绝对实用

    MySQL Router 8.0.27(mysql-router-8.0.27-macos11-x86_64.tar.gz)

    MySQL Router 8.0.27(mysql-router-8.0.27-macos11-x86_64.tar.gz),适用于macOS 11 (x86, 64-bit), Compressed TAR Archive

    使用vue-router设置每个页面的title方法

    基本环境配置: webpack + vue2.0 + vue-router +nodeJS 进入 router 文件夹底下的index.js文件 首先引入: import Vue from 'vue' import Router from 'vue-router' 然后在路由里面配置每个路由的地址: routes: ...

    mikrotik RouterOS V5.5 中文教程

    解,毕竟 RouterOS 的应用是比较灵活,在不同硬件平台上反映也有差别。教程从最基础的安装、如何登陆配 置到深入多线路策略和流量控制,以及各种服务器、WLAN 配置和脚本编写都进行了讲解,也分析 RouterOS 工作流程...

    routeros 皮肤汉化最新版

    routeros 基础上将英文版本,全部汉化为vip版本,全新定义web界面

Global site tag (gtag.js) - Google Analytics