Attention: UI-Router uses grunt >= 0.4.x make sure to upgrade your environment and read the
Migration Guide.
Finally a de-facto solution to nested views and routing.
To evolve the concept of an Angular "Route" into a more general concept of a "State" for managing complex application UI states.
- Robust State Management
$stateand$stateProvider
- More Powerful Views
ui-viewdirective (used in place ofng-view)
- Named Views
<div ui-view="chart">
- Multiple Parallel Views
<div ui-view="chart1">
<div ui-view="chart2">
- Nested Views
load templates that contain nested
ui-views as deep as you'd like.
- Routing
States can map to URLs (though it's not required)
Basically, do whatever you want with states and routes.
- In-Depth Overview
- FAQ
- Sample App (Source)
- Generated Docs
- Latest build: angular-ui-states.min.js (uncompressed angular-ui-states.js)
- Add angular-ui-states.min.js to your index.html
<!doctype html>
<html ng-app="myapp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="angular-ui-states.js"></script>- Add one or more
ui-viewto your app, give them names.
<body>
<div ui-view="viewA"></div>
<div ui-view="viewB"></div>
<!-- Also a way to navigate -->
<a href="#/route1">Route 1</a>
<a href="#/route2">Route 2</a>
</body>- Set
ui.stateas a dependency in your module
var myapp = angular.module('myapp', ['ui.state']) - Set up your states in the module config
myapp.config(function($stateProvider, $routeProvider){
$stateProvider
.state('index', {
url: "", // root route
views: {
"viewA": {
templateUrl: "index.viewA.html"
},
"viewB": {
templateUrl: "index.viewB.html"
}
}
})
.state('route1', {
url: "/route1",
views: {
"viewA": {
templateUrl: "route1.viewA.html"
},
"viewB": {
templateUrl: "route1.viewB.html"
}
}
})
.state('route2', {
url: "/route2",
views: {
"viewA": {
templateUrl: "route2.viewA.html"
},
"viewB": {
templateUrl: "route2.viewB.html"
}
}
})
})- See this quick start example working.
- 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!
Dependencies for building the solution and running tests:
- grunt-cli - run:
$ npm install -g grunt-cli - Then install development dependencies with:
$ npm install
There is a number of targets in the gruntfile that is used to building the solution, documents etc.
grunt: Perform a normal build, runs jshint and karma testsgrunt build: Perform a normal buildgrunt dist: Perform a clean build and generate documentationgrunt dev: Run dev server (sample app) and watch for changes, builds and runs karma tests on changes.