安装ui-router
npm i @uirouter/angularjs
在模块中使用
1、引入ui-router；
import
uiRouter
from
'@uirouter/angularjs';
2、添加模块依赖
const
app =
angular.
module(
'app', [
uiRouter]);
3、配置路由
export
default [{
name:
'home',
url:
'/home',
template:
'<div>hello world</div>'
},....]
4、载入路由数据
import
router
from
'./router.config';
app.
config((
$stateProvider)
=>{
router.
forEach((
item)
=>{
$stateProvider.
state(
item);
})
})
5、配置视图（显示：ui-view, 切换： ui-sref）
<
div
id=
"root"
ng-controller=
"appControl"
>
<
div
class=
"row"
style=
"height: 100%;"
>
<
div
class=
"col-2"
>
<
ul
class=
"list-group"
>
<
li
class=
"list-group-item"
ng-repeat=
"r in router"
style=
"padding: 0;"
>
<
a
ui-sref=
"{{r.name}}"
class=
"btn-block"
style=
"padding: 0.75rem 1.25rem;"
>{{r.name}}
</
a
>
</
li
>
</
ul
>
</
div
>
<
div
class=
"col-12"
>
<
ui-view
></
ui-view
>
</
div
>
</
div
>
</
div
>
6、最终效果
说明
原来安装的angular-ui-router已经被@uirouter/angularjs代替