/Downloads/54361bf500012f7400000000/AngularJS/app/UIRoute3.html#/index/usermng/addusertype

<div class="row">
    <div class="col-md-3">
        <div class="row">
            <div class="col-md-12">
                <div class="list-group">
                    <a ui-sref="#" class="list-group-item active"
 
>使用者分類</a>
                    <a ui-sref="index.usermng.highendusers" class="list-group-item">高階使用者</a>
                    <a ui-sref="index.usermng.normalusers" class="list-group-item">中端使用者</a>
                    <a ui-sref="index.usermng.lowusers" class="list-group-item"
 
>低端使用者</a>
                    <a ui-sref="#" class="list-group-item">黑名單</a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <button class="btn btn-primary" ng-click
 
="addUserType()">新增使用者</button>
            </div>
        </div>
    </div>
    <div class="col-md-9">
        <div ui-view></div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <h3>高階使用者列表</h3>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <table class="table table-bordered table-hover table-condensed">
            <thead>
                <tr>
                    <th>序號</th>
                    <th>姓名</th>
                    <th>年齡</th>
                    <th>作品</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td rowspan="2">1</td>
                    <td>大漠窮秋</td>
                    <td>29</td>
                    <td>《用AngularJS開發下一代WEB應用》</td>
                </tr>
                <tr>
                    <td>大漠窮秋</td>
                    <td>29</td>
                    <td>《用AngularJS開發下一代WEB應用》</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>大漠窮秋</td>
                    <td>29</td>
                    <td>《Ext江湖》</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td colspan="2">大漠窮秋</td>
                    <td>《ActionScript遊戲設計基礎（第二版）》</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/index');
    $stateProvider
        .state('index', {
            url: '/index',
            views: {
                '': {
                    templateUrl: 'tpls3/index.html'
                },
                '[email protected]': {
                    templateUrl: 'tpls3/topbar.html'
                },
                '[email protected]': {
                    templateUrl: 'tpls3/home.html'
                }
            }
        })
        .state('index.usermng', {
            url: '/usermng',
            views: {
                '[email protected]': {
                    templateUrl: 'tpls3/usermng.html',
                    controller: function($scope, $state) {
                        $scope.addUserType = function() {
                            $state.go("index.usermng.addusertype");
                        }
                    }
                }
            }
        })
        .state('index.usermng.highendusers', {
            url: '/highendusers',
            templateUrl: 'tpls3/highendusers.html'
        })
        .state('index.usermng.normalusers', {
            url: '/normalusers',
            templateUrl: 'tpls3/normalusers.html'
        })
        .state('index.usermng.lowusers', {
            url: '/lowusers',
            templateUrl: 'tpls3/lowusers.html'
        })
        .state('index.usermng.addusertype', {
            url: '/addusertype',
            templateUrl: 'tpls3/addusertypeform.html',
            controller: function($scope, $state) {
                $scope.backToPrevious = function() {
                    window.history.back();
                }
            }
        })
        .state('index.permission', {
            url: '/permission',
            views: {
                '[email protected]': {
                    template: '這裡是許可權管理'
                }
            }
        })
        .state('index.report', {
            url: '/report',
            views: {
                '[email protected]': {
                    template: '這裡是報表管理'
                }
            }
        })
        .state('index.settings', {
            url: '/settings',
            views: {
                '[email protected]': {
                    template: '這裡是系統設定'
                }
            }
        })
});