I am trying to connect my Azure backend with my ionic angular front end

Question

The table is called sport and I am trying to show the list from the column sport in a drop down list. The error I am getting is Error: [$injector:unpr] Unknown provider: sportServiceProvider <- sportService <- sportCtrl and I cannot see where the mistake is, can anyone help?

 <ion-view view-title="Choose Your Team">
  <ion-content      ng-controller="sportCtrl as vm" >


    <label class="item item-input item-select item-positive">
        <div class="input-label">
            Sport
        </div>

        <select>
            <option>
               {{vm.sport}}  
            </option>
           </select>
    </label>                     
    </div>

The service to get the sport is sport.js

 (function () {
 'use strict';

sportService.$inject = ['$http'];

angular
    .module('starter',[azure-mobile-service-module])
    .factory('sportService', sportService);



function sportService($http) {
    var service = {
        getData: getData
    };

    return service;

    function getData() {
        Azureservice.query('sport', {})
    .then (function(sport)
    {
        vm.sport = sport;
    })}
   }
  })();


 angular.module('starter').constant('AzureMobileServiceClient', {
API_URL: "https://",
API_KEY: "",

  });

and the controller is:

 (function () {
'use strict';

sportCtrl.$inject = ['sportService'];

angular
    .module('starter')
    .controller('sportCtrl', sportCtrl);



function sportCtrl(sportService) {
    var vm = this;


    activate();

    function activate() { }

    vm.sportname  = sportService.getData();
}
 })();

Answer 1

It seems that you have initialized repeated angular module named starter , in your sport.js and controller.js scripts. In the controller.js script, you have created a new angular application instance which do not have a sportService injected.

You can define a global variable to the angular instance in sport.js , eg

app = angular
    .module('starter',...)

And use this global variable instead of angular.module('starter') , eg

app.controller('sportCtrl', sportCtrl);

Otherwise, you can define a new angular module for your controller and inject in the main angular module. EG

In your controller.js :

angular
    .module('starter.ctrl')
    .controller('sportCtrl', sportCtrl);

And in your sport.js :

angular
    .module('starter',[azure-mobile-service-module,'starter.ctrl'])