####Finally a de-facto solution to nested views and routing.
- Latest release 0.0.1: Compressed / Uncompressed
- Latest snapshot: Compressed / Uncompressed
To evolve the concept of an angularjs 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.
- Get ui-router:
- with bower:
bower install angular-ui-router- fork this repo
- download the latest release (compressed | uncompressed)
- Add angular-ui-router.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-router.min.js"></script> <!-- Insert after main angular.js file -->- Set
ui.stateas a dependency in your module
var myapp = angular.module('myapp', ['ui.state']) - 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 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 in action.
- 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!
UI-Router uses grunt >= 0.4.x make sure to upgrade your environment and read the
Migration Guide.
Dependencies for building from source 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.