У меня есть эта структура каталогов
--- js/app.js
------- components
----------- header
-------------- headerComponent.html
-------------- headerComponent.js
-------------- headerController.js
в index.html, у меня есть
<!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>
Проблема заключается в том, чтопеременная "titulo" не отображается.Я не хотел бы использовать в файле компонента структуру controller: function () {}.И у меня есть эта ошибка: Uncaught Error: [$ инжектор: modulerr] Я бы назвал внешний контроллер.Как я могу это сделать?