AngularJS verwendet UI Router, um das Formular Wizard_AngularJS zu implementieren-js-Tutorial-php.cn

AngularJS verwendet UI Router, um das Formular Wizard_AngularJS zu implementieren

WBOY

Freigeben： 2016-05-16 15:16:52

Original

1233 Leute haben es durchsucht

Wir haben gesehen, dass diese Technologie auf viele Webseiten angewendet wurde. Dinge wie Einkaufswagen, Registrierungsformulare, Onboarding-Abläufe und viele mehrstufige Formulare erleichtern Benutzern das Online-Ausfüllen von Formularen.

Hier werden wir es bauen:

Mithilfe des UI Routers, der Zustände einbetten und unterschiedliche Ansichten für jeden Zustand anzeigen kann, können wir mehrstufige Formulare ganz einfach erstellen.

Um schnell zu verstehen, wie UI Router funktioniert, lesen Sie unseren Artikel: AngularJS verwendet UI-Router-Routing

Lasst uns zur Sache kommen und anfangen, unsere bisher beste Form zu erreichen!

Projekt erstellen

Das Erstellen eines Projekts erfordert eine Layoutdatei, eine Ansichtsdatei für jedes Formular, eine Formatdatei und eine JavaScript-Datei.

Das Folgende ist die Dateiliste. Erstellen Sie sie zuerst und geben Sie dann den Inhalt ein

- index.html
- form.html
- form-profile.html
- form-interests.html
- form-payment.html
- app.js
- style.css

Nach dem Login kopieren

Jedes form-____.html stellt eine HTML-Datei in einer hierarchischen Struktur dar. Diese Strukturen bilden letztendlich unsere Formularstruktur.

Unsere Layout-/Vorlagendatei index.html

Wir beginnen unser Projekt mit der Erstellung einer Hauptdatei, um alle benötigten Ressourcen einzuführen. Hier verwenden wir die Datei index.html als Hauptdatei

Jetzt laden wir die benötigten Ressourcen (AngularJS, ngAnimate, Ui Router und andere Skripte und Stylesheets) und richten eine UI-Ansicht ein, um dem UI-Router mitzuteilen, wo unsere Ansicht angezeigt werden muss. Hier verwenden wir Bootstrap, um Stile schnell anzuwenden.

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- CSS -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/darkly/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
  <!-- JS -->
  <!-- load angular, nganimate, and ui-router -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js"></script>
  <script src="app.js"></script>
</head>
<!-- apply our angular app -->
<body ng-app="formApp">
  <div class="container">
    <!-- views will be injected here -->
    <div ui-view></div>
  </div>
</body>
</html>

Nach dem Login kopieren

Nachdem wir die Einführung aller Dateien abgeschlossen haben, geben wir app.js ein, um mit der Erstellung der Angular-Anwendung und der grundlegendsten Routing-Konfiguration zu beginnen. Beachten Sie, wie wir die Angular App (formApp) auf den Körper angewendet haben.

Erstellen Sie unsere Angular App app.js

Jetzt erstellen wir die Anwendung und Routen. In einer großen Anwendung würden Sie Ihre Angular-Anwendungen, Routen und Controller auf jeden Fall in ihre eigenen Module verteilen wollen, aber für unseren einfachen Anwendungsfall werden wir sie alle in die glückliche Familie der app.js-Mitte packen.

Jetzt haben wir eine Anwendung, in die ngAnimate und ui.router eingefügt wurden. Wir haben auch entsprechende Routen eingerichtet. Beachten Sie, wie wir die URL, die Ansichtsdatei (templateUrl) und den Controller für jeden Ansichtsbereich definieren.

Das Formular wird unser Hauptansichtsbereich sein. Es gibt auch einen Unteransichtsbereich form.profile, der durch getrennt ist. Diese Idee kann umgesetzt werden, wenn sich der Anwendungsstatus ändert (Übersetzer: Routing, QueryString usw.) und die Unteransicht im Hauptansichtsbereich angezeigt wird. (Übersetzer: Und es kann nur die Änderungen des Unteransichtsbereichs aktualisieren und den Status des Unteransichtsbereichs aufzeichnen.)

Wir werden dies im nächsten Abschnitt demonstrieren. Jetzt müssen wir Ansichten für das Formular und seine Unteransichtsbereiche erstellen.

Beginnen wir mit der Erstellung einer neuen form.html. Diese Datei dient als Vorlage für den Rest unserer Formularansichtsdateien, genauso wie index.html als Gesamtvorlage für das gesamte Projekt verwendet wird. Wir müssen lediglich ui-view in diese Datei einbinden, damit die verschachtelten Deklarationen wissen, wo sie ihre Ansichten einfügen müssen.

