Undefined Controller AngularJS

Question

My template is loading but I get an error that the controller is undefined. The controller does exist in my sources exactly at the location defined. What is wrong with this code?

Error: [ng:areq] http://errors.angularjs.org/1.2.14/ng/areq?p0=ItemsController&p1=not%20aNaNunction%2C%20got%20undefined
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js:6:450
    at xb

This is my html:

<div ng-app="myApp">
  <ul ng-controller="ItemsController" class="nav">
    <input type="text" value="ItemName" ng-model="newItemName" placeholder="name of new item...">
    <button ng-click="addItem()">Add Me</button>
    <li ng-repeat="item in items.data" id="item{{item.id}}">
      <a href="#">{{item.title}}</a> 
      <a ng-click="deleteItem($index)" class="fa fa-trash-o"></a>
    </li>
  </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-route.js"></script>
<script type="text/javascript" src="js/te.js"></script>

'use strict';
var myApp = angular.module("myApp", []);
myApp.factory("items ", function() {
  var items = {};
  items.data = [];
  return items;
});
myApp.controller("ItemsController", function ItemsController($scope, items) {
  $scope.items = items;
  $scope.deleteItem = function(index) {
    items.data.splice(index, 1);
  }
  $scope.addItem = function(index) {
    items.data.push({
      id: $scope.items.data.length + 1,
      title: $scope.newItemName
    });
  }
});

You have a link to edit the question. You should put the code in the description of the question instead of in a comment. — Michel
– Michel, Commented Mar 21, 2015 at 12:12
Is js/te.js the only javascript file you have? I'm guessing you are creating myApp in multiple places. — dting
– dting, Commented Mar 21, 2015 at 12:46
What does your filestructure look like? Is js/te.js reachable from from your html file? — martin
– martin, Commented Mar 21, 2015 at 13:30

Zeeshan Hassan Memon · Accepted Answer · 2015-03-21 13:30:33Z

1

The Only Problem I see in your code is in following line:

myApp.factory("items ", function() {

space in the factory name "items " and you are injecting in your controller as items.

Here is the working PLNKR of your code, proof its working fine.

Happy Helping!

answered Mar 21, 2015 at 13:30

Zeeshan Hassan Memon

8,3654 gold badges47 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vishtree · Accepted Answer · 2015-03-21 12:12:49Z

0

I have faced this problem many a times and usually this is caused when you have not included your js in the template.

If its not the case, then if you could share your some part of code, then only anybody will be able to answer it properly.

answered Mar 21, 2015 at 12:12

vishtree

3791 gold badge3 silver badges13 bronze badges

2 Comments

Safa Over a year ago

i include the js file in the temlate

nicael Over a year ago

You should provide an answer, not assumptions.

Collectives™ on Stack Overflow

Undefined Controller AngularJS

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related