angularjs $q.defer() Object doesn't support propert or method 'defer'

Question

Hi I'm facing an issue where I'm trying to inject $q to a controller and use defer() but it throws an error "TypeError: Object doesn't support property or method 'defer'"

I know injecting $q into controller would work with coding style below, but want to avoid using it.

var app = angular.module('myApp',[]);
app.controller('myApp, function($q){});

So... I'm following coding style defining controllers as http://bguiz.github.io/js-standards/angularjs/controllers/

Any ideas? My code looks like this below.

(function(angular){
  'use strict'
  angular
        .module('myApp',[])
        .controller('myCtrl',myCtrl)
  
  myCtrl.$inject = ['$scope','$q'];
  
  function myCtrl($q){
    var vm = this;
    vm.items = $q.defer();
    
  }
}(window.angular));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="myCtrl">
     rest of code goes here ...
  </div>
</div>

Answer 1

You're missing the $scope argument in myCtrl. You're injecting both but trying to use $scope in lieu of $q.