Angular-ui-router advanced two nested view combined with multiple views

Copyright Notice: This article is the main original article, without the owner's permission not to reprint Recommended reading: http://write.blog.csdn.net/postedit/74315843 ui-router nested View

Nested views are one of the biggest differences between Ui-router and Ng-route, and the main reason why Ui-router is favored by the public. Next with the small series directly to do a simple nested view (Nested views).

Above is the layout of this example, with navigation bars, sidebar, view 1, and its descendants view.

This is the layout of the entire example:

File structure:

First is the homepage demo2.html code:

<! DOCTYPE html>
 

and CSS file Index.css:


/* Index *
/header {
	background-color:black;
	Color:white;
	Text-align:center;
	padding:5px;
}

Nav {
	line-height:30px;
	Background-color: #eeeeee;
	height:600px;
	width:20%;
	Float:left;
	padding:0px;
	Text-align:center;
}

div {
	Background-color:gainsboro;
	width:80%;
	height:600px;
	Float:right;
	padding:0px;
}


footer {
	background-color:black;
	Color:white;
	Clear:both;
	Text-align:center;
	padding:5px;
}
/* Page 1 * *
. P1 {
	background-color:papayawhip;
	width:100%;
	height:100%;
}
/* Page 1.1 * *
. p1_1 {
	background-color:whitesmoke;
	width:80%;
	height:80%;
}
/* Page 1.1.1 * *
. p1_1_1 {
	Background-color:lightgrey;
	width:80%;
	height:80%;
}
/* Page 2 * *

. P2 {
	background-color:powderblue;
	width:100%;
	height:100%;
}
 


App2.js Code:


' Use strict ';
Define ' Trialapp ' module var app = Angular.module (' Trialapp ', [' ui.router ']); Define Routers app.config (function ($stateProvider) {$stateProvider. State (' home ', {url: '/home ', TE Mplateurl: ' demo2.html ', controller: ' Maincontroller '}. State (' 1 ', {url: '/page1 ', Templat
	    			Eurl: ' nestedviews/htmls/1/page1.html ', controller:function ($scope, $state) {$scope. Change = function () {
	    		$state. Go (' 1.1 '); }}). State (' 1.1 ', {url: '/page1.1 ', Templateurl: ' Nestedviews/htmls/1/childviews/page1.1.h
	    		Tml ', Controller:function ($scope, $state) {$scope. Change = function () {$state. Go (' 1.1.1 '); }}). State (' 1.1.1 ', {url: '/page1.1.1 ', Templateurl: ' Nestedviews/htmls/1/childviews/page 1.1.1.html ',}). State (' 2 ', {url: '/page2 ', Templateurl: ' Nestedviews/htmls/2/page2.html ', CO Ntroller:function ($sCope, $state) {$scope. Change = function () {$state. Go ();
}
	    	}
	    })
}); App.controller (' Maincontroller ', function () {alert ("Welcome to Nested View demo!");
 

In the preceding code, a nested view is set, the state 1--> state 1.1--> State 1.1.1, and the state name of the previous view must precede the child view state name plus '. ', such as Father.child. This is also true for multilevel nesting, which is easy to identify.

Page1.html Code:

<div class= "P1" >
    
 
In the Page1 page, you need to set up Ui-view, which is where you want to display the child view.



Page1.1.html Code:


<div class= "P1_1" >
    
 
In the Page1.1 page, you also need to set the Ui-view as Page1, showing the child view.



Page1.1.1.html Code:

<div class= "P1_1_1" >
    
 


Page2.html Code:


<div class= "P2" >
	
 
Page2 is the same. For the subsequent child view display, the Ui-view is set. All right. The following effects are displayed:





Ui-router nested views are combined with multiple views (details can refer to multiple views of the Angular-ui-router)

This is the layout used in combination:



File structure:



This is the updated demo2.html code:


<! DOCTYPE html>
 

Add the following code to the Index.css file:


/* Page 3 * *
. P3 {
	background-color:mintcream;
	width:100%;
	Height:%;
}
section {
	background-color:lightgreen;
	height:539px;
	width:20%;
	Float:left;
	padding:0px;
	Text-align:center;
}
#A {
	width:80%;
	height:269px;
	Background-color:antiquewhite;
}
#B {
	width:80%;
	Height:269px
}
. A {
	width:100%;
	height:50px;
	Background-color:antiquewhite
}
. b{
	width:100%;
	height:50px;
}
App2.js Code:


' Use strict ';
Define ' Trialapp ' module var app = Angular.module (' Trialapp ', [' ui.router ']); Define Routers app.config (function ($stateProvider) {$stateProvider. State (' home ', {url: '/home ', TE Mplateurl: ' demo2.html ', controller: ' Maincontroller '}. State (' 1 ', {url: '/page1 ', Templat
	    			Eurl: ' nestedviews/htmls/1/page1.html ', controller:function ($scope, $state) {$scope. Change = function () {
	    		$state. Go (' 1.1 '); }}). State (' 1.1 ', {url: '/page1.1 ', Templateurl: ' Nestedviews/htmls/1/childviews/page1.1.h
	    		Tml ', Controller:function ($scope, $state) {$scope. Change = function () {$state. Go (' 1.1.1 '); }}). State (' 1.1.1 ', {url: '/page1.1.1 ', Templateurl: ' Nestedviews/htmls/1/childviews/page 1.1.1.html ',}). State (' 2 ', {url: '/page2 ', Templateurl: ' Nestedviews/htmls/2/page2.html ', CO Ntroller:function ($sCope, $state) {$scope. Change = function () {$state. Go ();
	    }}). State (' 3 ', {url: '/page3 ', Templateurl: ' Nestedviews/htmls/3/page3.html ',}
	    		}). State (' 3.child ', {views: {' A ': {templateurl: ' nestedviews/htmls/3/a.html '},
' B ': {templateurl: ' Nestedviews/htmls/3/b.html '}}}); App.controller (' Maincontroller ', function () {//alert ("Welcome to Nested View demo!");
Page3.html Code:


<div class= "P3" >
    
A.html Code:


<div class= "A" >
	
B.html Code:


<div class= "B" >
	
Demo Effect:


view naming (relative naming and absolute naming) in the above example, we demonstrate the relative naming of views in the View property. What is the absolute name?
Generally, a view name is absolutely named as long as it contains the "@" symbol.
Relative naming: Absolute naming relative to Parent view: Specifying which view is relative to


In principle, each view in the Views property is named with the view name @ status name. Let's try to understand the secret of the view naming.

We modify the following App2.js code:


. State (' 3.child ', {
            URL: '/child '), views
	    	: {
	    		' a@3 ': {
	    			templateurl: ' nestedviews/htmls/3/a.html
	    		' },
	    		' b@3 ': {
	    			templateurl: ' nestedviews/htmls/3/b.html '
	    		}
	    	}
	    }
 
In the same view of a and B, toggle the HTML template
. State (' 3.child1 ', {
	    URL: '/child1 '), views
	    : {
	    		' a@3 ': {
	    			Template: ' 
 

Page3.html Code: (Adds a status of "3.child1", in order to toggle the HTML template in case of multiple sibling views)


<div class= "P3" >
    
 
In the above App2.js code:

A@3 represents the place where the <div ui-view= ' A ' > in the corresponding HTML template (page3.html) of the State "3";

B@3 represents the place where ui-view= ' B ' > is <div in the HTML template (page3.html) corresponding to the status "3".

is to specify a place, just like the city of Huangpu, Shanghai. The name of the specified view is also the name of the Ui-view, and the HTML template corresponding to the status name is specified after the @. The latter is a large area, such as a city, and the latter is one of the most precise places in the wide range, one of the cities.

If there is nothing in front of @ then it corresponds to <div ui-view></div>, and if there is nothing behind it, it is the default root HTML template, and if there is no A or B view in the root template, no effect will be displayed. Here is the effect show:




More details can be referred to: http://blog.csdn.net/zhang_red/article/details/72532308
The next issue will discuss the various methods of ui-router, please look forward to.