What is "this" in angular JS

JavaScript
1

I was going through Angular JS custom service.

code is using “this” inside service method.

What does “this” refer here.

screenshot

2

It refers to the function that it’s in. See the unicorn launcher for further details https://docs.angularjs.org/guide/providers

3

I see its using this.city … how city related to this function ?

4

The sample code is:

weatherApp.service('cityService', function(){
    this.city = "New York, NY";
});

Later on, you can retrieve the value by accessing cityService.city which will give you "New York, NY"

5

still not clear.

here cityService is the name of the service we have defined.

How it is related to function and so how it is connected to city ?

Do you mean cityService is the function name here ?

like this …
var cityService = function(){
this.city = “New York, NY”;
}

6

Hey @winzip,

Are you familiar with how objects can be created with constructor functions in JavaScript?
If we forget about Angular for a moment and look at your last example:

var CityService = function() {
  this.city = "New York, NY";
}

you now have a constructor function called CityService (note that some people refer to this as a ‘class’ in JavaScript).

When this function is called with the new keyword, the JS engine executes the function, with this pointing to the new object that will be returned from the constructor:

var cityService = new CityService();
console.log(cityService.city); // outputs 'New York, NY'

Anything you attach to this in the constructor is available as a property of the returned object.

As you can see from the link that @Paul_Wilkins gave you, when you create a service in Angular 1.x, Angular will call new on the supplied function behind the scenes and return the new object.

1 Like
7

thats a nice explanation.

Now issue is city is also there in HTML

<div class="form-group">
           <input type="text" ng-model="city" class="form-control" />
</div>

Is there any connectivity between cityService.city and ng-model="city" ?

8

There will be a $scope.city assignment that sees to that.

9

That depends on what’s going on in the controller for that template.

Values and methods that you want to use within your template have to be assigned to $scope within the controller for the template, as Paul pointed out.

The original way to do that was like this:

controller

myApp.controller('CityController'), function CityController($scope) {
  $scope.city = "New York, NY";
});

template

<body ng-controller="CityController">
  <div class="form-group">
    <input type="text" ng-model="city" class="form-control" />
  </div>
</body>

but these days it’s popular (and considered best practice) to use the ‘ControllerAs’ syntax, which allows you to set properties directly on your controller object and have them available in the template:

controller

myApp.controller('CityController'), function CityController($scope) {
  this.city = "New York, NY";
});

template

<body ng-controller="CityController as ctrl">
  <div class="form-group">
    <input type="text" ng-model="ctrl.city" class="form-control" />
  </div>
</body>

Getting back to your original question, if you want to pass through a value from a service to your template, you have to inject the CityService into your controller, and assign the city property of the service to the controller’s scope using one of the above methods.

To be fair, if you’re working with an Angular application I’d spend some time looking through the documentation and the official tutorial to get a good understanding of the framework’s concepts. It’ll make your life a lot easier.

10

yes…you are right…ng-model is connected to $scope …

however my trouble area is , I see pre-populated city value in browser which was set in the service… how the city value is flowing into the browser from service though they are not connected…I’m confused with this data flow right at this spot.

when I load the page in browser I see this
screenshot

I still dont understand how that prepopulation worked out here.

code attached
myapp.zip (1.9 KB)

11

@fret,

thanks for your post & time…I’m facing some difficulty in understanding the data flow in the sample code … could you reply to my last post.

12

OK, so if you take a look at app.js from the zip file, you can see what’s happening in the controller:

weatherApp.controller('forecastController', ['$scope', 'cityService', function($scope, cityService) {
    
    $scope.city = cityService.city;
    
}]);

You can see that forecastController declares $scope and cityService as dependencies (things that it needs). Angular takes care of getting these and passing them into the controller for you. Then the city property of the service is assigned to the city property on $scope. That’s all there is to it.

The homeController is a little more interesting. As well as getting the value from the service and assigning it to $scope, it also uses $scope.$watch to observe the $scope.city property for changes and update the service:

$scope.$watch('city', function() {
   cityService.city = $scope.city; 
});
1 Like
13

It looks like he may be using this resource at this stage: http://my-angular-js.blogspot.co.nz/2015/07/complete-weather-application-also-runs.html

If it’s of any help @winzip I have found this Angular quick start guide to be extremely helpful in educating people on the different aspects of Angular.

1 Like
14

Thank you guys.

Those are extremely helpful understanding this concept.

happy learning.

Thanks for your time.

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.