Ошибка регистрации компонента Angular 1.5

У меня есть следующий компонент Angular 1.5:

  (function () {
    'use strict';

    angular
    .module('EmployeeInformation')
    .controller('EmployeeDetailCtrl', EmployeeDetailCtrl)
    .component('employeeDetail', EmployeeDetail);

    var EmployeeDetail = {
      templateUrl: '../views/components/employeeDetail.html',
      controller: 'EmployeeDetailCtrl as empdetail',
      bindings: {
        employee: '<'
      }
    };

    function EmployeeDetailCtrl() { }
  })();

Судя по примерам на сайте Angular, мне это кажется правильным. Однако, когда я включаю файл на свою страницу, я получаю сообщение об ошибке, говорящее о том, что он не может зарегистрировать компонент:

[$injector:modulerr] Failed to instantiate module EmployeeInformation due to:
TypeError: Cannot read property 'controller' of undefined
    at $CompileProvider.registerComponent [as component]

Если я удалю ссылку на этот компонент, страница загрузится нормально. Кто-нибудь знает, что я делаю неправильно?

РЕДАКТИРОВАТЬ: у меня есть служба в том же модуле, составленная аналогично (которая завернута в функцию и без пустого массива - см. ниже), которая работает правильно:

(function () {
  'use strict';

  angular
  .module('EmployeeInformation')
  .service('EmployeeService', EmployeeService);

  EmployeeService.$inject = ['$http'];

  function EmployeeService($http) {
    var apiPrefix = 'http://dvlemployees/api/employees';
    this.find = find;
    this.get = get;
    this.getOne = getOne;

    function find(queryObj) { }

    function get() { }

    function getOne(empNumber) { }
})();

EDIT2: благодаря @Frondor я понял, что истинная проблема заключалась в том, что я вызывал angular.component для объекта до того, как определил его. Перемещение раздела var EmployeeDetail наверх решило проблему.


javascript angularjs angularjs-components
person medievalgeek    schedule 06.04.2016    source источник

Ответы (2)


arrow_upward
3
arrow_downward

JavaScript

(function(angular) {
  'use strict';
angular.module('EmployeeInformation', [])
.controller('EmployeeDetailCtrl', EmployeeDetailCtrl)
.component('employeeDetail', {
  templateUrl: 'view.html',
  controller: EmployeeDetailCtrl,
  bindings: {
    hello: '='
  }
});

function EmployeeDetailCtrl(){
  this.world = 'World!';
}
})(window.angular);

HTML

<body ng-app="EmployeeInformation">
  <!-- components match only elements -->
<div ng-controller="EmployeeDetailCtrl as ctrl">
  <h1>
  <employee-detail hello="'Hello'"></employee-detail>
  </h1>
</div>
</body>

вид.html

<span>{{$ctrl.hello}} {{$ctrl.world}}</span>

Вам нужно указать пустой массив после имени модуля, даже если вы не используете никаких зависимостей от своего приложения.

Живой пример:

http://plnkr.co/edit/8TbRcg5LBsdlqxLkUccJ?p=preview

person Frondor    schedule 06.04.2016
comment
Спасибо, но я все еще получаю ту же ошибку с добавлением пустого массива. - person medievalgeek; 06.04.2016
comment
@medievalgeek Я сделал пример plnkr с рабочим кодом и обновил свой вопрос. Пожалуйста, взгляните сейчас - person Frondor; 06.04.2016
comment
Ваше обновление указало мне правильное направление. Мне нужно было определить объект компонента, прежде чем я вызвал для него angular.component. Я обновляю свой исходный пост, но приму ваш ответ, так как он помог мне понять истинную проблему. Спасибо еще раз! - person medievalgeek; 06.04.2016
comment
Способность соображать самостоятельно, даже после того, как кто-то намекнул вам, это намного лучше, чем поручить всю работу кому-то другому ;) - person Frondor; 06.04.2016

arrow_upward
1
arrow_downward

Попытайся:

(function (angular) {
  'use strict';

  angular
    .module('EmployeeInformation', [])
    .controller('EmployeeDetailCtrl', EmployeeDetailCtrl)
    .component('employeeDetail', EmployeeDetail)
  ;

  var EmployeeDetail = {
    templateUrl: '../views/components/employeeDetail.html',
    controller: 'EmployeeDetailCtrl as empdetail',
    bindings: {
      employee: '<'
    }
  };

  function EmployeeDetailCtrl() { }
})(angular);
person Pedro Papadópolis    schedule 06.04.2016