Angularjs Learning UI Router

1. Installation

Bower Install--save Angular_ui-router

2. In the Project main page, add the index.html

<div ui-view= "" ></ui-view>/*login page, dashboard.html will be embedded here */

3. On the App.js page setup

. config (function ($stateProvider, $urlRouterProvider) {  $urlRouterProvider. Otherwise ('/login ');  /* Other pages not found when the default page *  /$stateProvider    . State (' login ', {      URL: '/login ',      templateurl: '/views/ Login.html '    })    . State (' dashboard ', {      URL: '/dashboard ',      templateurl: '/views/dashboard.html '/ * This is a landing page*/    })    . State ('dashboard. Articlelist ', {      URL: '/articlelist ',      templateurl: '/views/articlelist.html ' /* This is a nested page inside the dashboard *    /})    . State ('dashboard. Addarticle ', {      URL: '/ Addarticle ',      templateurl: '/views/addarticle.html '    )});

4. Set in HTML

This is the nested page under dashboard:

    <ui-sref= ". Articlelist"><href= "" > Article List </a></li>/* Note One of the dot,href does not need to write */

<div>
  <div ui-view= ""/>
</div>/*articlelist and addarticle two pages will be nested in dashboard here * /

This is a button click on the page above to jump to another nested page, Note Ur-sref added the parent node dashboard. href also has content

<type= "button"  class= "btn btn-success btn-xs pull-right"  Ui-sref= "dashboard.addarticle"  href= "/addarticle">+ new  </button>

Angularjs Learning UI Router