首页 > 代码库 > AngularJS ui-router (嵌套路由)的简单学习

AngularJS ui-router (嵌套路由)的简单学习

2024-10-13 09:46:02   213人阅读

     今天让我们一起来学习一下AngularJS里的嵌套路由。

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

　首先我们先使用AngularJS框架来创建简单的html和JavaScript页面。

　

　我们需要创建的文件有一下这些：

　　  1.先创建主体页面    main.html

　　2.嵌套路由页面       page.html

　　3.在创建三个子页面    page1.html 、 page1.html   、   page1.html

   注意：在使用这个方法时，记得要引入angular-ui-route.js插件哦！

　　main.html

　　 创建页面如下：

<!DOCTYPE html>
<html ng-app="mk">
<head>
    <title></title>
    <script src=http://www.mamicode.com/"libs/angular.min.js"></script>
    <script src=http://www.mamicode.com/"libs/angular-ui-route.js"></script>
    <script>
        var app = angular.module("mk", [‘ui.router‘]);
//        依赖$stateProvider服务与$urlRouterProvider服务
        app.config(function ($stateProvider, $urlRouterProvider) {
            
         
        
        });
    </script>

</head>
<body data-ng-app="myApp">
<h1>路由嵌套的主体页-----AngularJS Home Page (Ui-router)</h1>
<div ui-view=""></div>//必填
</body>
<html>

Page.html

创建页面如下：

<div>
    <span style="padding-right: 20px" ><a href=http://www.mamicode.com/"javascript:;">Page-1</a></span>
    <span style="padding-right: 20px" ><a href=http://www.mamicode.com/"javascript:;">Page-2</a></span>
    <span style="padding-right: 20px" ><a href=http://www.mamicode.com/"javascript:;">Page-3</a></span>
</div>

Page1.html

创建页面如下：

<!--子页面1-->
<div>
    <div>
        <h1>Page  子页面1</h1>
    </div>
</div>

Page2.html

创建页面如下：

<!--子页面2-->
<div>
    <div>
        <h1>Page 子页面2</h1>
    </div>
</div>

Page3.html

创建页面如下：

<!--子页面3-->
<div>
    <div>
        <h1>Page  子页面3</h1>
    </div>
</div>

以上还是个开始，主体页面main.html还没有嵌套page.html页面，接下来先把page.html页面嵌套在其中吧。

　　此时main.html

　　 创建页面如下：（红色部分为新加内容）

<!DOCTYPE html>
<html ng-app="mk">
<head>
    <title></title>

<style>
    body{
        background: #cc9900;
    }
</style>


    <script src=http://www.mamicode.com/"libs/angular.min.js"></script>
    <script src=http://www.mamicode.com/"libs/angular-ui-route.js"></script>
    <script>
        var app = angular.module("mk", [‘ui.router‘]);
//        依赖$stateProvider服务与$urlRouterProvider服务
        app.config(function ($stateProvider, $urlRouterProvider) {

            $urlRouterProvider.when("", "/Page");
　//这一行定义了会在main.html页面第一个显示出来的状态，作为页面被加载好以后第一个被使用的路由.
            $stateProvider
                    .state("Page", {
                        url: "/Page",
                        templateUrl: "Page.html"
                    })

        });
    </script>

</head>
<body data-ng-app="myApp">
<h1>路由嵌套的主体页-----AngularJS Home Page (Ui-router)</h1>
<div ui-view=""></div>
</body>
<html>

效果图：（现在的链接还未添加内容）

技术分享

接下来完善一下Page.html

创建页面如下：

<div>
    <span style="padding-right: 20px" ui-sref=".Page1"><a href=http://www.mamicode.com/"javascript:;">Page-1</a></span>
    <span style="padding-right: 20px" ui-sref=".Page2"><a href=http://www.mamicode.com/"javascript:;">Page-2</a></span>
    <span style="padding-right: 20px" ui-sref=".Page3"><a href=http://www.mamicode.com/"javascript:;">Page-3</a></span>
</div>
<div ui-view=""/></div>

最后我们把main.html修改完整，让在 Page-1 或者 Page-2 再或者 Page-3 菜单上点击的时候需要页面在占位标记那里显示出来。

【完整的main.html】

 

<!DOCTYPE html>
<html ng-app="mk">
<head>
    <title></title>
    <script src=http://www.mamicode.com/"libs/angular.min.js"></script>
    <script src=http://www.mamicode.com/"libs/angular-ui-route.js"></script>
    <script>
        var app = angular.module("mk", [‘ui.router‘]);
//        依赖$stateProvider服务与$urlRouterProvider服务
        app.config(function ($stateProvider, $urlRouterProvider) {

            $urlRouterProvider.when("", "/Page");
            $stateProvider
                    .state("Page", {
                        url: "/Page",
                        templateUrl: "Page.html"
                    })
                  //  Page下的page1
                    .state("Page.Page1", {
                        url:"/Page1",
                        templateUrl: "Page1.html"
                    })
                    .state("Page.Page2", {
                        url:"/Page2",
                        templateUrl: "Page2.html"
                    })
                    .state("Page.Page3", {
                        url:"/Page3",
                        templateUrl: "Page3.html"
                    });
        });
    </script>

</head>
<body data-ng-app="myApp">
<h1>路由嵌套的主体页-----AngularJS Home Page (Ui-router)</h1>
<div ui-view=""></div>
</body>
<html>

 

好了，AngularJS里的嵌套路由到现在就全部实现了，你们快点在自己的本上运行一下吧！

 

AngularJS ui-router (嵌套路由)的简单学习


联系
我们