Javascript 控制器未在组件中加载-AngularJS_Javascript_Angularjs

Javascript 控制器未在组件中加载-AngularJS

javascript angularjs

Javascript 控制器未在组件中加载-AngularJS,javascript,angularjs,Javascript,Angularjs,我有这个目录结构 --- js/app.js ------- components ----------- header -------------- headerComponent.html -------------- headerComponent.js -------------- headerController.js 在index.html中，我有这个 <!DOCTYPE html> <html en="us" ng-app="app"> <

我有这个目录结构

--- 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

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

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

组件/标题/标题控制器.js

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

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

component/header/headercomponent.html

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

{{titulo}

问题是没有呈现变量“titulo”。

我不想在组件文件中使用controller:function（）{}结构。我有一个错误：未捕获错误：[$injector:modulerr]我会调用外部控制器。我该怎么做？

您定义了两次模块，第二次是在

component/header/headerController.js

中

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

这应改为：

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

它看起来也不像

component/header/headerController.js

通过脚本标签包含在

index.html

中。

您有更详细的错误要分享吗？

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