How to use Angular Promise using Typescript await and async (ES6)

The typescript async and await is a ES6 functionality. It used to allow the developers to write the asynchronous code to flows as a synchronous method, without write a handler or a callback function. The similar pattern was used in C# to make use of the promises.

AppService.ts

 class AppService {
     static $inject = ['$http'];
     constructor(private $http: ng.IHttpService) {
     }
 
     public getBooks() {
         var url = "http://localhost/appservice/api/books";
         return this.$http({
             method: 'GET',
             url: url,
             headers: { "Accept": "application/json; odata=verbose" }
         });
     }
 }

App.ts

 class App {
     
     public static  app: ng.IModule
     constructor() {
       
         App.app = angular.module('app', []);
         App.app.controller("homeCtrl", Home);
         App.app.service('appService', AppService);
     }
 }
 new App();
 
 class Home {
     public lstBooks: Book[];
     static $inject = ['appService'];
     constructor(private appService: AppService) {
 
     }
 public async getBooks() {
         console.log('Before');
          await this.appService.getBooks().then(books =>{
              this.lstBooks = <Book[]>books.data;
             console.log(this.lstBooks);
         });
          console.log('After');
        
 
     }
 }
 

Index.html

 <div ng-controller="homeCtrl as vm">
 	<div ng-show="vm.show">{{vm.process}}</div>
 	<table>
 		<tr>
 			<th>ID</th>
 			<th>Title</th>
 			<th>Author</th>
 		</tr>
 
 		<tr ng-repeat="book in vm.lstBooks">
 			<td>{{book.Id}}</td>
 			<td>{{book.Title}}</td>
 			<td>{{book.AuthorName}}</td>
 		</tr>
 	</table>
 	<button ng-click="vm.getBooks()" type="button">Click</button>
 </div>