Argument 'AppCtrl' is not a function, got undefined - $http angular-ionic error

Question

im trying to build a simple $http app that takes data from json file on the ionic framework using angularjs.

this is the error i get:

Error: [ng:areq] Argument 'AppCtrl' is not a function, got undefined http://errors.angularjs.org/1.2.12/ng/areq?p0=AppCtrl&p1=not%20aNaNunction%2C%20got%20undefined at file:///C:/Users/Matan/tabapp/www/lib/ionic/js/ionic.bundle.js:9007:12 at assertArg (file:///C:/Users/Matan/tabapp/www/lib/ionic/js/ionic.bundle.js:10292:11) at assertArgFn (file:///C:/Users/Matan/tabapp/www/lib/ionic/js/ionic.bundle.js:10302:3) at file:///C:/Users/Matan/tabapp/www/lib/ionic/js/ionic.bundle.js:15706:9 at file:///C:/Users/Matan/tabapp/www/lib/ionic/js/ionic.bundle.js:15118:34 at forEach (file:///C:/Users/Matan/tabapp/www/lib/ionic/js/ionic.bundle.js:9239:20) at nodeLinkFn (file:///C:/Users/Matan/tabapp/www/lib/ionic/js/ionic.bundle.js:15105:11) at compositeLinkFn (file:///C:/Users/Matan/tabapp/www/lib/ionic/js/ionic.bundle.js:14569:15) at compositeLinkFn (file:///C:/Users/Matan/tabapp/www/lib/ionic/js/ionic.bundle.js:14572:13) at compositeLinkFn (file:///C:/Users/Matan/tabapp/www/lib/ionic/js/ionic.bundle.js:14572:13)

my code is this:

<ion-view title="Dashboard">
  <ion-content class="has-header padding">
    <div ng-app="app1">
        <div ng-controller="AppCtrl">
          {{1 + 2}}
          <input type="text" ng-model="person.firstName" />
          <input type="text" ng-model="person.lastName" />
          <input type="button" ng-click="addPerson(person)" />

          <ul>
            <li ng-repeat="person in people">
                {{person.Name}} {{person.Description}}
            </li>
          </ul>
        </div>
    </div>
        <img class="Pageimg" src="img\Computer_Assistant.jpg"/>
        <h3>My Computer Can't Turn On</h3>
        <p>בידי המשטרה עדויות רבות על מעשי הסחיטה שבוצעו בנמל והביאו גופים עסקיים לעבוד עם 
        חברות הקשורות ליו"ר אלון חסן. חסן נתן חסות לחברת "דנה" שסיפקה שירותים לוגיסטיים בת
        וך הנמל, והוא מקורב לבעלי החברה יניב בלטר. חברה אחרת של חסן, "הו
        פס", מייצרת ומוכרת חומרי ניקוי לחברות שעובדות עם נמל אשדוד.</p>
    </div>
        <div>
        <img class="Pageimg" src="img\Computer_Assistant.jpg"/>
        <h3>My Computer Can't Turn On</h3>
        <p>בידי המשטרה עדויות רבות על מעשי הסחיטה שבוצעו בנמל והביאו גופים עסקיים לעבוד עם 
        חברות הקשורות ליו"ר אלון חסן. חסן נתן חסות לחברת "דנה" שסיפקה שירותים לוגיסטיים בת
        וך הנמל, והוא מקורב לבעלי החברה יניב בלטר. חברה אחרת של חסן, "הו
        פס", מייצרת ומוכרת חומרי ניקוי לחברות שעובדות עם נמל אשדוד.</p>
    </div>
        <div>
        <img class="Pageimg" src="img\Computer_Assistant.jpg"/>
        <h3>My Computer Can't Turn On</h3>
        <p>בידי המשטרה עדויות רבות על מעשי הסחיטה שבוצעו בנמל והביאו גופים עסקיים לעבוד עם 
        חברות הקשורות ליו"ר אלון חסן. חסן נתן חסות לחברת "דנה" שסיפקה שירותים לוגיסטיים בת
        וך הנמל, והוא מקורב לבעלי החברה יניב בלטר. חברה אחרת של חסן, "הו
        פס", מייצרת ומוכרת חומרי ניקוי לחברות שעובדות עם נמל אשדוד.</p>
    </div>
        <div>
        <img class="Pageimg" src="img\Computer_Assistant.jpg"/>
        <h3>My Computer Can't Turn On</h3>
        <p>בידי המשטרה עדויות רבות על מעשי הסחיטה שבוצעו בנמל והביאו גופים עסקיים לעבוד עם 
        חברות הקשורות ליו"ר אלון חסן. חסן נתן חסות לחברת "דנה" שסיפקה שירותים לוגיסטיים בת
        וך הנמל, והוא מקורב לבעלי החברה יניב בלטר. חברה אחרת של חסן, "הו
        פס", מייצרת ומוכרת חומרי ניקוי לחברות שעובדות עם נמל אשדוד.</p>
    </div>
  </ion-content>
</ion-view>

and the js file:

var app = angular.module('app1', []);

app.controller('AppCtrl', function( $scope, $http) {
    var app = this;
    $http.get('webtest.json')
      .success(function(data) {
        console.log(data);
        $scope.people = data;
      })

    app.addPerson = function(person) {

    }
})

i tried to look for answers in the internet but none of them helped me.

Answer 1

Make sure you are not creating the "app1" module again in code. The 2nd argument "[]" will create new module or override the previous one.

// create new module
var app = angular.module('app1', []);

and following line will access the already created module.

var app = angular.module('app1');