asl

angular-state-loadable

A lightweight and flexible AngularJS lazy loading scheme.

Showing:

Popularity

Downloads/wk

3

GitHub Stars

2

Maintenance

Last Commit

6yrs ago

Contributors

1

Package

Dependencies

1

Size (min+gzip)

0.9KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Readme

StateLoadable

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

A lightweight and flexible AngularJS lazy loading scheme.

StateLoadable 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-loadable --save

Quick Start

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

Events are broadcast on the $rootScope.

$loadableCreated

This event is emitted when a loadable object starts loading.

$loadableProgress

This event is emitted when a loadable object progresses loading. This event must occur once before 'end' is emitted.

$loadableComplete

This event is emitted when a loadable object completes loading.

$loadableError

This event is emitted when an error occurred during loading of a loadable.

License

Copyright (c) 2015 Henry Tseng

Released under the MIT license. See LICENSE for details.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100