The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Angular with Webpack - Requiring Directives

Angular with Webpack - Requiring Directives

3:48
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.
Watch this lesson now
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!

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