title: Loading screen in Angular 2
body: <p>I'd like to implement pre-bootstrap loading screen in Angular2 project. I found several samples for Angular1. For example, this one:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;title&gt;
      Creating A Pre-Bootstrap Loading Screen In AngularJS
  &lt;/title&gt;
  &lt;/head&gt;
  &lt;body ng-controller="AppController"&gt;
  &lt;div class="m-app-loading" ng-animate-children&gt;
      &lt;style type="text/css"&gt;
          some styling...
      &lt;/style&gt;
      &lt;!-- BEGIN: Actual animated container. --&gt;
      &lt;div class="animated-container"&gt;
          &lt;div class="messaging"&gt;
              &lt;h1&gt;
                  App is Loading
              &lt;/h1&gt;
              &lt;p&gt;
                  Please stand by for your ticket to awesome-town!
              &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- END: Actual animated container. --&gt;
  &lt;/div&gt;
  &lt;!-- END: App-Loading Screen. --&gt;
  &lt;h1&gt;
      Creating A Pre-Bootstrap Loading Screen In AngularJS
  &lt;/h1&gt;
  &lt;p&gt;
      You have {{ friends.length }} friends:
  &lt;/p&gt;
  &lt;ul&gt;
      &lt;li ng-repeat="friend in friends"&gt;
          {{ friend }}
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;script type="text/javascript" src="../../vendor/angularjs/angular-1.3.8.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../../vendor/angularjs/angular-animate-1.3.8.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      var app = angular.module( "Demo", [ "ngAnimate" ] );
      setTimeout(
          function asyncBootstrap() {
              angular.bootstrap( document, [ "Demo" ] );
          },
          ( 2 * 1000 )
          );
      app.controller(
          "AppController",
          function( $scope ) {
              console.log( "App Loaded!", $scope );
              $scope.friends = [ "Kim", "Sarah", "Tricia" ];
          }
          );
      app.directive(
          "mAppLoading",
          function( $animate ) {
              return({
                  link: link,
                  restrict: "C"
              });
              function link( scope, element, attributes ) {
                  $animate.leave( element.children().eq( 1 ) ).then(
                      function cleanupAfterAnimation() {
                          element.remove();
                          scope = element = attributes = null;
                      }
                      );
              }
          }
          );
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>There is a <a href="http://bennadel.github.io/JavaScript-Demos/demos/pre-bootstrap-loading-screen-angularjs/" rel="nofollow">demo</a>. I'm getting in trouble because I've started learning Angular 2 recently, and don't know Angular 1. How to "convert" this JS code to TS? Thanks!</p>