AngularJS How to inject dependencies when using controller-as syntax

Question

Following along with the controller-as feature mentioned in the docs, I'm reworking one of my controllers to match the syntax they suggested. But I'm not sure how to inject the $http service into my search() function, and in a way that will be safe from minification?

customer.RequestCtrl = function () {
                this.person = {};
                this.searching = false;
                this.selectedInstitute = null;
                this.query = null;
                this.institutes = null;
};

customer.RequestCtrl.prototype.search = function() {
        this.searching = true;
        this.selectedInstitute = null;                 
        $http({method: 'GET', url: '/api/institutes', params: {q: this.query, max: 250}})
                .success(function(data, status, headers, config) {
                        this.searching = false;
                        this.institutes = data;                                                                        
                })
                .error(function(data, status, headers, config) {
                        this.searching = false;
                        this.institutes = null;
                });

};

PSL · Accepted Answer · 2015-04-28 20:08:06Z

Just inject in your controller constructor, and you can attach it to the instance as a property just like any other property.

  customer.RequestCtrl = function ($http) {
                this.person = {};
                this.searching = false;
                this.selectedInstitute = null;
                this.query = null;
                this.institutes = null;
                this.$http = $http; //Or probably with _ prefix this._http = $http;
  };

  customer.RequestCtrl.$inject = ['$http']; //explicit annotation

  customer.RequestCtrl.prototype.search = function() {
    ...              
    this.$http({method: 'GET', url: '/api/institutes', params: {q: this.query, max: 250}})
    ...       
 };

Another way would be add a variable and run your controller defenision in an IIFE.

(function(customer){

   var $httpSvc;

    customer.RequestCtrl = function ($http) {
                    this.person = {};
                    this.searching = false;
                    this.selectedInstitute = null;
                    this.query = null;
                    this.institutes = null;
                    $httpSvc = $http;
    };

    customer.RequestCtrl.prototype.search = function() {
           ...          
            $httpSvc({method: 'GET', url: '/api/institutes', params: {q: this.query, max: 250}})
          ...
    };

 angular.module('app').controller('RequestCtrl', ['$http', customer.RequestCtrl]);

})(customer);

syabro · Accepted Answer · 2014-12-03 07:30:52Z

0

Also you could try to declare methods inside constructor

MyController = function($http) {
    this.update = function() {
          $http.get(...)
    }
}

answered Dec 3, 2014 at 7:30

syabro

1,8872 gold badges16 silver badges30 bronze badges

Collectives™ on Stack Overflow

AngularJS How to inject dependencies when using controller-as syntax

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related