Skip to content

Commit 7f38c2b

Browse files
timkindbergtimkindberg
committed
Update quick start to use nested states
1 parent 4a1ed73 commit 7f38c2b

File tree

1 file changed

+108
-5
lines changed

1 file changed

+108
-5
lines changed

‎README.md

Lines changed: 108 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,9 @@ To evolve the concept of an [angularjs](http://angularjs.org/) [***route***](htt
4545
* [Generated Docs](http://angular-ui.github.com/ui-router/build/doc/)
4646

4747
## Quick Start
48+
49+
### Setup
50+
4851
1. Get ui-router:
4952
>* with bower: `bower install angular-ui-router`
5053
>* fork this repo
@@ -66,9 +69,109 @@ To evolve the concept of an [angularjs](http://angularjs.org/) [***route***](htt
6669
var myapp = angular.module('myapp', ['ui.state'])
6770
```
6871

69-
3. Add one or more `ui-view` to your app, give them names.
72+
### Nested States & Views
73+
74+
The great majority of the power of ui-router is its ability to nest states & views.
75+
76+
1. Follow [Setup](https://github.com/angular-ui/ui-router#setup) instructions above.
77+
78+
2. Add a `ui-view` to your app.
79+
>
80+
```html
81+
<!-- index.html -->
82+
<body>
83+
<div ui-view></div>
84+
<!-- Also a way to navigate -->
85+
<a href="#/route1">Route 1</a>
86+
<a href="#/route2">Route 2</a>
87+
</body>
88+
```
89+
90+
3. Add some templates. These will plug into the `ui-view` within index.html. Notice that they have their own `ui-view` as well! That is the key to nesting states and views.
91+
>
92+
```html
93+
<!-- route1.html -->
94+
<h1>Route 1</h1>
95+
<hr/>
96+
<a href="#/route1/list">Show List</a>
97+
<div ui-view></div>
98+
```
99+
```html
100+
<!-- route2.html -->
101+
<h1>Route 2</h1>
102+
<hr/>
103+
<a href="#/route2/list">Show List</a>
104+
<div ui-view></div>
105+
```
106+
107+
4. Add some child templates. *These* will get plugged into the `ui-view` of their parent state templates.
108+
```html
109+
<!-- route1.list.html -->
110+
<h3>List of Route 1 Items</h3>
111+
<ul>
112+
<li ng-repeat="item in items">{{item}}</li>
113+
</ul>
114+
```
115+
```html
116+
<!-- route2.list.html -->
117+
<h3>List of Route 2 Things</h3>
118+
<ul>
119+
<li ng-repeat="thing in things">{{thing}}</li>
120+
</ul>
121+
```
122+
123+
5. Now let's wire it all up. Set up your states in the module config:
124+
>
125+
```javascript
126+
myapp.config(function($stateProvider, $urlRouterProvider){
127+
//
128+
// For any unmatched url, send to /route1
129+
$urlRouterProvider.otherwise("/route1")
130+
//
131+
// Now set up the states
132+
$stateProvider
133+
.state('route1', {
134+
url: "/route1",
135+
templateUrl: "route1.html"
136+
})
137+
.state('route1.list', {
138+
url: "/list",
139+
templateUrl: "route1.list.html",
140+
controller: function($scope){
141+
$scope.items = ["A", "List", "Of", "Items"];
142+
}
143+
})
144+
.state('route2', {
145+
url: "/route2",
146+
templateUrl: "route2.html"
147+
})
148+
.state('route2.list', {
149+
url: "/list",
150+
templateUrl: "route2.list.html",
151+
controller: function($scope){
152+
$scope.things = ["A", "Set", "Of", "Things"];
153+
}
154+
})
155+
})
156+
```
157+
158+
4. See this quick start example in action.
159+
>**[Go to Quick Start Plunker for Nested States & Views](http://plnkr.co/edit/u18KQc?p=preview)**
160+
161+
5. This only scratches the surface! You've only seen Nested Views.
162+
>**[Dive Deeper!](https://github.com/angular-ui/ui-router/wiki)**
163+
164+
165+
### Multiple & Named Views
166+
167+
Another handy feature is the ability to have more than one view per template. Please note: 95% of the time Nested States & Views is the pattern you'll be looking for, opposed to using multiple views per template.
168+
169+
1. Follow [Setup](https://github.com/angular-ui/ui-router#setup) instructions above.
170+
171+
2. Add one or more `ui-view` to your app, give them names.
70172
>
71173
```html
174+
<!-- index.html -->
72175
<body>
73176
<div ui-view="viewA"></div>
74177
<div ui-view="viewB"></div>
@@ -78,7 +181,7 @@ var myapp = angular.module('myapp', ['ui.state'])
78181
</body>
79182
```
80183

81-
4. Set up your states in the module config
184+
3. Set up your states in the module config:
82185
>
83186
```javascript
84187
myapp.config(function($stateProvider, $routeProvider){
@@ -119,10 +222,10 @@ myapp.config(function($stateProvider, $routeProvider){
119222
})
120223
```
121224

122-
5. See this quick start example in action.
123-
>**[Go to Quick Start Plunker](http://plnkr.co/edit/vDURUN?p=preview)**
225+
4. See this quick start example in action.
226+
>**[Go to Quick Start Plunker for Multiple & Named Views](http://plnkr.co/edit/vDURUN?p=preview)**
124227
125-
6. This only scratches the surface! You've only seen Named Views and Parallel Views. Learn more about `state()` options, Nested Views, URL routing options, backwards compatibility, and more!
228+
5. This only scratches the surface! You've only seen Named Views and Parallel Views.
126229
>**[Dive Deeper!](https://github.com/angular-ui/ui-router/wiki)**
127230
128231
## Developing

0 commit comments

Comments
 (0)