AngularJSAngularJS ui-router (嵌套路由)的简短学习

末尾大家把main.html修改总体,让在 Page-1
或者 Page-2 再或许 Page-3
菜单上点击的时候须要页面在占位标记那里显示出来。

【完整的main.html

   创造页面如下:(杏黄部分为新加始末)

好了,AngularJS里的嵌套路由到现行就满门完结了,你们快点在团结的本上运行一下呢!

Page3.html

 

  main.html

接下去完善一下Page.html

  3.在开立多个子页面  
 page1.html 、 page1.html   、   page1.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>
<!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>

 首先大家先利用AngularJS框架来成立简单的html和JavaScript页面。

始建页面如下:

<div>
    <a href="javascript:;">Page-1</a>
    <a href="javascript:;">Page-2</a>
    <a href="javascript:;">Page-3</a>
</div>
<div ui-view=""/></div>

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

  
创设页面如下:

     后日让大家一齐来读书一下AngularJS里的嵌套路由。

 咱俩需求成立的公文有眨眼间间那个:

创造页面如下:

 

创办页面如下:

Page1.html

 

以上仍然个开始,主体页面main.html还一直不嵌套page.html页面,接下去先把page.html页面嵌套在其间吧。

AngularJS 1

   在意:在利用那一个办法时,记得要引入angular-ui-route.js插件哦!

<div>
    <a href="javascript:;">Page-1</a>
    <a href="javascript:;">Page-2</a>
    <a href="javascript:;">Page-3</a>
</div>

 

功用图:(以往的链接还未添加内容)

创立页面如下:

  ui-router和同属AngularJS框架一部分的ng-route一样强大.
ui-router提供了让我们得以做路由嵌套和视图命名的性状,嵌套路由效用重假诺依靠$stateProvider服务,$urlRouterProvider服务与
ui-view落成。. 

AngularJS,Page2.html

  2.嵌套路由页面      
page.html

  此时main.html

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

Page.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>

成立页面如下:

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

相关文章