CODEWITHSUNDEEP
angularjswebpack
Danielo515
Danielo515

Reputation: 7201

Webpack with angular 1.x and ES5

After reading hundreds of lines about browserify vs webpack and several how to of both I decided to go for webpack. The main reason it's because I liked the idea of bundling everything into a js file.

I have an angular project already working and I want to refactor it for webpack. The problem? My project is using angular 1.4.7, ng-animate and plain javascript (ES5) and all the tutorials and manuals are for ES6. I don't want to refactor my project so much. What's the way to go? I would like an example of each angular module : factory, directive, controller and so on. Many thanks

Upvotes: 22

Views: 6826

Answers (3)

Jorge Arévalo
Jorge Arévalo

Reputation: 3008

I'm dealing with the same problem now. And I found something that works (work in progress, but at least I can see progress). My steps:

  1. Install yeoman
  2. Run this angular-webpack generator. Select 'ES5' when asked (the other option is 'ES2015', which I guess is the same that 'ES6')
  3. Start modifying the automatically generated boilerplate with your Angular code

Yes, you still need to learn about gulp and sass, but at least you can run a simple AngularJS app using the old ES5 syntax, and start modifying it.

I'm probably blogging about this. So, I'll update this answer then.

Upvotes: 2

Callum Linington
Callum Linington

Reputation: 14417

I tend to do this:

app.js:

require('/any/angular/deps');
var subModule = require('/some/sub/module');

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

// pass the app module in sub modules to allow them to define their own config
subModule.configure(app);

/subModule/module.js:

var someSubDirective = require('./subDir/directive');

export function configure(app) {

   someSubDirective.configure(app);

}

/subModule/subDir/directive.js:

export function configure(app) {
   app.directive('myDir', myDir);
}

function myDir() {

}

My idea is to let all sub modules handle their own configuration, so declaring config or constant, factories or providers. Letting this then bubble up to the app.js. This means its really easy to delete a folder from your structure, because it is one line removal from it's parent module.

This also makes relevant file paths a lot shorter and easier to handle.

Upvotes: 1

Ryan
Ryan

Reputation: 609

I typically have a feature.module.js file which has my module definition and requires all of the directives / services contained within the module. Also has the external dependancies.

/* module.js */
angular.module('my.module',['dependancy1', 'dependancy2']);

//External libraries
require('./dependancy1.module.js');
require('./dependancy2.module.js');

//Internal components
require('./thing.directive');
require('./thing.service';
 

       
/* service.js */
angular.module('my.module')
    .directive('yourDir', function myDir(){...});

Upvotes: 3

Related Questions