Controller does not load in component - AngularJS

Question

I have this directory structure

--- js/app.js
------- components
----------- header
-------------- headerComponent.html
-------------- headerComponent.js
-------------- headerController.js

in index.html, i have this

    <!DOCTYPE html>
<html en="us" ng-app="app">

<head>
    <title>Jogo da Memória - DB1</title>
    <!-- bootsrap css-->
    <link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap.min.css">
    <script src="lib/angular/angular.min.js"></script>
    <script src="js/app.js"></script>
    <!-- components -->
    <script src="js/components/header/headerComponent.js"></script>
</head>

<body>
    <div class="container" ng-controller="HomeCtrl as $ctrl">
        <h1>{{$ctrl.message}} </h1>
        <header></header>
    </div>
</body>

</html>

js/app.js

    (function() {
       var app = angular.module('app', []);
       app.controller('HomeCtrl', function() {});
    })();

component/header/headerComponent.js

    (function() {
    'use strict';
    var app = angular.module('app');

    app.component('header', {
        templateUrl: '/js/components/header/headerComponent.html',
        controller: 'headerController'
    });
})();

component/header/headerController.js

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

    app.controller('headerController', ['$scope', function($scope) {
      $scope.titulo = "teste";
   }])

component/header/headercomponent.html

<h1>{{titulo}}</h1>

The problem is that the variable "titulo" is not rendered. I would not like to use in the component file the controller: function () {} structure. And i have this error: Uncaught Error: [$injector:modulerr] I would call the external controller. How can I do this?

Do you have a more detailed error to share?

UncleDave
– UncleDave

2019-05-23 15:34:53 +00:00
Commented May 23, 2019 at 15:34 — UncleDave
– UncleDave, Commented May 23, 2019 at 15:34

UncleDave · Accepted Answer · 2019-05-23 15:28:01Z

2

You're defining your module twice, the second time in component/header/headerController.js.

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

This should change to:

var app = angular.module('app');

It also doesn't look like component/header/headerController.js is included in your index.html via script tag.

answered May 23, 2019 at 15:28

UncleDave

7,2492 gold badges29 silver badges45 bronze badges

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

Collectives™ on Stack Overflow

Controller does not load in component - AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related