3
3
#### The de-facto solution to flexible routing with nested views
4
4
---
5
5
** [ Download 0.2.0] ( http://angular-ui.github.io/ui-router/release/angular-ui-router.js ) ** (or ** [ Minified] ( http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js ) ** ) ** |**
6
+ ** [ Learn] ( #resources ) |**
6
7
** [ Discuss] ( https://groups.google.com/forum/#!categories/angular-ui/router ) |**
7
8
** [ Get Help] ( http://stackoverflow.com/questions/ask?tags=angularjs,angular-ui-router ) |**
8
9
** [ Report an Issue] ( #report-an-issue ) |**
9
- ** [ Contribute] ( #developing ) **
10
+ ** [ Contribute] ( #contribute ) **
10
11
11
12
---
12
13
@@ -60,13 +61,13 @@ The majority of UI-Router's power is in its ability to nest states & views.
60
61
61
62
** (1)** First, follow the [ setup] ( #get-started ) instructions detailed above.
62
63
63
- ** (2)** Then, add a [ ` ui-view ` directive] ( https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-view ) to the ` <body /> ` of your app app .
64
+ ** (2)** Then, add a [ ` ui-view ` directive] ( https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-view ) to the ` <body /> ` of your app.
64
65
65
66
>
66
67
``` html
67
68
<!-- index.html -->
68
69
<body >
69
- <ui-view ></ui-view >
70
+ <div ui-view ></div >
70
71
<!-- We'll also add some navigation: -->
71
72
<a ui-sref =" state1" >State 1</a >
72
73
<a ui-sref =" state2" >State 2</a >
@@ -81,14 +82,14 @@ The majority of UI-Router's power is in its ability to nest states & views.
81
82
<h1 >State 1</h1 >
82
83
<hr />
83
84
<a ui-sref =" state1.list" >Show List</a >
84
- <ui-view ></ui-view >
85
+ <div ui-view ></div >
85
86
```
86
87
``` html
87
88
<!-- partials/state2.html -->
88
89
<h1 >State 2</h1 >
89
90
<hr />
90
91
<a ui-sref =" state2.list" >Show List</a >
91
- <ui-view ></ui-view >
92
+ <div ui-view ></div >
92
93
```
93
94
94
95
** (4)** Next, we'll add some child templates. * These* will get plugged into the ` ui-view ` of their parent state templates.
@@ -127,25 +128,25 @@ myApp.config(function($stateProvider, $urlRouterProvider) {
127
128
url: " /state1" ,
128
129
templateUrl: " partials/state1.html"
129
130
})
130
- .state (' state1.list' , {
131
- url: " /list" ,
132
- templateUrl: " partials/1.list.html" ,
133
- controller : function ($scope ) {
134
- $scope .items = [" A" , " List" , " Of" , " Items" ];
135
- }
136
- })
131
+ .state (' state1.list' , {
132
+ url: " /list" ,
133
+ templateUrl: " partials/1.list.html" ,
134
+ controller : function ($scope ) {
135
+ $scope .items = [" A" , " List" , " Of" , " Items" ];
136
+ }
137
+ })
137
138
.state (' state2' , {
138
139
url: " /state2" ,
139
140
templateUrl: " partials/state2.html"
140
141
})
141
- .state (' state2.list' , {
142
- url: " /list" ,
143
- templateUrl: " partials/state2.list.html" ,
144
- controller : function ($scope ) {
145
- $scope .things = [" A" , " Set" , " Of" , " Things" ];
146
- }
147
- })
148
- });
142
+ .state (' state2.list' , {
143
+ url: " /list" ,
144
+ templateUrl: " partials/state2.list.html" ,
145
+ controller : function ($scope ) {
146
+ $scope .things = [" A" , " Set" , " Of" , " Things" ];
147
+ }
148
+ })
149
+ });
149
150
```
150
151
151
152
** (6)** See this quick start example in action.
@@ -157,7 +158,7 @@ myApp.config(function($stateProvider, $urlRouterProvider) {
157
158
158
159
### Multiple & Named Views
159
160
160
- Another great feature is the ability to have multiple ` < ui-view /> ` s view per template.
161
+ Another great feature is the ability to have multiple ` ui-view ` s view per template.
161
162
162
163
** Pro Tip:** * While mulitple parallel views are a powerful feature, you'll often be able to manage your
163
164
interfaces more effectively by nesting your views, and pairing those views with nested states.*
@@ -169,8 +170,8 @@ interfaces more effectively by nesting your views, and pairing those views with
169
170
``` html
170
171
<!-- index.html -->
171
172
<body >
172
- <ui-view name =" viewA" ></div >
173
- <ui-view name =" viewB" ></div >
173
+ <div ui-view =" viewA" ></div >
174
+ <div ui-view =" viewB" ></div >
174
175
<!-- Also a way to navigate -->
175
176
<a ui-sref =" state1" >State 1</a >
176
177
<a ui-sref =" state2" >State 2</a >
@@ -181,41 +182,29 @@ interfaces more effectively by nesting your views, and pairing those views with
181
182
>
182
183
``` javascript
183
184
myapp .config (function ($stateProvider , $routeProvider ){
184
- $stateProvider
185
- .state (' index' , {
186
- url: " " ,
187
- views: {
188
- " viewA" : {
189
- template: " index.viewA"
190
- },
191
- " viewB" : {
192
- template: " index.viewB"
193
- }
194
- }
195
- })
196
- .state (' route1' , {
197
- url: " /route1" ,
198
- views: {
199
- " viewA" : {
200
- template: " route1.viewA"
201
- },
202
- " viewB" : {
203
- template: " route1.viewB"
204
- }
205
- }
206
- })
207
- .state (' route2' , {
208
- url: " /route2" ,
209
- views: {
210
- " viewA" : {
211
- template: " route2.viewA"
212
- },
213
- " viewB" : {
214
- template: " route2.viewB"
215
- }
216
- }
217
- })
185
+ $stateProvider
186
+ .state (' index' , {
187
+ url: " " ,
188
+ views: {
189
+ " viewA" : { template: " index.viewA" },
190
+ " viewB" : { template: " index.viewB" }
191
+ }
192
+ })
193
+ .state (' route1' , {
194
+ url: " /route1" ,
195
+ views: {
196
+ " viewA" : { template: " route1.viewA" },
197
+ " viewB" : { template: " route1.viewB" }
198
+ }
218
199
})
200
+ .state (' route2' , {
201
+ url: " /route2" ,
202
+ views: {
203
+ " viewA" : { template: " route2.viewA" },
204
+ " viewB" : { template: " route2.viewB" }
205
+ }
206
+ })
207
+ });
219
208
```
220
209
221
210
** (4)** See this quick start example in action.
@@ -250,6 +239,22 @@ is a bug, it's best to talk it out in the
250
239
keeps development streamlined, and helps us focus on building great software.
251
240
252
241
242
+ ## Contribute
243
+
244
+ ** (1)** See the ** [ Developing] ( #developing ) ** section below, to get the development version of UI-Router up and running on your local machine.
245
+
246
+ ** (2)** Check out the [ roadmap] ( https://github.com/angular-ui/ui-router/issues/milestones ) to see where the project is headed, and if your feature idea fits with where we're headded.
247
+
248
+ ** (3)** If you're not sure, [ open an RFC] ( https://github.com/angular-ui/ui-router/issues/new?title=RFC:%20My%20idea ) to get some feedback on your idea.
249
+
250
+ ** (4)** Finally, commit some code and open a pull request. Code & commits should abide by the following rules:
251
+
252
+ - * Always* have test coverage for new features (or regression tests for bug fixes), and * never* break existing tests
253
+ - Commits should represent one logical change each; if a feature goes through multiple iterations, squash your commits down to one
254
+ - Changes should always respect the coding style of the project
255
+
256
+
257
+
253
258
## Developing
254
259
255
260
UI-Router uses <code >grunt >= 0.4.x</code >. Make sure to upgrade your environment and read the
@@ -258,9 +263,9 @@ UI-Router uses <code>grunt >= 0.4.x</code>. Make sure to upgrade your environmen
258
263
Dependencies for building from source and running tests:
259
264
260
265
* [ grunt-cli] ( https://github.com/gruntjs/grunt-cli ) - run: ` $ npm install -g grunt-cli `
261
- * Then install development dependencies with: ` $ npm install `
266
+ * Then, install the development dependencies by running ` $ npm install ` from the project directory
262
267
263
- There are a number of targets in the gruntfile that is used to building the solution, documents etc.
268
+ There are a number of targets in the gruntfile that are used to generating different builds:
264
269
265
270
* ` grunt ` : Perform a normal build, runs jshint and karma tests
266
271
* ` grunt build ` : Perform a normal build
0 commit comments