Simple learning of AngularJS ui-router (nested routines)

Today, let's learn about the nesting routines in Angularjs.

The Ui-router is as powerful as the ng-route part of the ANGULARJS framework. Ui-router provides features that let us do routing nesting and view naming, nested routines by functionality primarily dependent on the $stateprovider service, $ Urlrouterprovider Services and Ui-view implementations. .

　First we'll use the ANGULARJS framework to create simple HTML and JavaScript pages .

　

　We need to create a file that has these:

1. First create the main page main.html

2. Nested routines by page page.html

3. Create three sub-pages page1.html, page1.html, page1.html

Note: When using this method, remember to introduce the Angular-ui-route.js plugin Oh!

Main.html

Create the page as follows:

<! DOCTYPE html>"Mk">"Libs/angular.min.js"></script> <script src="Libs/angular-ui-route.js"></script> <script>varApp = Angular.module ("Mk", ['Ui.router']);//reliance on $stateprovider services and $urlrouterprovider servicesApp. Config (function ($stateProvider, $urlRouterProvider) {}); </script>"myApp">""></div>//must fill in</body>
Page.html
Create the page as follows:
<div> <span style="padding-right:20px"><a href="javascript:;">page-1</a></span> <span style="padding-right:20px"><a href="javascript:;">page-2</a></span> <span style="padding-right:20px"><a href="javascript:;">page-3</a></span></div>
Page1.html
Create the page as follows:
<!--sub-page 1--><div>    <div>        
Page2.html
Create the page as follows:
<!--sub-page 2--><div>    <div>        
Page3.html
Create the page as follows:
<!--sub-page 3--><div>    <div>        
The above is still a start, the main page main.html has not nested page.html page, the next step page.html page nested in it.
　At this time main.html
Create the page as follows: (The red part is the new addition content)
<! DOCTYPE html>"mk">
<style>
    body{
        Background: #cc9900;
    }
</style>

<script src="Libs/angular.min.js"></script> <script src="Libs/angular-ui-route.js"></script> <script>varApp = Angular.module ("Mk", ['Ui.router']);//reliance on $stateprovider services and $urlrouterprovider servicesApp. Config (function ($stateProvider, $urlRouterProvider) { $urlRouterProvider. When ( " ", "/page"); //This line defines the state that will be displayed first on the Main.html page as the first route to be used after the page is loaded. $stateProvider. State ( 　            "page", {URL: "/page", Templateurl: "page.html"                    })        }); </script>"myApp">""></div></body>
: (now the link has not been added to the content)
Next, perfect the page.html.
Create the page as follows:
<div> <span style="padding-right:20px" ui-sref= ". Page1 "><a href="javascript:;">page-1</a></span> <span style="padding-right:20px" ui-sref= ". Page2 "><a href="javascript:;">page-2</a></span> <span style="padding-right:20px" ui-sref= ". Page3 "><a href="javascript:;">page-3</a></span></div><div ui-view= ""/></div>
Finally, we modify the main.html to make the page appear in the placeholder tag when the Page-1 or Page-2 or the Page-3 menu is clicked.
"Complete main.html"
<! DOCTYPE html>"Mk">"Libs/angular.min.js"></script> <script src="Libs/angular-ui-route.js"></script> <script>varApp = Angular.module ("Mk", ['Ui.router']);//reliance on $stateprovider services and $urlrouterprovider servicesApp. Config (function ($stateProvider, $urlRouterProvider) {$urlRouterProvider. When ("","/page"); $stateProvider. State ("Page", {URL:"/page", Templateurl:"page.html"                    })                  //page under the Page1                   . State ("Page.page1", {url: "/page1", Templateurl: "Page1.html" }). State ("Page.page2", {url: "/page2", Templa                        Teurl: "Page2.html"}). State ("Page.page3", {url: "/page3", Templateurl: "Page3.html"                    });    }); </script>"myApp">""></div></body>
Well, the Angularjs in the embedded routine from now on all realized, you hurry up in their own Ben run a bit!
Simple learning of AngularJS ui-router (nested routines)