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