Migrates TopicViewerBackendApiService to Angular

core/templates/dev/head/components/summary-tile/story-summary-tile.directive.ts

@@ -17,6 +17,7 @@
  */
 
 require('domain/utilities/url-interpolation.service.ts');
+require('domain/topic_viewer/topic-viewer-domain.constants.ajs.ts');
 
 angular.module('oppia').directive('storySummaryTile', [
   'UrlInterpolationService', function(UrlInterpolationService) {

core/templates/dev/head/domain/topic_viewer/topic-viewer-backend-api.service.spec.ts

@@ -16,35 +16,25 @@
  * @fileoverview Unit tests for TopicViewerBackendApiService.
  */
 
-// TODO(#7222): Remove the following block of unnnecessary imports once
-// the code corresponding to the spec is upgraded to Angular 8.
-import { UpgradedServices } from 'services/UpgradedServices';
-// ^^^ This block is to be removed.
+import { HttpClientTestingModule, HttpTestingController } from
+  '@angular/common/http/testing';
+import { TestBed, fakeAsync, flushMicrotasks } from '@angular/core/testing';
 
-require('domain/topic_viewer/topic-viewer-backend-api.service.ts');
+import { TopicViewerBackendApiService } from
+  'domain/topic_viewer/topic-viewer-backend-api.service';
 
-describe('Topic viewer backend API service', function() {
-  var TopicViewerBackendApiService = null;
-  var sampleDataResults = null;
-  var $rootScope = null;
-  var $scope = null;
-  var $httpBackend = null;
-  var UndoRedoService = null;
+describe('Topic viewer backend API service', () => {
+  let topicViewerBackendApiService:
+    TopicViewerBackendApiService = null;
+  let httpTestingController: HttpTestingController;
+  let sampleDataResults = null;
 
-  beforeEach(angular.mock.module('oppia'));
-  beforeEach(angular.mock.module('oppia', function($provide) {
-    var ugs = new UpgradedServices();
-    for (let [key, value] of Object.entries(ugs.getUpgradedServices())) {
-      $provide.value(key, value);
-    }
-  }));
-
-  beforeEach(angular.mock.inject(function($injector) {
-    TopicViewerBackendApiService = $injector.get(
-      'TopicViewerBackendApiService');
-    $rootScope = $injector.get('$rootScope');
-    $scope = $rootScope.$new();
-    $httpBackend = $injector.get('$httpBackend');
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+    });
+    httpTestingController = TestBed.get(HttpTestingController);
+    topicViewerBackendApiService = TestBed.get(TopicViewerBackendApiService);
 
     // Sample topic object returnable from the backend
     sampleDataResults = {
@@ -74,26 +64,27 @@ describe('Topic viewer backend API service', function() {
         skill_id_2: 'Skill Description 2'
       }
     };
-  }));
+  });
 
-  afterEach(function() {
-    $httpBackend.verifyNoOutstandingExpectation();
-    $httpBackend.verifyNoOutstandingRequest();
+  afterEach(() => {
+    httpTestingController.verify();
   });
 
   it('should successfully fetch an existing topic from the backend',
-    function() {
+    fakeAsync(() => {
       var successHandler = jasmine.createSpy('success');
       var failHandler = jasmine.createSpy('fail');
-
-      $httpBackend.expect('GET', '/topic_data_handler/0').respond(
-        sampleDataResults);
-      TopicViewerBackendApiService.fetchTopicData('0').then(
+      topicViewerBackendApiService.fetchTopicData('0').then(
         successHandler, failHandler);
-      $httpBackend.flush();
+      var req = httpTestingController.expectOne(
+        '/topic_data_handler/0');
+      expect(req.request.method).toEqual('GET');
+      req.flush(sampleDataResults);
+
+      flushMicrotasks();
 
-      expect(successHandler).toHaveBeenCalledWith(sampleDataResults);
+      expect(successHandler).toHaveBeenCalled();
       expect(failHandler).not.toHaveBeenCalled();
-    }
+    })
   );
 });

core/templates/dev/head/domain/topic_viewer/topic-viewer-backend-api.service.ts

@@ -16,38 +16,52 @@
  * @fileoverview Service to get topic data.
  */
 
-require('domain/utilities/url-interpolation.service.ts');
-
-require('domain/topic_viewer/topic-viewer-domain.constants.ajs.ts');
-
-angular.module('oppia').factory('TopicViewerBackendApiService', [
-  '$http', '$q', 'UrlInterpolationService', 'TOPIC_DATA_URL_TEMPLATE',
-  function($http, $q, UrlInterpolationService, TOPIC_DATA_URL_TEMPLATE) {
-    var topicDataDict = null;
-    var _fetchTopicData = function(topicName, successCallback, errorCallback) {
-      var topicDataUrl = UrlInterpolationService.interpolateUrl(
-        TOPIC_DATA_URL_TEMPLATE, {
-          topic_name: topicName
-        });
-
-      $http.get(topicDataUrl).then(function(response) {
-        topicDataDict = angular.copy(response.data);
+import { downgradeInjectable } from '@angular/upgrade/static';
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+import { UrlInterpolationService } from
+  'domain/utilities/url-interpolation.service';
+import { TopicViewerDomainConstants } from
+  'domain/topic_viewer/topic-viewer-domain.constants';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TopicViewerBackendApiService {
+  constructor(
+    private http: HttpClient,
+    private urlInterpolation: UrlInterpolationService) {}
+
+  private topicDataDict = null;
+  private _fetchTopicData(
+      topicName: string, successCallback: any, errorCallback: any): any {
+    var topicDataUrl = this.urlInterpolation.interpolateUrl(
+      TopicViewerDomainConstants.TOPIC_DATA_URL_TEMPLATE, {
+        topic_name: topicName
+      });
+
+    this.http.get(
+      topicDataUrl, { observe: 'response' }).toPromise().then(
+      (response) => {
+        this.topicDataDict = Object.assign({}, response.body);
         if (successCallback) {
-          successCallback(topicDataDict);
+          successCallback(this.topicDataDict);
         }
-      }, function(errorResponse) {
+      }, (errorResponse) => {
         if (errorCallback) {
-          errorCallback(errorResponse.data);
+          errorCallback(errorResponse.body);
         }
       });
-    };
-
-    return {
-      fetchTopicData: function(topicName) {
-        return $q(function(resolve, reject) {
-          _fetchTopicData(topicName, resolve, reject);
-        });
-      }
-    };
   }
-]);
+
+  fetchTopicData(topicName: string): Promise<object> {
+    return new Promise((resolve, reject) => {
+      this._fetchTopicData(topicName, resolve, reject);
+    });
+  }
+}
+
+angular.module('oppia').factory(
+  'TopicViewerBackendApiService', downgradeInjectable(
+    TopicViewerBackendApiService));

core/templates/dev/head/pages/topic-viewer-page/navbar-breadcrumb/topic-viewer-navbar-breadcrumb.directive.ts

@@ -27,14 +27,21 @@ angular.module('oppia').directive('topicViewerNavbarBreadcrumb', [
       templateUrl: UrlInterpolationService.getDirectiveTemplateUrl(
         '/pages/topic-viewer-page/navbar-breadcrumb/' +
         'topic-viewer-navbar-breadcrumb.directive.html'),
-      controller: ['$scope', 'TopicViewerBackendApiService', 'UrlService',
-        function($scope, TopicViewerBackendApiService, UrlService) {
+      controller: [
+        '$scope', '$rootScope', 'TopicViewerBackendApiService',
+        'UrlService',
+        function(
+            $scope, $rootScope, TopicViewerBackendApiService,
+            UrlService) {
           var ctrl = this;
           ctrl.$onInit = function() {
             TopicViewerBackendApiService.fetchTopicData(
               UrlService.getTopicNameFromLearnerUrl()).then(
               function(topicDataDict) {
                 $scope.topicName = topicDataDict.topic_name;
+                // TODO(#8521): Remove the use of $rootScope.$apply()
+                // once the controller is migrated to angular.
+                $rootScope.$apply();
               });
           };
         }

core/templates/dev/head/pages/topic-viewer-page/topic-viewer-page.controller.ts

@@ -73,6 +73,9 @@ angular.module('oppia').directive('topicViewerPage', [
                 ctrl.subtopics = topicDataDict.subtopics;
                 $rootScope.loadingMessage = '';
                 ctrl.topicId = topicDataDict.id;
+                // TODO(#8521): Remove the use of $rootScope.$apply()
+                // once the controller is migrated to angular.
+                $rootScope.$apply();
               },
               function(errorResponse) {
                 if (FATAL_ERROR_CODES.indexOf(errorResponse.status) !== -1) {