The functionality 'PeopleController' does not appear to be defined and is generating an undefined error in IonicJS

Question

The functionality 'PeopleController' does not appear to be defined and is generating an undefined error in IonicJS

Utilizing IonicJS to display JSON data.
Encountering an error: "Argument 'PeopleController' is not a function, got undefined" I have verified the file people_controller.js

(function() { var app = angular.module('peopleController',[]);

app.controller('PeopleController',
    function($scope, $http) {
    var url = 'http://localhost:3000/api/people';
    $http.get(url)
    .success(function(people) {
    $scope.people = people;
    })
    .error(function(data) {
    console.log('server side error occurred.'); 
    }); 
    } 
    );
    });

app.js:

angular.module('starter', ['ionic', 'peopleController'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Do not remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>


    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
   <body ng-app="starter">

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content>
      <ul class="list" ng-controller="PeopleController">
<li class="item" ng-repeat="person in people">
<h3>{{person.name}}</h3>

</li>
</ul>

      </ion-content>
    </ion-pane>
     <script src="../js/controllers/people_controller.js"></script>

  </body>
</html>

Where am I Going Wrong?

javascript angularjs ionic-framework

Answer 1

Answer №1

Ensure the PeopleController module is injected after it has been compiled/inserted into your application. Verify the sequence of JS files by loading PeopleController.js before app.js

Answer 2

Ensure the PeopleController module is injected after it has been compiled/inserted into your application. Verify the sequence of JS files by loading PeopleController.js before app.js

Answer 3

Answer №2

To solve the issue, you must eliminate peopleController from the list of module dependencies in the code

angular.module('starter', ['ionic'])

.

Remember that a controller is not the same as a module.

Here's how to make the necessary changes:

Replace

app.controller('PeopleController',...)

with

angular.module('starter').controller('PeopleController',...)

Don't forget to include the Angular files and the PeopleController.js file:

<!-- Include your app's JavaScript -->
<script src="angular/angular.min.js"></script>
<!-- Make sure to include Ionic Dependencies -->
<script src="js/app.js"></script>
<script src="js/PeopleController.js"></script>

Answer 4

To solve the issue, you must eliminate peopleController from the list of module dependencies in the code

angular.module('starter', ['ionic'])

.

Remember that a controller is not the same as a module.

Here's how to make the necessary changes:

Replace

app.controller('PeopleController',...)

with

angular.module('starter').controller('PeopleController',...)

Don't forget to include the Angular files and the PeopleController.js file:

<!-- Include your app's JavaScript -->
<script src="angular/angular.min.js"></script>
<!-- Make sure to include Ionic Dependencies -->
<script src="js/app.js"></script>
<script src="js/PeopleController.js"></script>

Answer 5

Answer №3

One issue that was causing trouble was the ordering of JS files. Initially tried loading the app.js file after the peopleController.js with no success.

After rearranging and loading app.js right after peopleController.js, everything worked perfectly.

  <script src="js/app.js"></script>
  <script src="js/controllers/people_controller.js"></script>

Updated Project Structure:

index.html

 <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>

        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">

        <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
        <link href="css/ionic.app.css" rel="stylesheet">
        -->

        <!-- ionic/angularjs js -->


        <script src="lib/ionic/js/ionic.bundle.js"></script>


        <!-- cordova script (this will be a 404 during development) -->
        <script src="cordova.js"></script>

        <!-- your app's js -->
        <script src="js/app.js"></script>
          <script src="js/controllers/people_controller.js"></script>
      </head>
       <body ng-app="starter">

        <ion-pane>
          <ion-header-bar class="bar-stable">
            <h1 class="title">Ionic Blank Starter</h1>
          </ion-header-bar>
          <ion-content>
          <ul class="list" ng-controller="PeopleController">
    <li class="item" ng-repeat="person in people">
    <h3>{{person.name}}</h3>

    </li>
    </ul>

          </ion-content>
        </ion-pane>

      </body>
    </html>

app.js

angular.module('starter', ['ionic', 'peopleController'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

peopleController.js:

(function() {
var app = angular.module('peopleController', []);

app.controller('PeopleController',
function($scope, $http) {
var url = 'http://localhost:3000/api/people';
$http.get(url)
.success(function(people) {
$scope.people = people;
})
.error(function(data) {
console.log('server side error occurred.'); 
}); 
} 
);
})();

Answer 6

One issue that was causing trouble was the ordering of JS files. Initially tried loading the app.js file after the peopleController.js with no success.

After rearranging and loading app.js right after peopleController.js, everything worked perfectly.

  <script src="js/app.js"></script>
  <script src="js/controllers/people_controller.js"></script>

Updated Project Structure:

index.html

 <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>

        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">

        <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
        <link href="css/ionic.app.css" rel="stylesheet">
        -->

        <!-- ionic/angularjs js -->


        <script src="lib/ionic/js/ionic.bundle.js"></script>


        <!-- cordova script (this will be a 404 during development) -->
        <script src="cordova.js"></script>

        <!-- your app's js -->
        <script src="js/app.js"></script>
          <script src="js/controllers/people_controller.js"></script>
      </head>
       <body ng-app="starter">

        <ion-pane>
          <ion-header-bar class="bar-stable">
            <h1 class="title">Ionic Blank Starter</h1>
          </ion-header-bar>
          <ion-content>
          <ul class="list" ng-controller="PeopleController">
    <li class="item" ng-repeat="person in people">
    <h3>{{person.name}}</h3>

    </li>
    </ul>

          </ion-content>
        </ion-pane>

      </body>
    </html>

app.js

angular.module('starter', ['ionic', 'peopleController'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

peopleController.js:

(function() {
var app = angular.module('peopleController', []);

app.controller('PeopleController',
function($scope, $http) {
var url = 'http://localhost:3000/api/people';
$http.get(url)
.success(function(people) {
$scope.people = people;
})
.error(function(data) {
console.log('server side error occurred.'); 
}); 
} 
);
})();

The functionality 'PeopleController' does not appear to be defined and is generating an undefined error in IonicJS

Answer №1

Answer №2

Answer №3

Similar questions

Triggering successive jQuery confirm boxes once the previous one has finished processing

Next.js version 13 is causing the page to refresh each time the router is pushed

Executing Directive function from Controller in AngularJS with or without passing parameters

Retrieving a collection of data from MongoDB featuring today's date

A method of iteration that allows us to traverse through an object, regardless of whether it contains a single item or an array of items, is known as dynamic looping

I'm struggling to grasp the concept of map-reduce in MongoDB and it's leaving me feeling lost and

React NextJS: Unable to retrieve cookies or properties post redirection

Unable to successfully register a ServiceWorker due to an unsupported MIME type ('text/html') in Vue.js

Dynamic Drop Down Menu with PHP and AJAX loading data from a JSON

Using AngularJS to chain promises

Guide to dividing by pipe for multiple selection in a concealed domain

Adding JSON objects to an array using Javascript and Jquery

Creating a dynamic CSS height for a div in Angular CLI V12 with variables

How can I compare two fields in a MongoDb query when one of them is an ObjectId?

Create a new object by mapping values from an array of two objects in Angular using TypeScript, based on the object

What is the best way to obtain an array format in JavaScript?

The double click feature is not functioning properly when used in conjunction with the selectpicker Boostrap

Is it possible that the document is corrupted since it is not updating and no error is being displayed?

displaying outcomes as 'Indefinite' rather than the anticipated result in the input field

Using JavaScript to capture patterns with regex