AngularJS 路由的理解 原

大漠老师的路由理解

首先新建一个基础的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'             }         }     });

(adsbygoogle = window.adsbygoogle || []).push({});