UI-Router

####Finally a de-facto solution to nested views and routing.

Latest release 0.0.1: Compressed / Uncompressed

Latest snapshot: Compressed / Uncompressed

Main Goal

To evolve the concept of an angularjs route into a more general concept of a state for managing complex application UI states.

Main Features

Robust State Management

$state and $stateProvider

More Powerful Views

ui-view directive (used in place of ng-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.

Resources

Quick Start

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.state as a dependency in your module

var myapp = angular.module('myapp', ['ui.state'])

Add one or more ui-view to 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.

Go to Quick Start Plunker

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!

Dive Deeper!

Developing

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.