Dynamic Loading of AngularJS controllers/views using SystemJS

Question

Is there a way to structure/write AngularJS in a modular way that dynamically loads/require controllers/views depending on page routes in SystemJS ?

EDIT: This is what I currently have, as a trial to use SystemJS

app.js - This is the main file that gets import in index.html

// vendor
import angular from 'angular';

//Controllers
import controllers from './controllers/_index.js'

// Routes
import routes from './routes/routes.config.js';

var seedApp = angular.module('seedApp', ['seedApp.route', 'seedApp.controllers']);


angular.element(document).ready(function() {
    return angular.bootstrap(document.body, [seedApp.name], {
        strictDi: true
    });
});

export default seedApp;

_index.js - Index for all controllers

import { navCtrl } from './nav.js';
import { aboutCtrl } from './about.js';

var app = angular.module('seedApp.controllers', []);

app.controller('navCtrl', navCtrl);
app.controller('aboutCtrl', aboutCtrl);

routes.config.js

import 'angular-ui-router';

var app = angular.module('seedApp.route', ['ui.router']);


app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/');

    $stateProvider
        .state('home', {
            url: '/',
            templateUrl: 'app/views/home.html'
        })
        .state('about', {
            url: '/about',
            templateUrl: 'app/views/about.html',
            controller: 'aboutCtrl as about'
        });
}]);

export default app;

I have edited the question with some additional information. I assumed that the using Babel's system module would automatically make everything dynamic via system.register. However on second thought, since I am loading all angular modules at once, it might not work. Hence this question arise. — cusX
– cusX, Commented Sep 10, 2015 at 5:12

Eduard Jacko · Accepted Answer · 2015-10-28 12:11:36Z

0

Short answer NO. Long answer YES, but you need to use ocLayzLoad angular plugin because this is not natively supported by Angular 1.x ( this will be possible in Angular 2.x ). Btw, if you are trying to dynamically load file, you need to use System.import

Hope that's helped.

answered Oct 28, 2015 at 12:11

Eduard Jacko

2,1611 gold badge19 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamic Loading of AngularJS controllers/views using SystemJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related