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;
        });

Answer 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){

});