2. AngularJS--sub-route

1. Foreword

In the previous article, the use of routing in AngularJS was described. In fact, you can continue to nest routes in the route, called sub-routes. The following describes the use of sub-routes.

2.Steps

index02.html: The entry of the program access

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="UTF-8">
    <title> Sub-route application </title>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/angular-ui-router.min.js"></script>
    <script type="text/javascript" src="app/app2.js"></script>
</head>
<body>
    <!-- View-->
    <div ui-view="main">

    </div>
</body>
</html>

app2.js : In this routing configuration, D.html will be populated under the main view of index02.html.

// Create routing module 
var m = angular.module("app",["ui.router"]);

// Configure routingm.config (function($stateProvider,$urlRouterProvider){

    $urlRouterProvider.otherwise("/D"); // 激 routing

    $stateProvider.state("D",{
        url:"/D",
        views:{
            "main":{
                templateUrl:'templates/D.html',
            }
        }
    })
})

D.html: and there is a view in D.html, Will be replaced by html fragment.

<ul>
    <li ui-sref="D.d1">D1 fragment</li>
    <li ui-sref="D.d2">D2 fragment</li>
    <li ui-sref="D.d3">D3 fragment</li>
</ul>

<div ui-view="second">

</div>

Continue to configure sub-routes in app2.js There are two main points:

(1) The name of the sub-route, such as: D.d1, which indicates the d1 sub-route under the D route; (2) [email protected], the front indicates the name of the view in the sub-route, and the following indicates which route is visible.

// Create routing module 
var m = angular.module("app",["ui.router"]);

// Configure routingm.config(function($stateProvider,$urlRouterProvider){

    $urlRouterProvider.otherwise("/D"); // Inspire routing 

    $stateProvider.state("D",{
        url:"/D",
        views:{
            "main":{
                templateUrl:'templates/D.html',
            }
        }
    }).state("D.d1",{
        url:"/d1",
        views:{
            "[email protected]":{
                templateUrl:'templates/d1.html',
            }
        }
    }).state("D.d2",{
        url:"/d2",
        views:{
            "[email protected]":{
                templateUrl:'templates/d2.html',
            }
        }
    }).state("D.d3",{
        url:"/d3",
        views:{
            "[email protected]":{
                templateUrl:'templates/d3.html',
            }
        }
    })
})

html fragment in subview:

<|| |D1 fragment span style="font-size:50px;color:red;">D1片段</span>

In the subview, the route to be accessed also needs to be changed accordingly:

<li ui-sref="D.d1">D1 fragment</li>

3.

这里写图片描述