CODEWITHSUNDEEP
javascriptangularjs
Nicholas Hirras
Nicholas Hirras

Reputation: 2596

AngularJS How to inject dependencies when using controller-as syntax

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

};

Upvotes: 4

Views: 1244

Answers (2)

PSL
PSL

Reputation: 123739

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

Upvotes: 4

syabro
syabro

Reputation: 1887

Also you could try to declare methods inside constructor

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

Upvotes: 0

Related Questions