State-based routing for AngularJS
npm install airwave-ui-router$route service in the Angular ngRoute module, which is organized around URL
$ jspm install angular-ui-router from your console
$ npm install angular-ui-router from your console
$ bower install angular-ui-router from your console
$ component install angular-ui/ui-router from your console
angular-ui-router.js (or angular-ui-router.min.js) in your index.html, after including Angular itself (For Component users: ignore this step)
'ui.router' to your main module's list of dependencies (For Component users: replace 'ui.router' with require('angular-ui-router'))
html
...
...
`
$3
The majority of UI-Router's power is in its ability to nest states & views.
(1) First, follow the setup instructions detailed above.
(2) Then, add a ui-view directive to the of your app.
>
`html
State 1
State 2
`
(3) You'll notice we also added some links with ui-sref directives. In addition to managing state transitions, this directive auto-generates the href attribute of the element it's attached to, if the corresponding state has a URL. Next we'll 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.
>
`html
State 1
Show List
`
`html
State 2
Show List
`
(4) Next, we'll add some child templates. These will get plugged into the ui-view of their parent state templates.
>
`html
List of State 1 Items
- {{ item }}
`
>
`html
List of State 2 Things
- {{ thing }}
`
(5) Finally, we'll wire it all up with $stateProvider. Set up your states in the module config, as in the following:
>
`javascript
myApp.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/state1");
//
// Now set up the states
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "partials/state1.html"
})
.state('state1.list', {
url: "/list",
templateUrl: "partials/state1.list.html",
controller: function($scope) {
$scope.items = ["A", "List", "Of", "Items"];
}
})
.state('state2', {
url: "/state2",
templateUrl: "partials/state2.html"
})
.state('state2.list', {
url: "/list",
templateUrl: "partials/state2.list.html",
controller: function($scope) {
$scope.things = ["A", "Set", "Of", "Things"];
}
});
});
`
(6) See this quick start example in action.
>Go to Quick Start Plunker for Nested States & Views
(7) This only scratches the surface
>Dive Deeper!
$3
Another great feature is the ability to have multiple ui-views view per template.
Pro Tip: *While multiple parallel views are a powerful feature, you'll often be able to manage your
interfaces more effectively by nesting your views, and pairing those views with nested states.*
(1) Follow the setup instructions detailed above.
(2) Add one or more ui-view to your app, give them names.
>
`html
Route 1
Route 2
`
(3) Set up your states in the module config:
>
`javascript
myApp.config(function($stateProvider) {
$stateProvider
.state('index', {
url: "",
views: {
"viewA": { template: "index.viewA" },
"viewB": { template: "index.viewB" }
}
})
.state('route1', {
url: "/route1",
views: {
"viewA": { template: "route1.viewA" },
"viewB": { template: "route1.viewB" }
}
})
.state('route2', {
url: "/route2",
views: {
"viewA": { template: "route2.viewA" },
"viewB": { template: "route2.viewB" }
}
})
});
``