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

Heim

Web-Frontend

js-Tutorial

AngularJS verwendet UI Router, um das Formular Wizard_AngularJS zu implementieren

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:16 PM

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

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>

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 id="Let-s-Be-Friends">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 }}

Beachten Sie, wie wir ui-view zum zweiten Mal im Projekt verwenden. Das ist das Tolle am UI Router: Wir können Deklarationen und Ansichten verschachteln. Dies gibt uns viel Flexibilität bei der Entwicklung von Anwendungen. Den Inhalt der UI-Router-Ansicht finden Sie in der offiziellen Dokumentation.

Statusbasierte Aktivierungsklasse hinzufügen

Wir möchten, dass jede Statusschaltfläche angezeigt wird, wenn sie aktiviert ist. Um diesen Effekt zu erzielen, verwenden wir ui-sref-active, das von UI Router bereitgestellt wird. Wenn ui-sref mit dem aktuellen Status übereinstimmt, wird die von uns angegebene Klasse hinzugefügt.

Informationen zum Hinzufügen einer Validierung zu Ihren eigenen Formularen finden Sie unter AngularJS-Formularvalidierung.

Jetzt fragen Sie sich vielleicht, wie unser Formular eigentlich aussieht. Öffnen wir einen Browser und werfen einen Blick darauf.

Bisher bekommen wir nicht alles genau so, wie wir es uns erhofft hatten, aber es ist der Beginn einer Reihe großartiger Dinge. Lassen Sie uns fortfahren und ein wenig Stil hinzufügen. Später fügen wir einige eingebettete Ansichten und Kommentare hinzu.

Basic Stylingstyle.css

Wir werden unseren Formularcontainer und unsere Statusschaltflächen so gestalten, dass unser Formular besser aussieht.

