Angular ui-router的常用配置参数详解

Posted 2020-09-26

 

一、$urlRouterProvider服务

$urlRouterProvidfer负责监听$location,当$location变化时，$urlRouterProvider将在规则列表中查找匹配的值。

1.$location是对window.location的封装。

2.otherwise（rule）定义当请求无效时的路径跳转

二、$state服务

$state服务是负责代表状态以及提供状态之间的装换，它还能提供你当前以及上一个的状态。

1.方法：go(to,params,options)

三、$stateProvider服务

处理路由状态的服务，路由状态反应的是在应用程序中的位置，描述当前状态下的视图，并且将要做什么。

state:注册一个状态，并给定其配置。

主要参数：name,stateConfig两个

stateConfig主要是以下属性

console.log($state.href())template： string/function，html模板字符串，或者一个返回html模板字符串的函数。
templateUrl：string/function，模板路径的字符串，或者返回模板路径字符串的函数。
controller：string/function，新注册一个控制器函数或者一个已注册的控制器的名称字符串。
parent：string/object，手动指定该状态的父级。
resolve：object，将会被注入controller去执行的函数，<string,function>形式。
url：string，当前状态的对应url。
views：object，视图展示的配置。<string,object>形式。

四、ui-sref

一种将连接绑定到一个状态的指令，点击该连接将触发一个可以带有可选参数的状态转换

<a ui-sref="app.index">首页</a>
  <!-- 这里是正常的跳转 -->
  <a ui-sref="app.index({id:yourId})">你的主页</a>
  <!-- 这里是带参数对象的跳转，名称是id，值是yourId -->