javascript - Error registering Angular 1.5 component -


i have following angular 1.5 component:

  (function () {     'use strict';      angular     .module('employeeinformation')     .controller('employeedetailctrl', employeedetailctrl)     .component('employeedetail', employeedetail);      var employeedetail = {       templateurl: '../views/components/employeedetail.html',       controller: 'employeedetailctrl empdetail',       bindings: {         employee: '<'       }     };      function employeedetailctrl() { }   })();

based on examples on angular's site, seems correct me. however, when include file on page, error saying cannot register component:

[$injector:modulerr] failed instantiate module employeeinformation due to: typeerror: cannot read property 'controller' of undefined     @ $compileprovider.registercomponent [as component]

if remove reference component, page loads fine. have idea i'm doing wrong?

edit: have service in same module composed (that wrapped in function , without empty array - see below) works correctly:

(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, figured out true problem was calling angular.component on object before had defined it. moving var employeedetail section top fixed problem.

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 elements --> <div ng-controller="employeedetailctrl ctrl">   <h1>   <employee-detail hello="'hello'"></employee-detail>   </h1> </div> </body>

view.html

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

you need specify empty array after module's name, if not using dependency on app.

live example:

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


Comments

Post a Comment