Using $http as a function parameter - AngularJS

Question

I'm trying to use this AngularJS material chip. (CONTACT CHIP - With auto-complete) https://material.angularjs.org/latest/demo/chips

And it has a different structure of what I'm used to. I want to adapt to get the contacts from my mongodb with $http, like:

$http.get("/contacts").success(function(response) {
          contacts = response;
});

But in their Angular Material code example is like this:

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
      .controller('ContactChipDemoCtrl', DemoCtrl);
  function DemoCtrl ($q, $timeout) { 
...
 function loadContacts() {
  var contacts = [
    'Marina Augustine',
    'Oddr Sarno',
    'Nick Giannopoulos',
    'Narayana Garner',
    'Anita Gros',
    'Megan Smith',
    'Tsvetko Metzger',
    'Hector Simek',
    'Some-guy withalongalastaname'
  ];
}
...

How can I use $http as a parameter for the DemoCtrl function? To get the contacts from db

Are you just asking how Dependency Injection works with Angular ? I suggest you take a look at the docs docs.angularjs.org/guide/di — Iso
– Iso, Commented Jul 19, 2016 at 17:55
@Sajeetharan click in the link above and go to CONTACT CHIP, there is a codepen icon — Nathan Barreto
– Nathan Barreto, Commented Jul 19, 2016 at 17:58

Booza · Accepted Answer · 2016-07-19 18:09:35Z

2

MyModule.controller("DemoController", DemoCtrl);

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

function DemoCtrl ($http) {
     $http.get("/contacts").success(function(response) {
      contacts = response;
});

Above is the preferred way to setup a controller because it doesn't use an anonymous function rather than:

MyModule.controller("DemoController", ['$http', function($http) {
     $http.get("/contacts").success(function(response) {
      contacts = response;
}]);

answered Jul 19, 2016 at 18:09

Booza

1362 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nathan Barreto Over a year ago

i'm gonna try it here

Booza Over a year ago

Also - @charlietfl is right - you should also inject $scope and set $scope.contacts = response.data;

Nathan Barreto Over a year ago

Onde question @Booza in my function DemoCtrl there is some parameters DemoCtrl($q,$timeout). When I inject $http this should now be the first parameter, right !?

Booza Over a year ago

Whatever the order of the strings are, that should be the order of the parameters. It doesn't matter as long as they match up.

charlietfl · Accepted Answer · 2016-07-19 18:02:51Z

0

You are assigning response data to variable contacts which has no angular scope context

If you are using $scope as your data model for view it would be

$http.get("/contacts").then(function(response) {
          $scope.contacts = response.data;
});

Or if using controllerAs alias in view:

var vm = this
$http.get("/contacts").then(function(response) {
          vm.contacts = response.data;
});

Also need to inject $http in controller

edited Jul 19, 2016 at 18:02

answered Jul 19, 2016 at 17:59

charlietfl

172k14 gold badges125 silver badges154 bronze badges

2 Comments

Nathan Barreto Over a year ago

This I know. The question is, how can I use the $http dependency inside the DemoCtrl function, or as a parameter...

charlietfl Over a year ago

You simply inject it. I guess I don't understand problem

Collectives™ on Stack Overflow

Using $http as a function parameter - AngularJS

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related