ui-router(유아이-라우터) 관련

17년 3월 기준.

 

<div ui-view></div>

// ui-view로 렌더링. template 연결 안될때 ui-view 위치 확인.

 

.state('topology', {

url: '/topology',

templateUrl: 'templates/dashboard.html'

})

.state('topology.regionId', {

url: '/:regionId',

templateUrl: 'templates/topology.regionId.html',

controller: function ($stateParams) {

console.log($stateParams.regionId);

}

})

// route 하위 경로 및 파라미터 설정. topology.regionId 하위경로를 나타내는 네이밍 지켜서 route, template 설정

 

$state.reload();

// reload

 

.run( ['$rootScope', '$state', '$stateParams',

function ($rootScope, $state, $stateParams) {

$rootScope.$state = $state;

$rootScope.$stateParams = $stateParams;

}

])

 

{{$state.current.name}}

{{$stateParams}}

{{ $state.$current.url.source }}

// ui-router get state name

 

title: 'Dashboard',

{{$state.current.title}}

// ui-router get title name

 

.state('reports', {

title: 'Reports',

url: '/reports',

templateUrl: 'templates/reports.html'

})

reports.html

<ui-view />

 

.state('reports.callId', {

title: 'Call Report',

url: '/callreport/:callId',

templateUrl: 'templates/call.html'

})

// 상위 템플릿에 ui-view가 없으면 하위 템플릿으로 들어가도 상위 템플릿이 연결됨. ui-view 꼭 필요.