Support for commonJS syntax

[jgoux]

Hi,
now that angular supports commonJS syntax (https://github.com/angular/angular.js/blob/master/CHANGELOG.md#1314-instantaneous-browserification-2015-02-24), is it possible to add it to angular-material too ?

EDIT :
I hope the syntax will also hide the internal dependencies of angular-material (ngAria and ngAnimate).
For example, right now if I want to include ngMaterial in my project, I have to do :

var angular = require('angular');
require('angular-animate');
require('angular-aria');
require('angular-material');

angular.module('foo', ['ngMaterial']);

The expected syntax with commonJS support would be :

var angular = require('angular');
var angularMaterial = require('angular-material');

angular.module('foo',[angularMaterial]);

[nkoterba]

+10

My browserify build system will finally be less 'hackish' once this is added. Very excited.

[ThomasBurleson]

@jgoux - While this feature is pending, you can use JSPM to do this now:

main.js

// Export for main.js
// Load libraries

import angular from 'angular'
import 'angular-animate'
import 'angular-messages'
import 'angular-aria'
import 'angular-material'

// Load application modules

import users from './myApp/users/UsersModule'

let modules = [ 'ng', 'ngAnimate', 'ngAria', 'ngMaterial' ]
        .concat([ `${users.name}` ]);

export default angular.module( 'my-app', modules ).run();

bootstrap.js

import angular from 'angular';
import main from 'app/main';

/**
 * Manually bootstrap the application when AngularJS and
 * the application classes have been loaded.
 */
angular
  .element( document )
  .ready( function() {

    //console.log( `starting angular( ${main.name} )` );

    var body = document.getElementsByTagName("body")[0];
    angular.bootstrap( body, [ main.name ], { strictDi: false });

  });

[pr0da]

@ThomasBurleson, I think your example works with browserify (+es6ify) too. I think @jgoux try to explain that the require/import should return the string 'ngMaterial', like in other angular modules (ngAnimate, ngAria, etc.). I think JSPM don't solve that either.

import angular from 'angular';
import ngMaterial from 'angular-material';
angular.module('app', [ngMaterial]);

[jgoux]

@ThomasBurleson I meant what @pr0da said, I'm using es6 syntax too.

[ThomasBurleson]

@jgoux - Thanks for the clarification guys.

So not only do we need future support for CommonJS packaging, but also an export of the string 'ngMaterial' for easy use in angular.module('app', [ngMaterial]);.

You realize the import or require is inconsistent if we do this?

• The import angular from 'angular'; imports an object so angular.module( ) can be used
• The import ngMaterial from 'angular-material'; imports a string.

This seems fundamentally wrong in terms of consistency. But I understand that import of angular-material is never used except to load the module(s) and register the module name.

[jgoux]

@ThomasBurleson It has been decided that angular's modules return their own name, you can see the discussion about it here : angular/angular.js#10732 (comment)

[ThomasBurleson]

Fixed in Bower Material SHA eb61de21