angular-state-view
Advanced tools
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)
npm install angular-state-view --save
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 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.
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 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.
templateA view tag where the contents are dynamically replaced as states defined templates.
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;
}
});
Copyright (c) 2015 Henry Tseng
Released under the MIT license. See LICENSE for details.
FAQs
Provides nested view management with template support.
We found that angular-state-view demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenAI rotated macOS signing certificates after a malicious Axios package reached its CI pipeline in a broader software supply chain attack.
Security News
Open source is under attack because of how much value it creates. It has been the foundation of every major software innovation for the last three decades. This is not the time to walk away from it.
Security News
Socket CEO Feross Aboukhadijeh breaks down how North Korea hijacked Axios and what it means for the future of software supply chain security.