Build Status Join the chat at

Provides nested view management with template support.

StateView is a modular component designed to be used with StateRouter, an AngularJS state-based router.


To install in your project, install from npm (remember you'll also need to install angular-state-router since it is a dependency)

Quick Start

Include the state-view.min.js script tag in your .html:

In app.js add angular-state-router and angular-state-view as a dependency when your application module is instantiated.

During the configuration of StateRouter utilize templates to associate a view with a rendering an HTML partial

Now in the view you can utilize the view id defined in the templates by using the sview element.

Including nesting views to form template structures where the view sideBar might utilize the following code HTML partial sidebar.html as a template:


Controllers can be instantiated on a view $scope during rendering by specifying a controllers Object

Controllers must use the same view id.


States that include a resolve property will resolve all promises and expose data to controllers.

ProductService.get() should return a promise so that you may access the resolved value of currentProduct via your controller as follows:


Events are broadcast on the $rootScope.


This event is broadcasted when the view is rendered.


This event is broadcasted when an error occurs during view rendering.

API Directives


  • id {String} A unque identifier associated with a template

A view tag where the contents are dynamically replaced as states defined templates.


States having templates.layout defined will insert and compile relevant HTML partials.

Where the state definition is either a HTML partial:

Or function injection template

Or promised template


Copyright (c) 2015 Henry Tseng

Released under the MIT license. See LICENSE for details.

comments powered by Disqus
This page was last updated over 2 years ago.