Using Angular 1.5 Components with Webpack « »
May 9, 2016
It’s all about letting webpack know how to get the dependencies.
npm install angular webpack babel-loader raw-loader -D
The whole point is that the app requires the modules, and the modules require its functionalities so the dependencies don’t break.
Being index.js
the entry point for webpack.
// index.js
var angular = require('angular');
var app = angular.module('app',[]);
require('./bands')(app); // we are rquiring the index.js
Bands one of the modules we’ve created
// bands/index.js
module.exports = function(app) {
require('./band-info')(app);
require('./bandList')(app);
}
// bands/band-info.js
module.exports = function(app) {
app.directive('bandInfo', function(bandList) {
return {
template: require('./band-info.html'),
// see how we are including the html template
restrict: 'E',
controller: function($scope) {
}
}
});
}
// bands/band-info.html
<!— whatever html —>
// bands/bandList.js
module.export = function(app) {
app.factory('bandList', function() {
return // ...
}
}