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'
            }
        }
    });