1.1. Environment
1) angular.min.js
2) angular-ui-router-0.2.10.js
3) Make sure to include ui.router as a module dependency.
4) var app=angular .module("app",['ui.router']);
1.1. View activation method
1) $state.Go(): Convenience method with higher priority
2) ui-sref: Click to include this instruction to jump
3 ) url: url navigation
1.2. Multiple Views
Views:
Use the views property to set multiple views. This property is not required if multiple views are not required in a single state. Tip: Remember that in general nested views are more useful and powerful than multiple sibling views.
Code: prepare four pages main page and three sub pages
main page
<!DOCTYPE html> <html ng-app="app"> <head> <title>Multiple Views</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css" type="text/css"></link> </head> <body> <div class="container"> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Little Catkins pays tribute</a> </div> <div> <ul class="nav navbar-nav"> <li><a ui-sref="index2">onepage</a></li> <li><a ui-sref="index1">twopage</a></li> </ul> </div> </div> </nav> </div> <div ui-view></div> <div ui-view="index1"></div> <div ui-view="index2"></div> </body> <script type="text/javascript" src="plugins/angular/angular.min-1.4.6.js"></script> <script type="text/javascript" src="plugins/angular/angular-ui-router-0.2.10.js"></script> <script type="text/javascript"> var app=angular.module("app",['ui.router']); app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){ $stateProvider.state('index1', { url : '/index1', views:{ "index1":{ templateUrl: '/CeShi/lx/uiroute/index1.html' }, "index2":{ templateUrl: '/CeShi/lx/uiroute/index2.html' } } }).state('index2', { url : '/index2', templateUrl: '/CeShi/lx/uiroute/index3.html' }); $urlRouterProvider.otherwise('/index2'); }]).config(function($sceProvider){ $sceProvider.enabled(false); }); </script> </html>
The three sub-pages index1.html, index2.html, and index3.html are respectively
<h1>I am view one</h1>
<h1>I am view two</h1>
<h1>I am view three</h1>
effect For
1.3. The nested view is
still four pages, one main page, one sub page, two nested pages , the
main page
<!DOCTYPE html> <html ng-app="app"> <head> <title>Nested View</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.min.css" type="text/css"></link> </head> <body> <div class="container"> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Little Catkins pays tribute</a> </div> </div> </nav> </div> <div ui-view></div> </body> <script type="text/javascript" src="../../plugins/angular/angular.min-1.4.6.js"></script> <script type="text/javascript" src="../../plugins/angular/angular-ui-router-0.2.10.js"></script> <script type="text/javascript"> var app=angular.module("app",['ui.router']); app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){ $stateProvider.state('index2', { url : '/index2', templateUrl : '/Angular/uiview/nested/index2.html' }).state('index2.one',{ url:'/nested', templateUrl: '/Angular/uiview/nested/index1.html' }).state('index2.two',{ url:'/nested', templateUrl: '/Angular/uiview/nested/index3.html' }); $urlRouterProvider.otherwise('/index2'); }]).config(function($sceProvider){ $sceProvider.enabled(false); }); </script> </html>
Subpage
<div class="container"> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Little Catkins pays tribute</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a ui-sref="index2.one">onepage</a></li> <li><a ui-sref="index2.two">twopage</a></li> </ul> </div> </div> </nav> </div> <div ui-view></div>
Nested page
<h1>I am view one</h1>
<h1>I am view three</h1>
effect: