lazy-angular

Converts AngularJs modules into lazy-loading asynchronous components. Great for large applications.

Added by: Sam Deering

GitHub

Repository

ishmaelthedestroyer/lazy-angular

Stats

Stars: 0

Watchers: 0

Forks: 0

Author

Ishmael
Ishmael

Module Description

#Lazy Angular

This plugin converts AngularJs modules into lazy-loading components. A dependency resolver script is also provided that takes an array of paths and asynchronously loads the scripts.

This is implementation is based on this blog's method. The ways in which this plugin are improved are subtle but important.

In the setupLazy* script, instead of defining a variable calling the module using the Angular object, a reference to the module should be passed via another script. If the former method is performed, the module is overwritten and its config function won't work. This issue is described here on this Stackoverflow post.

The dependency resolver script is also rewritten as a function to work with ui-router. Instead of passing it directly to a route's resolve object, it should be set as a key. The dependencies are still asynchronously called, but now other dependencies can be instantiated. This could be used with an authentication script, like my uiAuth session + authentication plugin.

And best of all, it's in Coffeescript!

##Usage (Coffeescript)

app.js

define [
  'angular'
], (angular) ->
  'use strict'
  app = angular.module 'App', []
  angular.bootstrap document, 'App'

return app

setupLazy.js

define [
    'app'
], (app) ->
    # ... setupLazy configures app here

app-routes.js

define [
    'app'
    'dependencyResolver'
], (app) ->
  app.config ($stateProvider, $urlRouterProvider, $locationProvider) ->
    $stateProvider.state 'some-route',
        url: '/some-route'
        templateUrl: '/path/to/some-route.html'
        resolve:
            dependencies: dependencyResolver [
                '/path/to/dependency-1.js'
                '/path/to/dependency-2.js'
            ]

Now, when you want to lazy load a controller, service, or directive, get a reference to the module and declare it normally.

some-controller.js

define [
    'app'
], (app) ->
    app.controller 'Some-ControllerCTRL', ($scope) ->
        # your logic here ...

##Notes Developed by Ishmael tD.

Feedback, suggestions? Tweet me @IshmaelsAlive.
Need some personal help? Email me @ [email protected]

Module stats last updated: 2015-04-19 01:56:34

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!