Lade-Bildschirm im Winkel 2

Ich würde gerne verwirklichen pre-bootstrap-loading-Bildschirm in Angular2 Projekt. Ich habe mehrere Proben für Angular1. Zum Beispiel dieses:

<!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>

Es ist ein demo. Ich bin immer in Schwierigkeiten, weil ich habe angefangen zu lernen, Eckig 2 vor kurzem, und nicht weiß, Eckig 1. Wie "konvertieren" diese JS-code zu TS? Danke!

JS-code fast jedes mal, wenn eine gültige TS-code. Es geht nicht um das konvertieren JS, TS. Es ist eher zum konvertieren von Winkel zu Winkel 2.
Sie haben eine ähnliche Frage hier und Lösung von mir hier eine stackoverflow.com/questions/35243443/...
Lösung hier: stackoverflow.com/questions/35243443/...

InformationsquelleAutor Nursultan Bagidolla | 2015-12-23

  1. 2

    Gibt es hier nichts bezüglich Typoskript. Fügen Sie einfach Ihre Inhalte zu laden, die innerhalb der main Komponente innerhalb des index.html Seite. Wenn die Komponente bewertet, indem Angular2, dieser Inhalt wird ersetzt durch die von der Komponente template.

    Hier ist eine Beispiel-Inhalt einer index.html Seite:

    <!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>

    In diesem Fall <my-app> einfach, entspricht der Hauptbestandteil Ihrer Anwendung, die Sie bereitstellen, um die bootstrap Funktion:

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

bootstrap(MyApp, []);

    Hoffe es hilft dir,
    Thierry

    Dang , fühlte mich blöd jetzt.. habe versucht, alle Arten von *ngIf="false" etc etc, aber natürlich, das hat nicht funktioniert.. dein Vorschlag hat.. danke nochmal
    Ich bin vor der gleichen Anforderung (Angular2 lade-Bildschirm) Können Sie ein komplettes Beispiel, wie Sie diese arbeiten? Dank
    In der Tat, alles ist da 😉 Wenn Sie Interesse haben, könnten Sie einen Blick auf dieses Beispiel: github.com/restlet/restlet-sample-angular2 und der entsprechende Artikel: restlet.com/blog/2015/12/30/...
    Ich weiß, das ist eine alte Frage, aber ich kann nicht herausfinden, wie es Stil ein bisschen mehr. Ich möchte ein full-screen-Sache, aber um das zu tun müsste ich den Stil der body, html und auch die my-app element. Ist das eine normale Lösung?

    InformationsquelleAutor Thierry Templier

Schreibe einen Kommentar