1. 6
    AngularJS with Webpack - Requiring Directives
    3m 48s

AngularJS with Webpack - Requiring Directives

Kent C. Dodds
InstructorKent C. Dodds

Share this video with your friends

Send Tweet
Published 7 years ago
Updated 3 years ago

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.

Eddie Appell
Eddie Appell
~ 6 years ago

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!

Kent C. Dodds
Kent C. Doddsinstructor
~ 6 years ago

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!

Robert
Robert
~ 6 years ago

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!