Angular Ui-router Example Two

Based on the first example, let's take a closer look at something slightly more complicated.

first, the effect to be achieved is as follows:

Index.html

About.html

As you can see, we need to switch to a different view using the route origin. Ui-router provides features that allow us to do routing nesting and view naming, which we will analyze in the next example.

Second, the code implementation part

1. We need a display template as a container for the page display, so the new index.html
   

   <! DOCTYPE html>
   Here to use the relevant knowledge of bootstrap, a general look to understand, some of the contents of the display are in the container
   
   

3. Import each JS file as shown in the first step
   
   
4. Create a new App.js file to configure the view state.
   

   var Routerapp = angular.module (' Routerapp ', [' Ui.router ', ' controllers ']); Routerapp.config (function ($stateProvider,  $urlRouterProvider) {$urlRouterProvider. Otherwise (' home '); $stateProvider. State (' home ', {URL: '//', Templateurl: ' home.html '})//home Page inline View list (when clicked Ui-sref = ". List" is routed to this). State (' home.list ', {url: '/list ', Templateurl: ' home-list.html ', Controller: ' Controller '} '//home page under the inline view paragraph (when clicked Ui-sref= ". Paragraph"). State (' home.paragraph ', {url: '/paragraph ', TE Mplate: ' I could sure use a scoop of ice-cream. '}) <pre class= "prettyprint php" ><code><span class= "indent" > </span><span class= "comment" >//view with multiple Ui-view in this state, you can use a specific template, controller, resolve data</span></code> for different ui-view. Ate (' about ', {url: '/about ', Views: {': {templateurl: ' about.html '}, ' [email protected] ' : {Template: ' <p>this is ColumnoneShow Area!! </p> ', ' [email protected] ': {templateurl: ' table-data.html ', Controller: ' Controll Er '}});

   
   Add: Absolute view uses the ' @ ' symbol to differentiate, such as ' [email protected] ' indicates that the ' bar ' template is used for Ui-view named ' foo ' and the relative view is not
   
   
   
6. Custom Controller Controllers.js
   

   Custom controller var mycontrl= angular.module (' controllers ', []); Mycontrl.controller (' Controller ', function ($scope) {  $ scope.message = ' test ';  $scope. topics = [    {      name: ' Butterscotch ',      price:50    },    {      name: ' Black current ', Price      :    {      name: ' Mango ',      price:20    }  ];});

   There is nothing special in this, it is used to provide data.
   
   
8. new home.html
   

     Ui-view under this page is the nesting of views, respectively, to display home-list.html   
    

10.   new home-list.html
    

    <ul> <li ng-repeat= "topic in Topics" >{{topic.name}}</li></ul> 

    Fetch data from the controller, Traverse the output.
    
    
12. new about.html
    

    <div class= " Jumbotron Text-center ">  
     
     

14. New table-data.html
    

Third, the project structure is as follows

I'm tired of it ~ welcome you to revise, criticize, change the opinion!

Angular Ui-router Example Two