How to write commonjs pattern module of AngularJS

Question

All:

I am pretty new to browserify and commonjs pattern. When I try how broserify work with Angular, I use a very simple Example:

//main.js

require("angular");
var app = angular.module("app", []);

And:

// controller.js
require("angular");
angular.module("app");
        .controller("main", function($scope){
            $scope.message = "Hello";
        });

And for Gulp I use:

// gulpfile.js

var gulp = require("gulp");
var browserify = require('browserify');
var source = require('vinyl-source-stream');


gulp.task('browserify', function() {
    // Grabs the app.js file
    return browserify('./app/main.js')
        // bundles it and creates a file called main.js
        .bundle()
        .pipe(source('bundle.js'))
        // saves it the dest/ directory
        .pipe(gulp.dest('./dest/'));
})

But this does not work(I know this for sure, but just no idea how to make it do), I tried add require("./controller"); but with no luck.

I wonder how can I add that controller.js as commonjs required module and browserify them, or anyway(if we do not need to add it) just make it work in commonjs pattern.

One post I find talking about this: http://ardeibert.com/modularizing-an-angularjs-app-with-browserify/ But its way is only export all controller functions, I still need to register them in main.js, if so, I am wondering how do I use other service/factory in controller.js like dependency injection?

I thought the reason to use browserify is it can help to figure out the dependency structure, but I wonder how can I make it known the relation between app module and the main controller?

Thanks

Answer 1

Your controller file should export the value that you want to be available whenever you require it. In this case you could export the controller function.

// controller.js
module.exports = function($scope){
  $scope.message = "Hello";
}

Then require it in your main application file.

//main.js

var angular = require("angular");
var MainController = require("./controller");

var app = angular.module("app", []);

app.controller("main", MainController);

Personally, as my projects get bigger, I like to make each file a module so that they can include multiple providers and directives. Then the export/require pattern becomes slightly different.

// my-module.js
var angular = require('angular');

angular.module('MyModule', [])
  .service('MyService', function() { ... })
  .directive('MyDirective', function() { ... });

Then you need to require the module and inject into your app's main module.

// main.js
var angular = require('angular');
require('./my-module');

angular.module('MyApp', ['MyModule'])
  .controller('MyController', function(MyService) {
    // injected service from MyModule
  });

Answer 2

Angular 1.x itself is not quite friendly to commonjs modules - it has own module systems and it is kind of mixed with their DI container.

The best approach I have found to use it with commonjs or other module system for angular 1.x is following:

1. Every module declaration should export module name
2. All calls to angular module should be placed in module declaration file (.controller, .factory, etc… ).
3. All service implementation should be in separate files(every controller, directive or service should be placed in separate file), and should export just an implementation

So about controllers - in controller file you will export controller constructor, and will import it to your module file, like so:

// MainController.js
module.exports = function(service1){...}


// service1.js
module.exports = function(...){}

And module file:

// module.js
var angular = require('angular');
angular.module('app', [require('some-angular-module'), ....])
       .service('service1', require('./service1.js'))
       .controller('MainController', require('./MainController.js'));
module.exports = 'app';

You can see example of app structured this way here: http://github.com/zxbodya/angular-webpack-seed

It is build with webpack, but generally structure is the same