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?

Answer 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, ie bindings: {} and template: '<div>Hello, World!</div>' .