控制器中的角度服务注入有多种方法

Question

I'm trying to build a ionic object-oriented controller properly and am getting trouble with Service Injection...

angular.module('app.controllers', ['ionic', 'app.services.myservice']).controller('myCtrl', MyCtrl)

function MyCtrl($scope, $ionicLoading, MyService){
    this.scope = $scope;
    this.ionicLoading = $ionicLoading;
    this.MyService = MyService;
}

MapCtrl.prototype.method1 = function($scope, $ionicLoading, MyService)  {
    //$scope, $ionicLoading and MyService are undefined
}
MapCtrl.prototype.method2 = function(){
    this.scope.dummy = "A"; //That's ok!
    this.MyService.aMethodWithCallBack(function(res){
        //this.ionicLoading or this.MyService are undefined in this scope !
    }
}

How would you handle it, properly?

Answer 1

Your issue is that you did not inject the dependencies :

angular.module('app.controllers', ['ionic', 'app.services.myservice']).controller('myCtrl', ['$scope', '$ionicLoading', 'MyService', MyCtrl])

function MyCtrl($scope, $ionicLoading, MyService){

}

This should work

To make it more clear, I suggest you to declare controllers that way :

var controllers = angular.module('app.controllers', ['ionic', 'app.services.myservice']);

controllers.controller('myCtrl', ['$scope', '$ionicLoading', 'MyService', MyCtrl]);

function MyCtrl($scope, $ionicLoading, MyService){

}

Answer 2

I prefer next way

MyCtrl.$inject = ['$scope', '$ionicLoading', 'MyService'];
function MyCtrl($scope, $ionicLoading, MyService) {
  // Act as ViewModel
  var vm = this;

  vm.method1 = function() {
    MyService.getData().then(function(response) {
      vm.data = response;
    });
  };
}