Reuse AngularJS Component in another Module (Dependency Injection)

Question

how can I reuse a simple angular component via Dependency injection?

Component:

angular.module("navbar", []).component("nav", function() {
    console.log("component loaded");
});

Other Module Controller I want to use it in:

angular.module('CtrlHome', ['navbar']).controller('HomeController', 
function($rootScope, $scope) {
});

And finally use it in the template

<nav></nav>

It throws me a "injector modulerr" error. What am I doing wrong here?

Please, provide stackoverflow.com/help/mcve . modulerr means that loaded module wasn't defined. — Estus Flask
– Estus Flask, Commented Oct 12, 2017 at 17:10

Nikolaj Dam Larsen · Accepted Answer · 2017-10-12 17:05:02Z

1

The component isn't defined correctly. The component registration method takes a string and an object as input. The object describes the component. So this would be the correct way to register a component with the module:

angular.module("navbar", []).component("nav", {
    controller: function(){
        console.log("component loaded");
    }
});

There are several other properties you can include to describe a component, i.e. bindings: {} and template: '<div>Hello, World!</div>'.

edited Oct 12, 2017 at 17:05

answered Oct 12, 2017 at 16:57

Nikolaj Dam Larsen

5,7146 gold badges37 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

artgb Over a year ago

Can you provide jsfiddle or snippet?

Jan Schmutz Over a year ago

thanks for the quick response, I think you accidently put a squared bracket. i'm still getting the same error though after changing it .

Nikolaj Dam Larsen Over a year ago

Yes, good catch. That's a brace :-) If you still get the same error, perhaps your navbar module isn't registered with angular before the CtrlHome is registered. Try checking they're loaded in the correct order.

Estus Flask Over a year ago

As long as modules are used like angular.module('CtrlHome', ['navbar']), loading order doesn't matter. The error means that the module wasn't loaded at all at bootstrap time.

Jan Schmutz Over a year ago

Ups well registering it in the index.html helps alot ... ive worked with webpack for too long ... thanks anyways

|

Collectives™ on Stack Overflow

Reuse AngularJS Component in another Module (Dependency Injection)

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related