Home > Developer > JavaScript
Second-level nesting of routes in angularjs ui-router, angularjsui-router
Questions about nested routing in ui-router
1. First, our page level is
Among them, main.html is our main page. We need to manage routes in a unified manner in main.html.
In the main.html page, a ui-viewobject will be filled with pagetab.html. In the same time, pagetab.html will also have a ui-view.
In this way, nested routing is implemented.
Final effect:
When we click Page-1, the content in Page1 appears. Similarly, we click Page-2.
The following is the actual code:
Main.html
<!DOCTYPE html>PageTab.html
<!DOCTYPE html>Page1.html
<!DOCTYPE html>Page2.html
<!DOCTYPE html>The javascript library in main.html needs to be imported manually.
Next, let's take a look at the section of the js Code for unified Routing Management in main.html.
<script> angular.module("myApp",["ui.router"]) .config(function($stateProvider){ $stateProvider .state("PageTab",{ url:"", templateUrl:"PageTab.html" }) .state("PageTab.Page1",{ url:"/Page1", templateUrl:"Page1.html" }) .state("PageTab.Page2",{ url:"/Page2", templateUrl:"Page2.html" }) })</script>There are three statuses in total:
First status
.state("PageTab",{ url:"", templateUrl:"PageTab.html" })Renew this page.
Second status
.state("PageTab.Page1",{ url:"/Page1", templateUrl:"Page1.html" })We will name this status as PageTab. Page1. This will be handed over to pagetabfor processing, that is, adding page1.html content to ui-viewin pagetab.html. Similarly, if the state is named PageTab. Page2, the page pagetab.html is used to process objects.
I hope this article will help you. The second-level nesting of routes in angularjs ui-router will be introduced here. We hope you will continue to follow our website! If you want to learn about angularjs, you can continue to pay attention to this site.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
