Argument "AppCtrl" is not a function, received undefined - $ http angular -ionic error

Question

im trying to create a simple $ http application that takes data from an ion-based json file using angularjs.

this is the error i get:

Error: [ng: areq] The 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  in the file: /// C: /Users/Matan/tabapp/www/lib/ionic/js/ionic.bundle.js: 9007: 12 in assertArg (file: /// C: / Users / Matan / tabapp / www /lib/ionic/js/ionic.bundle.js: 10292: 11) in assertArgFn (file: /// C: /Users/Matan/tabapp/www/lib/ionic/js/ionic.bundle.js: 10302: 3) in the file: /// C: /Users/Matan/tabapp/www/lib/ionic/js/ionic.bundle.js: 15706: 9 in the 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 ) in nodeLinkFn (file: /// C: /Users/Matan/tabapp/www/lib/ionic/js/ionic.bundle.js: 15105: 11) in compound LinkFn (file: /// C: / Users / Matan /tabapp/www/lib/ionic/js/ionic.bundle.js: 14569: 15) in the LinkFn compound (file: /// C: /Users/Matan/tabapp/www/lib/ionic/js/ionic.bundle. js: 14572: 13) in compound LinkFn (file: /// C:/Users/Matan/tabapp/www/lib/ionic/js/ionic.bundle.js: 14572: 13)

my code is:

<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 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 find answers on the Internet, but none of them helped me.

Answer 1

Make sure the module "app1" is not created again in the code. The second argument "[]" will create a new module or override the previous one.

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

and the next line will get access to the already created module.

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

Answer 2

You should have the following scheme:

App.js:

angular.module('app1', ['ionic', 'app1.controllers']) // Create app

MainController.js:

angular.module('app1.controllers', []) // Create controller to app1

OtherControllers.js

angular.module('app1.controllers') // Load controller of app1