What gulp-angular-filesort really does for gulp-inject?

Question

Can anybody show an example of what gulp-angular-filesort really does and how to use it properly?

The thing is that I’ve recently realized that my gulp-angular-filesort doesn’t sort angularjs files at all, however my AngularJS App with lots of files works fine. So, I’ve come up with two questions:

1. Is AngualarJs still sensitive for source files order? As to me, it looks like it isn’t.
2. What gulp-angular-filesort actually does? I can’t see any results of its work.

I’ve thought that gulp-angular-filesort looks at angular.module statements and sort files according to specified dependency in the brackets. It looks like I was wrong.

Please look at my sample below.

// File: Gulpfile.js

'use strict';

var
    gulp = require('gulp'),
    connect = require('gulp-connect'),
    angularFilesort = require('gulp-angular-filesort'),
    inject = require('gulp-inject');


gulp.task('default', function () {

    gulp.src('app/index.html')
        .pipe(inject(
            gulp.src(['app/js/**/*.js']).pipe(angularFilesort()),
            {
                addRootSlash: false,
                ignorePath: 'app'
            }
        ))
        .pipe(gulp.dest('app'))
    ;

    connect.server({
        root: 'app',
        port: 8081,
        livereload: true
    });

});

//a_services.js

'use strict';

angular.module('myServices', [])
    .factory('MyService', function () {
        return {
            myVar:1
        };
    })
;

//b_controllers.js

'use strict';

angular.module('myControllers', ['myServices'])
    .controller('MyController', function ($scope, MyService) {
        $scope.myVar = MyService.myVar;
    })
;

// c_app.js

'use strict';

angular.module('myApp', ['myControllers']);

The result of gulp-inject is the following:

<!-- inject:js -->
<script src="js/c_app.js"></script>
<script src="js/b_controllers.js"></script>
<script src="js/a_services.js"></script>
<!-- endinject -->

I was expected exactly an opposite order to make the App work (however it still does work). So, using of gulp-angular-filesort simply sorted files alphabetically, despite of all the dependencies specified in the angular.module(...,[...])

What is going on here?

Answer 1

Actually in your case you don't need gulp-angular-filesort because you declare a module for each file. The dependency injection mechanism for angular will figure out the correct way to call your modules according to your dependencies.

You'll need gulp-angular-filesort only when you have one module spread across multiple files. So for your example if all files use 'myApp' as the module name. Then the plugin will sort the files correctly: always the one with dependencies before the others.

Here your example modified so that gulp-angular-filesort is needed:

//a_services.js

'use strict';

angular.module('myApp')
    .factory('MyService', function () {
        return {
            myVar:1
        };
    })
;

//b_controllers.js

'use strict';

angular.module('myApp')
    .controller('MyController', function ($scope, MyService) {
        $scope.myVar = MyService.myVar;
    })
;

// c_app.js

'use strict';

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

In this case this will still be:

1. c_app.js
2. b_controller.js
3. a_service.js

Answer 2

gulp-angular-filesort moves files containing module’s declaration above the files wherein the modules are mentioned.

If the module is mentioned before it declared, you’ll got errors like these:

• "angular.js:68 Uncaught Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument."

• "angular.js:13294 Error: [ng:areq] Argument 'MyController' is not a function, got undefined"