AngularJS ui-router (嵌套路由)的简短修

     今天为咱一齐来学习一下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="libs/angular.min.js"></script>
    <script src="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>
    <a href="javascript:;">Page-1</a>
    <a href="javascript:;">Page-2</a>
    <a href="javascript:;">Page-3</a>
</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="libs/angular.min.js"></script>
    <script src="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>

作用图:(现在之链接还无加加内容)

图片 1

接通下去到一下Page.html

缔造页面如下:

<div>
    <a href="javascript:;">Page-1</a>
    <a href="javascript:;">Page-2</a>
    <a href="javascript:;">Page-3</a>
</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="libs/angular.min.js"></script>
    <script src="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里之嵌套路由于至现在就全部兑现了,你们赶紧点当自己的本上运行一下吧!

 

相关文章