angular-state-loadable
Advanced tools
A lightweight and flexible AngularJS lazy loading scheme.
StateLoadable 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-loadable --save
Include the state-loadable.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-loadable/dist/state-loadable.min.js"></script>
<script src="/js/app.js"></script>
</head>
<body>
...
</body>
</html>
In app.js add angular-state-router and angular-state-loadable as a dependency when your application module is instantiated.
var myApp = angular.module('myApp', ['angular-state-router', 'angular-state-loadable']);
During the configuration of StateRouter utilize the parameter load to associate a script file to lazy load. Loadables will only load once, that is, the first time that they are needed.
myApp
.config(function($stateProvider) {
$stateProvider
.state('search', {
url: '/search',
// An Array of files or a single file name String
load: ['components/search.js']
});
});
Where components.search.js is the following file:
myApp
.controller('SearchController', function() {
// ...
});
StateLoadable is meant to be flexible and therefore does not impose any scheme for registering angular components (directives, controllers, filters, services, providers, and/or ... etc.)
We suggest using the scheme in the example code for late registration of these components.
Remember that $stateProvider is different from $state.
Events are broadcast on the $rootScope.
This event is emitted when a loadable object starts loading.
This event is emitted when a loadable object progresses loading. This event must occur once before 'end' is emitted.
This event is emitted when a loadable object completes loading.
This event is emitted when an error occurred during loading of a loadable.
Copyright (c) 2015 Henry Tseng
Released under the MIT license. See LICENSE for details.
FAQs
A lazy loading scheme
We found that angular-state-loadable 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
Socket CEO Feross Aboukhadijeh joins 10 Minutes or Less, a podcast by Ali Rohde, to discuss the recent surge in open source supply chain attacks.
Research
/Security News
Campaign of 108 extensions harvests identities, steals sessions, and adds backdoors to browsers, all tied to the same C2 infrastructure.
Security News
OpenAI rotated macOS signing certificates after a malicious Axios package reached its CI pipeline in a broader software supply chain attack.