angularjs 引入路由

安装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代替