Question

我想在Angular2项目中实现pre-bootstrap加载屏幕。我找到了Angular1的几个样本。例如，这一个：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>
    Creating A Pre-Bootstrap Loading Screen In AngularJS
</title>
</head>
<body ng-controller="AppController">
<div class="m-app-loading" ng-animate-children>
    <style type="text/css">
        some styling...
    </style>
    <!-- BEGIN: Actual animated container. -->
    <div class="animated-container">
        <div class="messaging">
            <h1>
                App is Loading
            </h1>
            <p>
                Please stand by for your ticket to awesome-town!
            </p>
        </div>
    </div>
    <!-- END: Actual animated container. -->
</div>
<!-- END: App-Loading Screen. -->
<h1>
    Creating A Pre-Bootstrap Loading Screen In AngularJS
</h1>
<p>
    You have {{ friends.length }} friends:
</p>
<ul>
    <li ng-repeat="friend in friends">
        {{ friend }}
    </li>
</ul>
<script type="text/javascript" src="../../vendor/angularjs/angular-1.3.8.min.js"></script>
<script type="text/javascript" src="../../vendor/angularjs/angular-animate-1.3.8.min.js"></script>
<script type="text/javascript">
    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;
                    }
                    );
            }
        }
        );
</script>
</body>
</html>

有一个demo。我遇到了麻烦，因为我最近开始学习Angular 2，并且不知道Angular 1.如何将这个JS代码“转换”为TS？谢谢！

Answer 1

这里没有任何与TypeScript相关的内容。只需在index.html页面的主要组件中添加您的加载内容即可。当Angular2评估组件时，此内容将替换为组件模板中的内容。

以下是index.html页面的示例内容：

<!DOCTYPE html>
<html>
  <head>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <title>Angular 2 app</title>
    <script src="/lib/system.js"></script>
    <script src="/lib/typescript.js"></script>
    <script src="/lib/angular2-polyfills.js"></script>
    <script src="/lib/Rx.js"></script>
    <script src="/lib/angular2.dev.js"></script>
    <script src="/lib/router.dev.js"></script>
    <script src="/lib/http.dev.js"></script>
    <script>
      System.config({
        (...)
      });
      System.import('src/boot')
            .then(null, console.error.bind(console));
    </script>
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

在这种情况下，<my-app>只对应于应用程序的主要组件，即您提供给bootstrap函数的组件：

import {MyApp} from './my-app';

bootstrap(MyApp, []);

希望它可以帮到你，亨利

在Angular 2中加载屏幕

1 个答案: