Ui-router works very much like angular's routing control, and he only focuses on the state.
Angular templates
The simplest template, such as main.html:
<data-ng-app= "myApp"><H1> AngularJS Home Page</H1> <ui-view ></ Div > </ Body >
Ui-view represents a placeholder for a template, such as inserting content under Ui-view, by using the following code:
var myapp=angular.module ("MyApp", ["Ui.router"]); Myapp.config (function($ Stateprovider, $urlRouterProvider) { $urlRouterProvider. When ("", "/pagetab"); $stateProvider. State ("Pagetab", { URL:"/pagetab", Template:" })});When the program runs, insert a piece of code in the template: The effect is as follows:
Where will the template be inserted?
When the state is activated, its template is automatically inserted into the parent state corresponding to the template containing the Ui-view attribute inside the element, if it is the top level state, then its parent template is index.html
Activation status
1) Call the $state.go () method
2) Click on the link containing the UI-SELF directive;
3) Navigate to the URL associated with the state
Templates templates
Method One: Configure the template property to specify an HTML string, for example:
$stateProvider. State ("Pagetab", { URL:"/pagetab", Template:" })Method Two: Load the corresponding template by configuring the Templateurl property, for example:
$stateProvider. State ("Pagetab", { URL:"/pagetab", templateurl:"pagetab.html" })For more information on how to configure a template, see: http://bubkoo.com/2014/01/01/angular/ui-router/guide/state-manager/
Comprehensive template with routing knowledge, do a simple route demo, contains the page with main.html,pagetab.html,page1.html,page2.html,page3.html
The code for main.html is as follows:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "Utf-8"> <title>Book Store</title> <Scriptsrc= "Scripts/angular.js"></Script> <Scriptsrc= "Scripts/angular-ui-router.js"></Script> <Scriptsrc= "Scripts/app.js"></Script></Head><BodyData-ng-app= "MYAPP"><H1>AngularJS Home Page</H1> <DivUi-view></Div></Body></HTML>
The pagetab.html code is as follows, by setting the Ui-sref to navigate to the corresponding Page1, etc.:
<Div> <Div> <spanstyle= "width:100px"Ui-sref= ". Page1"><ahref="">Page1</a></span> <spanstyle= "width:100px"Ui-sref= ". Page2"><ahref="">Page2</a></span> <spanstyle= "width:100px"Ui-sref= ". Page3"><ahref="">Page3</a></span> </Div> <Div> <DivUi-view=""></Div> </Div></Div>
Page1.html:
< Div > < Div > < H1 > Page 1 content goes here ..... </ H1 > </ Div > </ Div >
Page2.html:
< Div > < Div > < H1 > Page 2 content goes here ..... </ H1 > </ Div > </ Div >
Page3.html:
< Div > < Div > < H1 >Page 3 content goes here ... </ H1 > </ Div > </ Div >
App.js The corresponding code is:
varMyapp=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" })});
The corresponding effect is:
Clicking Page1 will include the page1 corresponding HTML in the pagetab.html corresponding Ui-view.
Angular-ui-router Routing, view Management
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