/* 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; }

现在我们的按钮更好看了并且更符合我们想要的了，接下来我们看下嵌套视图。

嵌套视图form-profile.html, form-interests.html, form-payment.html

这部分会比较简单。我们将定义不同的带有我们需要的输入框的视图。并且将他们绑定到formData对象以便我们能看到输入的数据。

下面是我们用于嵌套视图的视图文件：

表单概要视图

<!-- form-profile.html -->
<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>

表单兴趣视图

<!-- form-interests.html -->
<label>What's Your Console of Choice&#63;</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>

表单支付视图

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

既然我们已经定义了这些视图，那么当我们浏览表单时，他们就会显示出来。同样我们用下一个按钮和ui-sref来连接每一个新视图.

当使用ui-sref时，你要连接到你路由中定义的state而不是URL。然后Angular会使用这个来为你构建href。

下面是我们表单目前的每一个页面。

为了让我们的页面不同寻常，让我们加上动画效果。

让我们的表单产生动画效果

因为在项目开始的时候，我们已经加载了ngAnimate，它已经添加到需要动画的的类上了。当视图进入或退出的时候，它将自动添加类ng-enter和ng-leave。

现在我们所有做的就是通过样式形成我们最终的表单。为了理解Angular动画，这篇文章是一个很好的起点。

让我们进去css文件，将动画，并应用到我们的表单上

/* 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); }
}

首先，确定视图离开或进去时，表单的样式，他们是绝对定位的。需要确认当视图进入的时候一个视图不会放到另一个视图的下面。

其次，应用我们的动画到.ng-enter和.ng-leave类

第三，用@keyframes定义动画。所有这些部分组合到一起，我们的表单就有了Angular动画，基于状态的UI Router和Angular数据绑定。

以上所述是小编给大家分享的AngularJS 使用 UI Router 实现表单向导的相关知识，希望对大家有所帮助。

Stellungnahme

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Verwandter Artikel

Ist JavaScript in C geschrieben? Prüfung der BeweiseApr 25, 2025 am 12:15 AM

Ja, der Motorkern von JavaScript ist in C. 1) Die C -Sprache bietet eine effiziente Leistung und die zugrunde liegende Steuerung, die für die Entwicklung der JavaScript -Engine geeignet ist. 2) Die V8-Engine als Beispiel wird sein Kern in C geschrieben, wobei die Effizienz und objektorientierte Eigenschaften von C kombiniert werden.

JavaScripts Rolle: das Web interaktiv und dynamisch machenApr 24, 2025 am 12:12 AM

JavaScript ist das Herzstück moderner Websites, da es die Interaktivität und Dynamik von Webseiten verbessert. 1) Es ermöglicht die Änderung von Inhalten, ohne die Seite zu aktualisieren, 2) Webseiten durch DOMAPI zu manipulieren, 3) Komplexe interaktive Effekte wie Animation und Drag & Drop, 4) die Leistung und Best Practices optimieren, um die Benutzererfahrung zu verbessern.

C und JavaScript: Die Verbindung erklärteApr 23, 2025 am 12:07 AM

C und JavaScript erreichen die Interoperabilität durch WebAssembly. 1) C -Code wird in das WebAssembly -Modul zusammengestellt und in die JavaScript -Umgebung eingeführt, um die Rechenleistung zu verbessern. 2) In der Spieleentwicklung kümmert sich C über Physik -Engines und Grafikwiedergabe, und JavaScript ist für die Spiellogik und die Benutzeroberfläche verantwortlich.

Von Websites zu Apps: Die verschiedenen Anwendungen von JavaScriptApr 22, 2025 am 12:02 AM

JavaScript wird in Websites, mobilen Anwendungen, Desktop-Anwendungen und serverseitigen Programmierungen häufig verwendet. 1) In der Website -Entwicklung betreibt JavaScript DOM zusammen mit HTML und CSS, um dynamische Effekte zu erzielen und Frameworks wie JQuery und React zu unterstützen. 2) Durch reaktnatives und ionisches JavaScript wird ein plattformübergreifendes mobile Anwendungen entwickelt. 3) Mit dem Elektronenframework können JavaScript Desktop -Anwendungen erstellen. 4) Node.js ermöglicht es JavaScript, auf der Serverseite auszuführen und unterstützt hohe gleichzeitige Anforderungen.

Python gegen JavaScript: Anwendungsfälle und Anwendungen verglichenApr 21, 2025 am 12:01 AM

Python eignet sich besser für Datenwissenschaft und Automatisierung, während JavaScript besser für die Entwicklung von Front-End- und Vollstapel geeignet ist. 1. Python funktioniert in Datenwissenschaft und maschinellem Lernen gut und unter Verwendung von Bibliotheken wie Numpy und Pandas für die Datenverarbeitung und -modellierung. 2. Python ist prägnant und effizient in der Automatisierung und Skripten. 3. JavaScript ist in der Front-End-Entwicklung unverzichtbar und wird verwendet, um dynamische Webseiten und einseitige Anwendungen zu erstellen. 4. JavaScript spielt eine Rolle bei der Back-End-Entwicklung durch Node.js und unterstützt die Entwicklung der Vollstapel.

Die Rolle von C/C bei JavaScript -Dolmetschern und CompilernApr 20, 2025 am 12:01 AM

C und C spielen eine wichtige Rolle in der JavaScript -Engine, die hauptsächlich zur Implementierung von Dolmetschern und JIT -Compilern verwendet wird. 1) C wird verwendet, um JavaScript -Quellcode zu analysieren und einen abstrakten Syntaxbaum zu generieren. 2) C ist für die Generierung und Ausführung von Bytecode verantwortlich. 3) C implementiert den JIT-Compiler, optimiert und kompiliert Hot-Spot-Code zur Laufzeit und verbessert die Ausführungseffizienz von JavaScript erheblich.

JavaScript in Aktion: Beispiele und Projekte in realer WeltApr 19, 2025 am 12:13 AM

Die Anwendung von JavaScript in der realen Welt umfasst Front-End- und Back-End-Entwicklung. 1) Zeigen Sie Front-End-Anwendungen an, indem Sie eine TODO-Listanwendung erstellen, die DOM-Operationen und Ereignisverarbeitung umfasst. 2) Erstellen Sie RESTFUFFUPI über Node.js und express, um Back-End-Anwendungen zu demonstrieren.

JavaScript und das Web: Kernfunktionalität und AnwendungsfälleApr 18, 2025 am 12:19 AM

Zu den Hauptanwendungen von JavaScript in der Webentwicklung gehören die Interaktion der Clients, die Formüberprüfung und die asynchrone Kommunikation. 1) Dynamisches Inhaltsaktualisierung und Benutzerinteraktion durch DOM -Operationen; 2) Die Kundenüberprüfung erfolgt vor dem Einreichung von Daten, um die Benutzererfahrung zu verbessern. 3) Die Aktualisierung der Kommunikation mit dem Server wird durch AJAX -Technologie erreicht.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Assassin's Creed Shadows: Seashell Riddle -Lösung

4 Wochen vorByDDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

3 Wochen vorByDDD

Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden

4 Wochen vorByDDD

<🎜>: Dead Rails - wie man jede Herausforderung abschließt

1 Monate vorByDDD

Atomfall Guide: Gegenstandsstandorte, Questführer und Tipps

1 Monate vorByDDD

Heiße Werkzeuge

mPDF

mPDF ist eine PHP-Bibliothek, die PDF-Dateien aus UTF-8-codiertem HTML generieren kann. Der ursprüngliche Autor, Ian Back, hat mPDF geschrieben, um PDF-Dateien „on the fly“ von seiner Website auszugeben und verschiedene Sprachen zu verarbeiten. Es ist langsamer und erzeugt bei der Verwendung von Unicode-Schriftarten größere Dateien als Originalskripte wie HTML2FPDF, unterstützt aber CSS-Stile usw. und verfügt über viele Verbesserungen. Unterstützt fast alle Sprachen, einschließlich RTL (Arabisch und Hebräisch) und CJK (Chinesisch, Japanisch und Koreanisch). Unterstützt verschachtelte Elemente auf Blockebene (wie P, DIV),