Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

angular-async — a module for asynchronous loading of angular components

This is built on top of the awesome module loader: helios kernel

Just load angular, helios-kernel, and angular-async

<script src="lib/angular-async/kernel.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="js/angular-async.js"></script>

Initialize your app by pointing to your main app module file:


    //angularAsync.require is just a reference to Helios' kernel.require
    window.onload = function(){

Your app file should be set up something like this:

    This should look familiar. Just include any files you need to run the code in the init function.

    The init function is fired when all dependencies are loaded
var init = function(){

    var mod = angular.module('myApp', [

    //we must manually bootstrap the app here after all the dependencies have loaded
    angular.bootstrap(window.document, ['myApp']);

Per the Helios API any asynchronous modules need to have their execution code wrapped in an init function

var init = function(){

    //your module code goes here


Your modules can have their own dependencies...


var init = function(){

    //your module code goes here


If one of your asynchronous modules will create an angular component (such as a controller, filter, service, factory, etc.), and if that module will be loaded after the application bootstraps, then you must use the angularAsync object to define and register it. Otherwise Angular will not be able to find it.

var init = function(){

    //async controller
    angularAsync.controller('MyAsyncController', ['$scope', function($scope){


    //async filter
    angularAsync.filter('myAsyncFilter', [function(){


    //async service
    angularAsync.service('MyAsyncService', [function(){


    //async directive
    angularAsync.directive('MyAsyncController', [function(){


    //etc... You get the point :)

    /* Methods Available

        - controller
        - directive
        - filter
        - factory
        - service
        - value
        - constant
        - provider



angularAsync has a service called async that you can inject into your various components for dynamic loading of other components at runtime

var myApp = angular.module('myApp', [])

myApp.controller('MyCtrl', ['$scope', 'async', function( $scope, async ){

    //use the fetch method to load a file dynamically
    var mod = async.fetch('./my-other-component.js');

    //This returns a promise with resolve and reject
    //the callbacks are fired within scope

        //successfully loaded, do something
    }, function(){

        //whoops something went wrong


In this case my-other-component.js might look like this:

var init = function(){

    //registering directive after bootstrap
    angularAsync.directive('myDirective', [function(){

        //directive code here

Finally, since the async.fetch method returns a promise, it works well with route resolution in angular Let's say we have a basic app defined here:

var myApp = angular.module('myApp', []);

myApp.config(['$routeProvider', function($routeProvider) {

    $routeProvider.when('/view1', {
        templateUrl: 'partials/partial1.html',
        controller: 'MyCtrl1'

    //when we hit the second route, we want to load MyCtrl2 asynchronously
    //we can pass the async service to
    $routeProvider.when('/view2', {
        templateUrl: 'partials/partial2.html',
        resolve: {
            deps: ['async', function(async){

                //async.fetch returns a promise, so we can just return it from
                //this dependency and anguar will wait to instantiate the controller
                return async.fetch('./js/controller2.js');


        //instantiate MyCtrl2 when full resolved
        controller: 'MyCtrl2'

    $routeProvider.otherwise({redirectTo: '/view1'});


No description, website, or topics provided.




No releases published
You can’t perform that action at this time.