Service directive in action #angularjs #medium #article-hierarchical-di-ng

article-hierarchical-di-service-directive-heirarchy-in-action.ts

class AuthService {
  static $inject = ['$http'];
  
  private token: string;
  
  constructor($http: IHttpService) {}
  
  getToken() {
    if (_.isNil(this.token)) {
      this.token = $http.get('my-site.example.com/auth');
    }
    
    return this.token;
  }
}

class EastAndorAuthService {
  static $inject = ['$http'];
  
  private token: string;
  
  constructor($http: IHttpService) {}
  
  getToken() {
    if (_.isNil(this.token)) {
      this.token = $http.get('east-andor.example.com/auth');
    }
    
    return this.token;
  }
}

// using the same `auth` key to register EastAndoAuthService
angular.directive('auth', [function auth() {
  return {
    restrict: 'A',
    controller: ['$attrs', '$injector', function controller($attrs, $injector) {
      this.service = switchOn({
        '': () => $injector.invoke(AuthService),
        eastAndor: () => $injector.invoke(EastAndorAuthService),
      }, $attrs.auth);
    }],
  };
}]);