Using vm Instead of $scope - Angular $http

Question

I am having trouble converting some Angular code. Currently, it is using Angular's $http service to get data from another file and display it on the page. I want it to still do this but with vm instead of $scope. Here's an example of my vain attempts to do this:

HTML

<h1>{{vm.welcome}}</h1>

Javascript

var app = angular.module('myApp', []);
app.controller('myCtrl', function() {
   $http.get("welcome.htm")
   .then(function(response) {
      var vm = this;
      vm.welcome = response.data;
   });
});

Also, I originally got this code from w3schools' Angular tutorial.

Can you show where you bind your controller (`ng-controller`) in your HTML? — Joe Clay, Feb 24 '17 at 16:11

score 3 · Accepted Answer · edited May 23 '17 at 10:29

3

Add var vm = this; outside of the promise and inside of the controller.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($http) {
    var vm = this;
    $http.get("welcome.htm")
        .then(function(response) {
            vm.welcome = response.data;
        });
});

in the html use controller as reference the controller

<div ng-controller="myCtrl as vm"> 
   <h1>{{vm.welcome}}</h1>
</div>

refer this for get more detail about how this work in controller

edited May 23 '17 at 10:29

Community

1
1

answered Feb 24 '17 at 16:12

Sachila Ranawaka

39,756
7
56
80

This doesn't seem to work... If you go to the link I provided, does it work for you? – Hudson Taylor Feb 24 '17 at 16:19
did u inject `$http` to your controller `app.controller('myCtrl', function($http)` – Sachila Ranawaka Feb 24 '17 at 16:22

Using vm Instead of $scope - Angular $http

1 Answers1