This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Angular with Webpack - Requiring Directives

3:48 Angular 1.x lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Tristan

What's the main benefits in your mind to using this builder function return as opposed to having the component be returned in a new module (a common practice i have seen)

In reply to egghead.io
Avatar
Kent C.

I've seen that as well. That actually is very interesting also. The one difference I see is that with the approach you're suggesting, you'd have to make sure that the module you create depends on the modules for other directives/services that it uses. That's a little extra work, but I believe that's an even more modular approach so I like where you're going with that. I'll have to take that under consideration :-)

In reply to Tristan
Avatar
Tristan

The Common practice I've seen goes something like this

var app = angular.module('main',[require('subModule').name])

Side note: writing code on an iPad is difficult :)

In reply to Kent C.
Avatar
Tristan

dang it didn't go through

var app = angular.module('app',[require('subModule').name]);

In reply to Tristan
Avatar
Kent C.

Yeah, I think I'm liking that approach a lot actually. It results in a million modules, but who cares. Totally worth the scalability of modular code :-) I'm going to look into this further and then I may have an updated lesson :-) Thanks.

In reply to Tristan
Avatar
Tristan

i think the main benefit with the module stucture is it works well with ocLazyLoad (though with webpack this doesn't come into play). The other benefit is you can give the group of directives and controllers a descriptive name, and it's a good way to add routes in ui-router.

In reply to Kent C.
Avatar
Sher

Kent-- have you thought any further on this? I use the Egghead.io course transcript to create annotated notes for our internal use but I noticed this discussion with Tristan. It left me wondering whether I should include this course in the Webpack series?

In reply to Kent C.
Avatar
Kent C.

My app at work still follows this style, it's working great. That doesn't mean that there aren't better alternatives out there (like the one that Tristan recommended). It is working though. I would still recommend this above what most other people are doing.

In reply to Sher
Avatar
Sher

Thanks for the prompt reply. This also works better for modularizing the app and using Webpack.

In reply to Kent C.
Avatar
Eddie

I've gone through this video several times, and I keep getting an exception when I run it:

"Cannot read property 'directive' of undefined"

The line it's breaking on is:

ngModule.directive('kcdHello', function(){

When it gets to that line, ngModule is undefined. I've compared every line of code in my source to yours, and I just can't see what I'm missing here. Here is my entire directive block from the kcd-hello.js file:

module.exports = function(ngModule){
  ngModule.directive('kcdHello', function(){
    return {
      restrict: 'E',
      scope: {},
      templateUrl: 'directives/kcd-hello.html',
      controllerAs: 'vm',
      controller: function() {
        var vm = this;

        vm.greeting = 'Hello Webpack';
      }
    };
  });
};

./app/directives/index.js:

module.exports = function(ngModule) {
  require('./kcd-hello')(ngModule);
};

./app/index.js:

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

require('./directives')(ngModule);

Any idea what I'm missing?

It would be SO helpful to be able to download your source for these lessons, just to be able to run it and compare to find out what's missing. Until then, could you please take a look and offer some advice for getting past this? Thanks!

Avatar
Kent C.

I'm not sure what the problem is, but all of the code is available here. You'll find a link to it below the video. Good luck!

In reply to Eddie
Avatar
Robert

What extension provides the angular icon in the toolbar?

Also, I was able to run the code in finished/step2, but I noticed the ng-inspector extension can't see AngularJS running on the page. Not the end of the world, but hopefully it keeps working in our app!

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.

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.

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.

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.

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.

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.

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?