Angularjs Ionic controller error

Question

I am working with IONIC Framework (Angularjs)

I am receiving below error,

  463788   error    Error: [ng:areq] http://errors.angularjs.org/1.4.3/ng/areq?p0=PaymentCtrl&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
at http://localhost:8100/lib/ionic/js/angular/angular.min.js:6:416
at Sb (http://localhost:8100/lib/ionic/js/angular/angular.min.js:22:18)
at Qa (http://localhost:8100/lib/ionic/js/angular/angular.min.js:22:105)
at http://localhost:8100/lib/ionic/js/angular/angular.min.js:79:497
at I.appendViewElement (http://localhost:8100/lib/ionic/js/ionic-angular.min.js:17:4463)
at Object.O.render (http://localhost:8100/lib/ionic/js/ionic-angular.min.js:16:17590)
at Object.O.init (http://localhost:8100/lib/ionic/js/ionic-angular.min.js:16:16825)
at I.render (http://localhost:8100/lib/ionic/js/ionic-angular.min.js:17:3419)
at I.register (http://localhost:8100/lib/ionic/js/ionic-angular.min.js:17:3150)

Here is my code for controller.

define(['ionic', 'ionicAngular', 'angular',
'ngRoute', 'angularAnimate', 'angularSanitize', 'uiRouter'],
    function (ionic, ionicAngular, angular) {

        'use strict';

        console.log('Payment controller ');

        var PaymentCtrl = function ($scope, PaymentSvc,$state, $ionicLoading) {
          /*$scope.phoneNumberVerification = function() { $state,$ionicPopup,
          console.log('PhoneNumber controller added1 ');
          $ionicLoading.hide();
          $state.go('tab.eateries');
        };*/


                      // When button is clicked, the popup will be shown...

        };
        return PaymentCtrl;

    });

Serveics.js

define(['ionic', 'ionicAngular', 'angular',
    'ngRoute', 'angularAnimate', 'angularSanitize', 'uiRouter'],
        function (ionic, ionicAngular, angular) {

            'use strict';
              //console.log('service modules');
             var PaymentSvc = function(){

                     console.log('serverices call');//var svc = this;

            }
            return PaymentSvc;

        });



       // });*/

payment.js

define(['ionic', 'ionicAngular', 'angular',
    './modules/payment/controllers/paymentctrl',
    './modules/payment/services/services',
    'ngRoute', 'angularAnimate', 'angularSanitize', 'uiRouter'],
        function (ionic, ionicAngular, angular,
                    paymentCtrl,
                    paymentSvc) {

            'use strict';

            console.log('payment.js modules');

            var payment = angular.module('payment', ['ionic'])
                    .controller('PaymentCtrl', paymentCtrl)
                    .service('PaymentSvc',paymentSvc);
            return payment;
        });

A. Khaled · Accepted Answer · 2016-05-25 21:16:45Z

1

No need to inject ['angular','ngRoute', 'angularAnimate', 'angularSanitize', 'uiRouter']. Ionic automatically inject angular decencies when you inject ['ionic']

Just write your controller directly

angular.module('starter', ['ionic']).controller('PayCtrl',function ($scope,$state,$ionicLoading,PaymentSvc){

//starter is the app name come from ng-app="starter" 

         $ionicLoading.show();
         $scope.phoneNumberVerification = function(){
              console.log('PhoneNumber controller added1');
              $ionicLoading.hide();
              $state.go('tab.eateries');
         };
    });

I advise you to organize your javascript project files to in 3 files:

app.js which contains

angular.module('starter', ['ionic', 'starter.controllers','starter.services'])..config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

  .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  }).state('app.home', {
    url: '/home',
    views: {
      'tab-home': {
        templateUrl: 'templates/home.html',
        controller : 'HomeCtrl'
      }
    }
  });
  $urlRouterProvider.otherwise('/app/home');
});

controller.js which contains your controllers

angular.module('starter.controllers', []).controller('AppCtrl', function('PayCtrl',function ($scope,$state,$ionicLoading,PaymentSvc){
         $ionicLoading.show();
         $scope.phoneNumberVerification = function(){
              console.log('PhoneNumber controller added1');
              $ionicLoading.hide();
              $state.go('tab.eateries');
         };
    });

service.js which contains you connections to server

angular.module('starter.services', []).factory('PaymentSvc',function($http,$q){

});

answered May 25, 2016 at 21:16

A. Khaled

1,62818 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

NovusMobile Over a year ago

Yes, I used same 3 files that you mentioned. but I am still getting the same error. I updated the question with each file.

NovusMobile Over a year ago

Major things . I am facing issue where I am putting payment as fourth tab into my layout tab

NovusMobile Over a year ago

IONIC Version : 1.7.14

A. Khaled Over a year ago

Why you don't use Ionic tabs template ionic start myapp? The way you coding is really first time to see... The error you have says your controller is undefined so try to write you controller as I answered above. The is the default Ionic template.

Yonatan Vainer · Accepted Answer · 2016-05-25 20:29:40Z

1

it is an injection error. for example, if you inject ['a','b','c'] you must have it in your function in the same order and amount: function(a,b,c). in your case, you have more parameters in the injection than the parameters in your controller function.

answered May 25, 2016 at 20:29

Yonatan Vainer

4536 silver badges15 bronze badges

2 Comments

NovusMobile Over a year ago

It's not working for me. I added the same change but no effect. Still getting the same

NovusMobile Over a year ago

Major things . I am facing issue where I am putting payment as fourth tab into my layout tab

Collectives™ on Stack Overflow

Angularjs Ionic controller error

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related