angularjs ui-route

最新推荐文章于 2019-11-10 21:02:33 发布

原创最新推荐文章于 2019-11-10 21:02:33 发布 · 456 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs

前端脚本专栏收录该内容

60 篇文章

订阅专栏

本文详细介绍AngularJS中使用UI-Router进行应用的状态管理和路由配置的方法。内容涵盖状态定义、URL配置、视图管理和导航操作等核心概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.$stateProvider.state(stateName, stateCofig);stateName是string类型;stateConfig是object类型;

2.stateConfig:template, templateUrl, templateProvider, controller, controllerProvider, resolve, url, params, views, abstract, onEnter, onExit, reloadOnSearch, data

3. $urlRouteProvider.when(whenPath, toPath)$ urlRouterProvider.otherwise(path)
$urlRouteProvider.rule(handler)

4. $state.go(to, [,toParams],[,options]) 形参to是string类型，必须，使用”^”或”.”表示相对路径；形参toParams可空，类型是对象；形参options可空，类型是对象，字段包括：location为bool类型默认true,inherit为bool类型默认true, relative为对象默认$ state. $current,notify为bool类型默认为true, reload为bool类型默认为false 5.$ state.go(‘photos.detail’)
$state.go(‘^’)到上一级,比如从photo.detail到photo$ state.go(‘^.list’)到相邻state,比如从photo.detail到photo.list
$state.go(‘^.detail.comment’)到孙子级state，比如从photo.detail到photo.detial.comment

6.ui-sref=’stateName’
ui-sref=’stateName({param:value, param:value})’

7.ui-view

==没有名称的ui-view
<div ui-view></div>
$stateProvider.state("home",{
template: "<h1>hi</h1>"
})
或者这样配置：
$stateProvider.state("home"{
views: {
"": {
template: "<h1>hi</h1>"
}
}
})
==有名称的ui-view
<div ui-view="main"></div>
$stateProvider.state("home",{
views: {
"main" : {
template: "<h1>hi</h1>"
}
}
})
==多个ui-view
<div ui-view></div>
<div ui-view="data"></div>
$stateProvider.state("home",{
views: {
"":{template: "<h1>hi</h1>"},
"data": {template: "<div>data</div>"}
}
})