Angular Ui-router Example One

First, the benefit of choosing angular-ui-router

1. Ui-router is a community library to improve the ng-route of many deficiencies
   
2. Ui-router routers allow nested views (nested view) and multiple named Views (multiple named view), we may have more pages that need to inherit other parts, so it's useful.
3. Implement different status links to different pages by building Ui-sref
4. States allows you to easily pass information through $statsparams, allowing different information for different states in the map format.
5. Your route can access dynamically created links
   

Second, a simple example, the steps are as follows:

2. new index.html
   

   <! DOCTYPE html> 
    

4. new pagetab.html
   when we want to manage all the pages in the master page, we want a placeholder tag called "Ui-view". So we now call pagetab.html a master page, because it will manage all the other pages we need in pagetab.html with the "Ui-view" statement.
   

   <div> <div> <span style= "width:100px" ui-sref= ". Page1 "><a href=" ">Page-1</a></span> <span style=" width:100px "ui-sref=". Page2 "><a href=" ">Page-2</a></span> <span style=" width:100px "ui-sref=".    Page3 "><a href=" ">Page-3</a></span> </div> <div> <div ui-view=" "/> </div></div> 

   
   Use the Ui-sref property to associate the state defined in app.js with the corresponding text defined in the tab. When we declare it using dot notation, The program will assume that the page is Ui-view or embedded in the page, which is the page that needs to be displayed in the routing configuration. The
   
   is delimited with a. Number. This is key, it tells the routing engine what we define here is a sub-page or an embedded page.
   
   
6. New page1.html page2.html page3.html
   

   <div >     <div>         
   The other 2 are shown above.
   
   

8. Introduce angular-ui-router.js reference step 1 in index.html.
   
   
10. New App.js
    
    Who will tell the program which page should be displayed? That's what we're going to configure in the routing engine.
    

    var MyApp = angular.module ("MyApp", [' Ui.router ']); Myapp.config (function ($stateProvider, $urlRouterProvider) {    $ Urlrouterprovider.when ("", "/pagetab");    $stateProvider. State ("Pagetab", {        URL: "/pagetab",        templateurl: "pagetab.html"    }). State (" Pagetab.page1 ", {        URL:"/page1 ",        templateurl:" page1.html "    }). State (" Pagetab.page2 ", {        URL:"/ Page2 ",        templateurl:" page2.html "    }). State (" Pagetab.page3 ", {        URL:"/page3 ",        templateurl:" Page3.html "    });});

    
    

Angular Ui-router Example One