Learning Ionic&AngularJs, Argument "" is not a function

Hi,
I am pretty new to angular and ionic.
Basically all i did was getting everything to run on my ubuntu and using a wireframing from the ionic creator.

Now i tried to play with an angular.js tutorial inside of the code generated by the ionic creator - and it fails and i got no idea why.
Error Message from Console:
Error: [ng:areq] Argument ‘ArticlesCtrl’ is not a function, got undefined
Following code is from an Angular tutorial:

'use strict';
angular.module('tutorialApp', [])
  .controller('ArticlesCtrl', function($scope){
$scope.articles = [
  { id: 1, name: 'Pizza Vegetaria', price: 5 },
  { id: 2, name: 'Pizza Salami',    price: 5.5 },
  { id: 3, name: 'Pizza Thunfisch', price: 6 }
];
  });

This code is in file app.js that the browser is loading.
Inside of my creator - files i got following code, the <table> i added

  <ion-content class="has-header" padding="true">
        <div style="">
            <p>
               <table class="table" ng-controller="ArticlesCtrl">
  <tr ng-repeat="article in articles | filter:search">
    <td>{{article.id}}</td>
    <td>{{article.name}}</td>
    <td>{{article.price}}</td>
  </tr>
</table></p>
        </div>

The table does not get shown anywhere and the browser console

Have you included your script in the index.html so it is actually loaded? Try adding an window.alert in your controller file(outside of the module/controller) -> it should fire when the file loads

2 Likes

Hm, the alertbox works - but still the same error for that function.

Console log:

Failed to load resource: the server responded with a status of 404 (Not Found)
angular.js:9509 Error: [ng:areq] Argument ‘ArticlesCtrl’ is not a function, got undefined
http://errors.angularjs.org/1.2.14/ng/areq?p0=ArticlesCtrl&p1=not%20a%20function%2C%20got%20undefined
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:78:12
at assertArg (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:1402:11)
at assertArgFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:1412:3)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:6881:9
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:6270:34
at forEach (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:329:20)
at nodeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:6257:11)
at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:5722:15)
at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:5725:13)
at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:5725:13)
angular.js:9509 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [[“fn: $locationWatch; newVal: 8; oldVal: 7”],[“fn: $locationWatch; newVal: 9; oldVal: 8”],[“fn: $locationWatch; newVal: 10; oldVal: 9”],[“fn: $locationWatch; newVal: 11; oldVal: 10”],[“fn: $locationWatch; newVal: 12; oldVal: 11”]]
http://errors.angularjs.org/1.2.14/$rootScope/infdig?p0=10&p1=[[“fn%3…2fn%3A%20%24locationWatch%3B%20newVal%3A%2012%3B%20oldVal%3A%2011”]]
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:78:12
at Scope.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:11969:19)
at Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:12179:24)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:13686:36
at completeOutstandingRequest (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:4193:10)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:4494:7
angular.js:12182 Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [[“fn: $locationWatch; newVal: 8; oldVal: 7”],[“fn: $locationWatch; newVal: 9; oldVal: 8”],[“fn: $locationWatch; newVal: 10; oldVal: 9”],[“fn: $locationWatch; newVal: 11; oldVal: 10”],[“fn: $locationWatch; newVal: 12; oldVal: 11”]]
http://errors.angularjs.org/1.2.14/$rootScope/infdig?p0=10&p1=[[“fn%3…2fn%3A%20%24locationWatch%3B%20newVal%3A%2012%3B%20oldVal%3A%2011”]]
http://localhost:8100/css/preview-frame.css Failed to load resource: the server responded with a status of 404 (Not Found)

The 404 is for a css file.

Have you put ng-app on your html tag?

<html ng-app="tutorialApp">

Edit: html tag is recommended instead of body, edited answer for it.

1 Like

iwantwin, thanks a lot! This is what i didnt think about - thanks, i got it half working now!

I’m glad this resolved your main problem :wink:

literally saved me, thanks buddy