CODEWITHSUNDEEP
angularjs
h3xc0ntr0l
h3xc0ntr0l

Reputation: 399

How to properly refactor this kind of angularjs code?

I have an angularjs file that uses a much different style of coding than I'm using, and I need to recreate the functionality. For instance, in a service declaration, a function is defined and passed in as the second paramater of .service('someservicehere', functionparam)

First of all, all of the parts of the app(controllers, services, factories, etc) all start out like so:

var self = this;

1) Is this the $scope object normally passed in as a parameter, such as in a controller?

2) Is it the same in a service, such as this one?

function userService($http, API, auth) {
  var self = this;
  self.getQuote = function() {
    return $http.get(API + '/auth/quote')
  }

  // add authentication methods here
  self.register = function(username, password){
    return $http.post('/auth/register',{
      username: username,
      password: password
    })
  }

  self.login = function(username, password){
    return $http.post('/auth/signin', {
      username: username,
      password: password
    })
  }

Below, in the same file, the service is implemented like so (line 3)

angular.module('app', ['ui.router'])
.factory('authInterceptor', authInterceptor)
.service('user', userService)
.service('auth', authService)
.constant('API', 'localhost:3000')
.config(function($httpProvider, $stateProvider, $urlRouterProvider) {
  $httpProvider.interceptors.push('authInterceptor');
})
.controller('Main', MainCtrl)
})();

Can I effectively follow that rule (that self be rewritten as $scope and the dependencies properly injected) when refactoring the code? I have been following angularjs tutorials (and usually completing them the same day) for about a month or so now, and have never encountered this style of writing code. What are the benefits or drawbacks, and why do it this way? Are there any resources on the web I can find for this?

I apologize if this is a duplicate. I don't even know what this style of coding is, as I've never encountered it, and had no word (or words) to search for on google when researching.

Thanks in advance!

Upvotes: 1

Views: 116

Answers (1)

HankScorpio
HankScorpio

Reputation: 3651

1) No, it's the instance of the controller, service, factory etc. Not the scope. When using controllerAs syntax, your controller becomes a property on the scope. So let's say you defined the controllerAs name of 'Main' to be 'mainCtl'.

var self = this; // 1st line of the controller
self.foo = 'BAR';
$scope.foo = 'BEEP';

And html like this:

<span>{{mainCtl.foo}} {{foo}}</span>

That would evaluate to:

BAR BEEP

2) No, typically services don't have any $scope.

var self = this; // 1st line of the service
self.foo = 'bar';

and in your controller:

myModule.controller('Main', function($scope, MyService){
    console.log(MyService.foo); // 'bar'
});

So in each case this is targeting the instance of the controller, service etc, not the $scope. This isn't an angular thing, this is more about functional programming. The reason for defining a variable for this (e.g. var self = this) is because these functions are being treated by the devs as constructor functions. self will refer to the instance created when new is used on that function (e.g. var objectInstance = new constructorFunction())

It also helps to have a variable for this because this will have a different meaning depending on which function calls it, but not if you create that variable first.

Upvotes: 2

Related Questions