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