Angular ui-route的用法

 ui-router和同属AngularJS框架一部分的ng-route一样强大. ui-router提供了让我们可以做路由嵌套和视图命名的特性，嵌套路由功能主要是依赖$stateProvider服务,$urlRouterProvider服务与 ui-view实现。

.

先创建一个叫PageTab的html文件

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../angular/angular.min.js"></script>
    <script src="../angular/angular-ui-route.js"></script>
    <script>
        var app = angular.module('app',['ui.router']);
        app.config(function ($stateProvider,$urlRouterProvider) {
            $urlRouterProvider.when('','PageTab');
            $stateProvider.state('PageTab',{
                url:'/PageTab',
                templateUrl:'PageTab.html'
            }).state('PageTab.page1',{
                url:'/page1',
                templateUrl:'page1.html'
            }).state('PageTab.page2',{
                url:'/page2',
                templateUrl:'page2.html'
            }).state('PageTab.page3',{
                url:'/page3',
                templateUrl:'page3.html'
            })
        })
    </script>
</head>
<body>
<div ui-view></div>
</body>
</html>

PageTab.html

<div>
       <a href="#/page1" ui-sref=".page1">tab1</a>
       <a href="#/page2" ui-sref=".page2">tab2</a>
       <a href="#/page3" ui-sref=".page3">tab3</a>
    <div ui-view></div>
</div>

然后再创建三个子页面

page1.html

<div>
    page1
</div>

page2.html

<div>
   page2
</div>

page3.html

<div>
   page3
</div>

 

posted @ 2017-06-28 21:31  MeetinApril  阅读(691)  评论(0)  编辑  收藏  举报