call controllers and factories from app.js

Question

In my index page I call may factories and controller as following :

<script src="scripts/providers/offresFactory.js"></script>
<script src="scripts/controllers/offreController.js"></script>
<script src="scripts/providers/usersFactory.js"></script>
<script src="scripts/controllers/usersController.js"></script>
<script src="scripts/providers/newOffreFactory.js"></script>
<script src="scripts/controllers/newOffreController.js"></script>
<script src="scripts/providers/inscriptionFactory.js"></script>
<script src="scripts/controllers/inscriptionController.js"></script>
<script src="scripts/controllers/resultController.js"></script>
<script src="scripts/controllers/homeController.js"></script>
<script src="scripts/providers/searchFactory.js"></script>

Isnt there anyway to call these files in the app.js instead of calling them in the index.html page ?

http://stackoverflow.com/questions/5892845/how-to-load-one-javascript-file-from-another — Matt Way, Mar 18 '16 at 13:20

score 0 · Answer 1 · answered Mar 18 '16 at 13:30

if you want a pure front-end solution, you can try:

//app.js

(function(){
    document.write('<script src="scripts/providers/offresFactory.js"></script>');
    document.write('<script src="scripts/providers/offreController.js"></script>');
    document.write('<script src="scripts/providers/usersFactory.js"></script>');
    ...
})();

//since Angular 1.x not support lazy-loading modules/components, 
//you have to write all components to document before bootstrap the app
angular.module('app', []);

Highly recommend using bundle helper like webpack or gulp to generate single js file rather than adding multiple js files to DOM

Ariel · Answer 2 · 2016-03-18T13:48:33.927

You can concatenate your code into one JS file (app.js).

I use gulp to concatenate and minify my javascript.

This is the Gulp task to concatenate I use in gulpfile.js:

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    combiner = require('stream-combiner2'),
    header = require('gulp-header'),
    pkg = require('./package.json'),
    banner = ['/**',
        ' * <%= pkg.name %> - <%= pkg.description %>',
        ' * @version v<%= pkg.version %>',
        ' * @author <%= pkg.author %>',
        ' */',
        ''
    ].join('\n');

var PATHS = {
    JS: ['./src/**/*.js', '!./src/**/*.min.js']
};

gulp.task('concatjs', function() {
    var combined = combiner.obj([
        gulp.src(PATHS.JS), // Path to my JS files.
        concat('app.js'), // generated file's name
        header(banner, {
            pkg: pkg
        }),
        gulp.dest('./www/js/') // Directory destination
    ]);

    // any errors in the above streams will get caught
    // by this listener, instead of being thrown:
    combined.on('error', console.error.bind(console));

    return combined;
});

And in my terminal I run: gulp concatjs

The paths I specified will take all my js files in my ./src folder (except for those ending with .min.js) and concatenate them into one large file: app.js in my destination directory: ./www/js. The header it's just some information (author, version, description, from package.json) it adds at the beginning of the js file with comments.

After running the task, an app.js file will be generated placed where you specified. Then you should only load app.js in your index.html.

Remember to install the required node packages:

npm install gulp-concat stream-combiner2 gulp-header gulp

It is recomended to install gulp globally too:

npm install -g gulp

By the way, with this method, every new js file you create, will be concatenated into the app.js with no further configuration. Just make sure to create it in your source path. This way you can have a controllers directory, service directory, and keep your app structure much cleaner.

Good luck and let me know if it works in case you try it :)

score 0 · Answer 3 · answered Mar 18 '16 at 13:50

I see a couple of ways

SystemJS

First you can write the ng1 classes as ES6 modules so they can be handled by a module loader like SystemJS, Look at this guide to have a step by step process. It takes some configuration and maybe rewriting of the existing codebase.

Even before configuration you can give it a try with a minimal code to see if it fits what you're trying to do just by adding this

<script src="jspm_packages/system.js"></script>
<script src="jspm.conf.js"></script>
<script>
    System.import('app/bootstrap')    
</script>

When of course app/bootstrap needs to use the import statement

import angular from 'angular';
import mainModule from './main';

angular.element(document).ready(function() {
    angular.bootstrap(document, [mainModule.name]);
});

angular-async-loader

Second chance would be to use angular-async-loader, i don;t have experience with this one. You will need, again, to define the ng classes as modules using this syntax

define(function (require) {
    var app = require('../app');

    // dynamic load services here or add into dependencies of state config 
    // require('../services/usersService'); 

    app.controller('usersCtrl', ['$scope', function ($scope) {
        // shortcut to get angular injected service. 
        var userServices = app.get('usersService');

        $scope.userList = usersService.list();
    }]);

});

Also this method doesn't require much configuration, you just install the module with bower

bower install https://github.com/subchen/angular-async-loader.git

And it also supports UIRouter.

call controllers and factories from app.js

3 Answers3