StateView

StateView

Build Status Join the chat at https://gitter.im/henrytseng/angular-state-router

Provides nested view management with template support.

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

Install

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

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

Controllers must use the same view id.

Resolve

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

Events are broadcast on the $rootScope.

$viewRender

This event is broadcasted when the view is rendered.

$viewError

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

API Directives

sview

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

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

Example

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

License

Copyright (c) 2015 Henry Tseng

Released under the MIT license. See LICENSE for details.

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