webpack v1 from Kent
AngularJS with Webpack - Requiring Directives
With Webpack and CommonJS, the way you register directives, services, etc. with your modules can be a lot more modular. See how to register a directive with an Angular module using Webpack.
[00:01] Now we're going to add a directive to our application here. So what we're going to do is we'll create a new file in directives/index.js. In here, this is going to represent the folder, and so this folder can be required because we have an index.js. In here what we're going to do is say module.exports equals function that takes an NG module. We'll use that NG module to register the directives that are in this folder.
[00:32] The first thing that we'll do inside of this directives folder is create a kcd-hello.js file, and in here, this will also export a function, so we'll say module.exports = function(ngModule), and we'll say ngModule.directive kcdHello that's a function that returns our DDO. Return and this will be a component directive, so we'll restrict as an element. We'll make it use isolate scope, we'll have a template URL that points to directives/kcdhello.html, and then we'll also use controller as VM, controller will be a function here.
[01:20] We'll see var VM = this, and then vm.greeting = 'hello Webpack'. So now we need to create our template, so kcd-hello.html. We'll make a div that has a class kcd-hello, and in here we'll just say vm.greeting.
[01:40] Now our directive's all wired up. We need to tell our module about this directive, so inside of our app index where we create our module in the first place, we're going to require the directives folder. If you remember in our index.js this exports a function that accepts an NG module, so let's say NG module, and in here, we're going to require the kcd-hello directive and pass it the NG module. Now this is a very modular approach, because we're not using the angular.module getter all over the place.
[02:24] We're passing the module where it needs to go so that things can be registered on it. That makes things a lot more modular in the sense that you can move things around, have them be registered on totally different modules, and you don't need to worry about changing the module name that something is being registered on it, just has an API that accepts the module.
[02:48] Let's go ahead and look at our template, our index, and let's use our kcd-hello to make sure everything is working. If I save and refresh we should get Hello Web Pack, we did, so everything is wired up together and just in review, you have in our Webpack config our entry is index.js, our context is this app folder, and o when we go to that index.js we require angular, and we create the angular module, then we pass that angular module to our directives which will pass that module on to all the directives that are in this folder.
[03:30] Each one of those directives, in this case just one, will register itself with that module. Then in our template, we have access to that directive. That is another step on the path to using angular with Webpack.