Angular-state-view NPM

StateView

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)

npm install angular-state-view --save

Quick Start

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

<html ng-app="myApp">
  <head>
    <script src="/node_modules/angular/angular.min.js"></script>
    <script src="/node_modules/angular-state-router/dist/state-router.min.js"></script>
    <script src="/node_modules/angular-state-view/dist/state-view.min.js"></script>
    <script src="/js/app.js"></script>
  </head>
  <body>
    ...
  </body>
</html>

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

angular.module('myApp', ['angular-state-router', 'angular-state-view']);

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

angular.module('myApp', ['angular-state-router', 'angular-state-view'])
  .config(function($stateProvider) {

    $stateProvider

      // Define states
      .state('landing', {
        url: '/',
        templates: {

          // HTML fragment partial template
          sideBar: '/sidebar.html',

          // Function injection template
          greetingPopOver: function($templateCache, $greetingService) {
            return $templateCache.get('greeting_' + $greetingService.message() + '.html');
          },

          // Promised template
          calloutBlock: function($q, $timeout) {
            var deferred = $q.defer();

            $timeout(function() {
              deferred.resolve('Dolor ipsum');
            }, 3000);

            return deferred.promise;
          }

        }
      })

      // Set initialization location; optionally
      .init('landing');

  });

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

<body>
	<div class="wrapper">
		<sview id="sideBar"></sview>
		<sview id="greetingPopOver"></sview>
	</div>
	<div class="popover">
		<sview id="calloutBlock"></sview>
	</div>
</body>

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

<div class="nav_sidebar">
	<ul class="nav_main">
		<li><a href="#">Products</a></li>
		<li><a href="#">Catalogs</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
	<sview id="messagingCallout"></sview>
</div>

Controllers

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

angular.module('myApp')
  .controller('ProductController', function($scope, $state) {
    $stateProvider

      // Define states
      .state('products', {
        url: '/products',
        templates: {
          productItem: '/item.html'
        },
        controllers: {
        	productItem: 'ProductItemController'
        }
      });

  });

Controllers must use the same view id.

Resolve

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

angular.module('myApp')
  .config(function() {
      $stateProvider

        // Define states
        .state('products.items', {
          url: '/products/:item',
          resolve: {
          	currentProduct: function(ProductService) {
	           return ProductService.get();
          	}
          },
          templates: {
            productItem: '/item.html'
          },
          controllers: {
          	productItem: 'ProductItemController'
          }
        });

    });
  })

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

angular.module('myApp')
  .controller(function(currentProduct, $scope) {
    $scope.product = currentProduct;
  });

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.

<sview id="layout"></sview>

Where the state definition is either a HTML partial:

$stateProvider.state('my.state', {
	templates: {
     layout: '/single-col.html',
	}
});

Or function injection template

$stateProvider.state('my.state', {
	templates: {
     layout: function($templateCache, $greetingService) {
            return $templateCache.get('greeting_' + $greetingService.message() + '.html');
	}
});

Or promised template

$stateProvider.state('my.state', {
  templates: {
   layout: function($q, $timeout) {
     var deferred = $q.defer();

     $timeout(function() {
       deferred.resolve('Dolor ipsum');
     }, 3000);
     
     return deferred.promise;
   }
});