I am managing a directory structure that looks like this
--- js/app.js
------- components
----------- header
-------------- headerComponent.html
-------------- headerComponent.js
-------------- headerController.js
Within index.html, I have the following setup
<!DOCTYPE html>
<html en="us" ng-app="app">
<head>
<title>Memory Game - 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>
The content of js/app.js is:
(function() {
var app = angular.module('app', []);
app.controller('HomeCtrl', function() {});
})();
In component/header/headerComponent.js file:
(function() {
'use strict';
var app = angular.module('app');
app.component('header', {
templateUrl: '/js/components/header/headerComponent.html',
controller: 'headerController'
});
})();
The code snippet from component/header/headerController.js looks like this:
var app = angular.module('app', []);
app.controller('headerController', ['$scope', function($scope) {
$scope.titulo = "teste";
}])
As for the content in component/header/headercomponent.html:
<h1>{{titulo}}</h1>
Despite the setup, there seems to be an issue with rendering the variable "titulo." I am trying to avoid using the controller: function () {} pattern within the component file. Additionally, I am encountering an error message: Uncaught Error: [$injector:modulerr]. How can I resolve this and call the external controller successfully?