大漠老师的路由理解 首先新建一个基础的html,其中有些内容是固定的,固定的内容的可以有如<a ui-serf="home">home</a>的超链接, 有些是可以插入模板如含有ui-view的di
大漠老师的路由理解
首先新建一个基础的html,其中有些内容是固定的,固定的内容的可以有如<a ui-serf="home">home</a>的超链接,
有些是可以插入模板如含有ui-view的div <div ui-view=""></div>
如果是home页面,只要加入home页面的模板即可如下
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'tpls2/home.html'
})
如进入home页面后还有子页面,即在home页面某处点击进入子页面,以list为例:在home模板的页面上也有些固定的内容,也有可插入模板<div ui-view=""></div>的div,home模板的链接要写成
<a ui-sref=".list" class="btn btn-primary">List</a>
.state('home.list', {
url: '/list',
templateUrl: 'tpls2/home-list.html',
controller: function($scope) {
$scope.topics = ['Butterscotch', 'Black Current', 'Mango'];
}
})
//list页面即是在home模板的基础上加载home-list模板
关于about页面,about模板,about模板里面又含有左列和右列的模板,当about模板及内嵌的左列和又列的模板都加进去后才是一个完整的about页面
.state('about', {
url: '/about',
views: {
'': {
templateUrl: 'tpls2/about.html'
},
'columnOne@about ': {
template: '这里是第一列的内容'
},
'columnTwo@about ': {
templateUrl: 'tpls2/table-data.html',
controller: 'Controller'
}
}
});