<!-- form.html -->
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
  <div id="form-container">
    <div class="page-header text-center">
      <h2>Let's Be Friends</h2>
      <!-- the links to our nested states using relative paths -->
      <!-- add the active class if the state matches our ui-sref -->
      <div id="status-buttons" class="text-center">
        <a ui-sref-active="active" ui-sref=".profile"><span>1</span> Profile</a>
        <a ui-sref-active="active" ui-sref=".interests"><span>2</span> Interests</a>
        <a ui-sref-active="active" ui-sref=".payment"><span>3</span> Payment</a>
      </div>
    </div>
    <!-- use ng-submit to catch the form submission and use our Angular function -->
    <form id="signup-form" ng-submit="processForm()">
      <!-- our nested state views will be injected here -->
      <div id="form-views" ui-view></div>
    </form>
  </div>
  <!-- show our formData as it is being typed -->
  <pre class="brush:php;toolbar:false">
    {{ formData }}

Nach dem Login kopieren

/* style.css */ /* BASIC STYLINGS ============================================================================= */ body { padding-top:20px; } /* form styling */ #form-container { background:#2f2f2f; margin-bottom:20px; border-radius:5px; } #form-container .page-header { background:#151515; margin:0; padding:30px; border-top-left-radius:5px; border-top-right-radius:5px; } /* numbered buttons */ #status-buttons { } #status-buttons a { color:#FFF; display:inline-block; font-size:12px; margin-right:10px; text-align:center; text-transform:uppercase; } #status-buttons a:hover { text-decoration:none; } /* we will style the span as the circled number */ #status-buttons span { background:#080808; display:block; height:30px; margin:0 auto 10px; padding-top:5px; width:30px; border-radius:50%; } /* active buttons turn light green-blue*/ #status-buttons a.active span { background:#00BC8C; }

<div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" name="name" ng-model="formData.name"> </div> <div class="form-group"> <label for="email">Email</label> <input type="text" class="form-control" name="email" ng-model="formData.email"> </div> <div class="form-group row"> <div class="col-xs-6 col-xs-offset-3"> <a ui-sref="form.interests" class="btn btn-block btn-info"> Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span> </a> </div> </div>

<label>What's Your Console of Choice?</label> <div class="form-group"> <div class="radio"> <label> <input type="radio" ng-model="formData.type" value="xbox" checked> I like XBOX </label> </div> <div class="radio"> <label> <input type="radio" ng-model="formData.type" value="ps"> I like PS4 </label> </div> </div> <div class="form-group row"> <div class="col-xs-6 col-xs-offset-3"> <a ui-sref="form.payment" class="btn btn-block btn-info"> Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span> </a> </div> </div>

<div class="text-center"> <span class="glyphicon glyphicon-heart"></span> <h3>Thanks For Your Money!</h3> <button type="submit" class="btn btn-danger">Submit</button> </div>

/* style.css */ /* ANIMATION STYLINGS ============================================================================= */ #signup-form { position:relative; min-height:300px; overflow:hidden; padding:30px; } #form-views { width:auto; } /* basic styling for entering and leaving */ /* left and right added to ensure full width */ #form-views.ng-enter, #form-views.ng-leave { position:absolute; left:30px; right:30px; transition:0.5s all ease; -moz-transition:0.5s all ease; -webkit-transition:0.5s all ease; } /* enter animation */ #form-views.ng-enter { -webkit-animation:slideInRight 0.5s both ease; -moz-animation:slideInRight 0.5s both ease; animation:slideInRight 0.5s both ease; } /* leave animation */ #form-views.ng-leave { -webkit-animation:slideOutLeft 0.5s both ease; -moz-animation:slideOutLeft 0.5s both ease; animation:slideOutLeft 0.5s both ease; } /* ANIMATIONS ============================================================================= */ /* slide out to the left */ @keyframes slideOutLeft { to { transform: translateX(-200%); } } @-moz-keyframes slideOutLeft { to { -moz-transform: translateX(-200%); } } @-webkit-keyframes slideOutLeft { to { -webkit-transform: translateX(-200%); } } /* slide in from the right */ @keyframes slideInRight { from { transform:translateX(200%); } to { transform: translateX(0); } } @-moz-keyframes slideInRight { from { -moz-transform:translateX(200%); } to { -moz-transform: translateX(0); } } @-webkit-keyframes slideInRight { from { -webkit-transform:translateX(200%); } to { -webkit-transform: translateX(0); } }