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

ionic-v1
1

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

2

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
3

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.

4

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
5

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

6

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

7

literally saved me, thanks buddy

8

thanks for explaining, very helpful. AngularJS Classes In Pune