Javascript 在AngularJS中添加新控制器时，组件将消失

刚接触AngularJS，目前正在做一个介绍性项目，让我熟悉这项技术

我的应用程序基于一个项目，该项目使用ngRoute根据所遵循的链接显示组件。我有一个组件pageHeader，用于定义页面顶部的链接：

angular.
  module('DataStructureVisualizer').
  component('pageHeader', {
    template:
      '<div id="header">' + 
      '<center>' + 
        '<a href="#!/BinaryTree">Binary Tree</a>' + 
        '<a href="#!/Stack">Stack</a>' + 
        '<a href="#!/Queue">Queue</a>' + 
        '<a href="#!/Heap">Heap</a>' + 
        '<a href="#!/LinkedList">Linked List</a>' + 
      '</center>' + 
      '</div>',
    controller: function PageHeaderController() {

    }
  });

标题消失。这是什么原因？我不确定如何调试应用程序，因为Chrome JS控制台没有任何输出，NodeJS服务器也没有抛出任何错误，不知道为什么会这样，因为我没有做任何服务器端的事情，但我想我应该提一下

这就是我的app.js的样子：

'use strict';

// Declare app level module which depends on views, and components
angular.module('DataStructureVisualizer', [
  'ngRoute',
  'DataStructureVisualizer.bst',
  'DataStructureVisualizer.heap'
]).
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
  $locationProvider.hashPrefix('!');

  $routeProvider.otherwise({redirectTo: '/BinaryTree'});
}]);

使用模块'DATAQualStudioVisualStase]，[]实际上，你告诉角把它看作是一个新的模块，这就是为什么它不工作的原因，因为你已经在App.js文件中定义了一个同名的模块。你应该把它改成

angular.module('DataStructureVisualizer').controller('DragDropController', 
function DragDropController($scope) {
$scope.captureCoordinate = function($event) {
  $scope.x = $event.x;
  $scope.y = $event.y;
}
});

---

希望这有帮助

就这样。非常感谢。我很好奇，模块定义中的方括号是什么？这些依赖项是否应该注入到应用程序中？是的。当在数组中声明模块时，应该传递模块的依赖项，作为模块定义的第二个参数。这应该是一次。如果您想在其他任何地方使用此模块，要定义控制器/服务，只需使用模块的名称和no[]

angular.module('DataStructureVisualizer').controller('DragDropController', 
function DragDropController($scope) {
$scope.captureCoordinate = function($event) {
  $scope.x = $event.x;
  $scope.y = $event.y;
}
});