angular-state-view

v3.0.9

Published

2 years ago

Provides nested view management with template support.

Downloads

0High
0Medium
0Low

henrytseng

StateRouter angular AngularJS state state machine fsm finite state machine asynchronous nested templates view

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;
   }
});

License

Released under the MIT license. See LICENSE for details.