So implementieren Sie den Formularassistenten mit AngularJS_AngularJS
Heute erstellen wir ein mehrstufiges Formular mit Animation mithilfe von AngularJs und dem großartigen UI Router und dem Angular ngAnimate-Modul. Diese Technik kann bei großen Formularen verwendet werden, bei denen Sie die Benutzervorgänge vereinfachen möchten.
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.
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-zahlung.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.
// app.js
// create our angular app and inject ngAnimate and ui-router
// =============================================================================
angular.module('formApp', ['ngAnimate', 'ui.router'])
// configuring our routes
// =============================================================================
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// route to show our basic form (/form)
.state('form', {
url: '/form',
templateUrl: 'form.html',
controller: 'formController'
})
// nested states
// each of these sections will have their own view
// url will be nested (/form/profile)
.state('form.profile', {
url: '/profile',
templateUrl: 'form-profile.html'
})
// url will be /form/interests
.state('form.interests', {
url: '/interests',
templateUrl: 'form-interests.html'
})
// url will be /form/payment
.state('form.payment', {
url: '/payment',
templateUrl: 'form-payment.html'
});
// catch all route
// send users to the form page
$urlRouterProvider.otherwise('/form/profile');
})
// our controller for the form
// =============================================================================
.controller('formController', function($scope) {
// we will store all of our form data in this object
$scope.formData = {};
// function to process the form
$scope.processForm = function() {
alert('awesome!');
};
});
Jetzt haben wir eine Anwendung mit ngAnimate und ui.router injiziert. 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.
Formularvorlagenansicht form.html
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 }}
注意我们是如何第二次在项目中使用ui-view的。这就是UI Router伟大的地方：我们可以嵌套声明和视图。这能够在我们开发应用时提供给我们非常多的灵活性。关于UI Router视图的内容，请参见官方文档。
添加基于状态的激活类
我们希望每一个状态按钮能够在他们被激活时展示。为了达到这个效果，我们将会使用UI Router提供的ui-sref-active。如果ui-sref和当前状态一致，则会添加我们指定的类。
现在，你可能想知道我们的表单究竟看起来是什么样子。让我们打开浏览器看一眼。
目前为止，我们并没有完全按照希望的那样得到所有的内容，但是这是一系列伟大事情的开端。让我们继续前进，添加一点样式，之后会添加一些嵌入视图和注释。
基础Stylingstyle.css
我们将设计我们的form-container和status-buttons来是我们的表单看起来更好。
/* 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?</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>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数据绑定。
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
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1376
52
So implementieren Sie einen Seitensprung nach der Übermittlung eines PHP-Formulars
Aug 12, 2023 am 11:30 AM
So implementieren Sie einen Seitensprung nach der PHP-Formularübermittlung [Einführung] In der Webentwicklung ist die Formularübermittlung eine häufige Funktionsanforderung. Nachdem der Benutzer das Formular ausgefüllt und auf die Schaltfläche „Senden“ geklickt hat, müssen die Formulardaten normalerweise zur Verarbeitung an den Server gesendet werden, und der Benutzer wird nach der Verarbeitung auf eine andere Seite weitergeleitet. In diesem Artikel wird erläutert, wie Sie mit PHP einen Seitensprung nach der Formularübermittlung implementieren. [Schritt 1: HTML-Formular] Zuerst müssen wir eine Seite mit einem Formular in einer HTML-Seite schreiben, damit Benutzer die Daten eingeben können, die übermittelt werden müssen.
Wie realisiert man mit JavaScript die automatische Eingabeaufforderungsfunktion für den Inhalt des Eingabefelds des Formulars?
Oct 20, 2023 pm 04:01 PM
Wie realisiert man mit JavaScript die automatische Eingabeaufforderungsfunktion für den Inhalt des Eingabefelds des Formulars? Einführung: Die automatische Eingabeaufforderungsfunktion für den Inhalt des Formulareingabefelds ist in Webanwendungen weit verbreitet. Sie kann Benutzern dabei helfen, schnell den richtigen Inhalt einzugeben. In diesem Artikel wird erläutert, wie Sie diese Funktion mithilfe von JavaScript erreichen, und es werden spezifische Codebeispiele bereitgestellt. Erstellen Sie die HTML-Struktur. Zuerst müssen wir eine HTML-Struktur erstellen, die das Eingabefeld und die Liste der automatischen Vorschläge enthält. Sie können den folgenden Code verwenden: <!DOCTYP
Umgang mit der Benutzerrechteverwaltung in PHP-Formularen
Aug 10, 2023 pm 01:06 PM
Umgang mit der Benutzerrechteverwaltung in PHP-Formularen Bei der kontinuierlichen Weiterentwicklung von Webanwendungen ist die Benutzerrechteverwaltung eine der wichtigen Funktionen. Durch die Benutzerrechteverwaltung können die Bedienrechte der Benutzer in Anwendungen gesteuert und die Sicherheit und Rechtmäßigkeit der Daten gewährleistet werden. In PHP-Formularen kann die Benutzerrechteverwaltung durch einfachen Code implementiert werden. In diesem Artikel wird der Umgang mit der Benutzerrechteverwaltung in PHP-Formularen vorgestellt und entsprechende Codebeispiele gegeben. 1. Definition und Verwaltung von Benutzerrollen Die Definition und Verwaltung von Benutzerrollen ist zunächst eine Frage der Benutzerrechte.
Wie implementiert man mit JavaScript eine Echtzeitüberprüfung des Eingabefeldinhalts eines Formulars?
Oct 18, 2023 am 08:47 AM
Wie implementiert man mit JavaScript eine Echtzeitüberprüfung des Eingabefeldinhalts eines Formulars? In vielen Webanwendungen sind Formulare die häufigste Art der Interaktion zwischen Benutzern und dem System. Allerdings müssen die vom Benutzer eingegebenen Inhalte häufig validiert werden, um die Richtigkeit und Vollständigkeit der Daten sicherzustellen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript eine Echtzeitüberprüfung des Inhalts des Eingabefelds des Formulars implementieren und stellen spezifische Codebeispiele bereit. Erstellen des Formulars Zuerst müssen wir eine einfache Tabelle in HTML erstellen
So nutzen Sie HTML, CSS und jQuery, um die erweiterte Funktion des automatischen Speicherns von Formularen zu realisieren
Oct 28, 2023 am 08:20 AM
Verwendung von HTML, CSS und jQuery zur Implementierung der erweiterten Funktion des automatischen Speicherns von Formularen. Formulare sind eines der häufigsten Elemente in modernen Webanwendungen. Wenn Benutzer Formulardaten eingeben, kann die Implementierung der automatischen Speicherfunktion nicht nur die Benutzererfahrung verbessern, sondern auch die Datensicherheit gewährleisten. In diesem Artikel wird erläutert, wie Sie mithilfe von HTML, CSS und jQuery die automatische Speicherfunktion des Formulars implementieren und spezifische Codebeispiele anhängen. 1. Struktur des HTML-Formulars Erstellen wir zunächst ein einfaches HTML-Formular.
PHP-Formularverarbeitung: Abfrage und Filterung von Formulardaten
Aug 07, 2023 pm 06:17 PM
PHP-Formularverarbeitung: Formulardatenabfrage und -filterung Einführung In der Webentwicklung sind Formulare eine wichtige Möglichkeit der Interaktion. Benutzer können Daten über Formulare zur weiteren Verarbeitung an den Server senden. In diesem Artikel wird erläutert, wie Sie mit PHP die Abfrage- und Filterfunktionen von Formulardaten verarbeiten. Formularentwurf und -übermittlung Zunächst müssen wir ein Formular entwerfen, das Abfrage- und Filterfunktionen enthält. Zu den gängigen Formularelementen gehören Eingabefelder, Dropdown-Listen, Optionsfelder, Kontrollkästchen usw., die je nach Bedarf gestaltet werden können. Wenn der Benutzer das Formular absendet, werden die Daten an POS gesendet
Tipps zur Verwendung von Laravel-Formularklassen: Möglichkeiten zur Verbesserung der Effizienz
Mar 11, 2024 pm 12:51 PM
Formulare sind ein wesentlicher Bestandteil beim Schreiben einer Website oder Bewerbung. Laravel bietet als beliebtes PHP-Framework umfangreiche und leistungsstarke Formularklassen, die die Formularverarbeitung einfacher und effizienter machen. In diesem Artikel werden einige Tipps zur Verwendung von Laravel-Formularklassen vorgestellt, die Ihnen dabei helfen, die Entwicklungseffizienz zu verbessern. Im Folgenden wird anhand spezifischer Codebeispiele ausführlich erläutert. Erstellen eines Formulars Um ein Formular in Laravel zu erstellen, müssen Sie zunächst das entsprechende HTML-Formular in die Ansicht schreiben. Wenn Sie mit Formularen arbeiten, können Sie Laravel verwenden
Die neuesten 5 AngularJS-Tutorials im Jahr 2022, vom Einstieg bis zur Beherrschung
Jun 15, 2017 pm 05:50 PM
Javascript ist eine sehr einzigartige Sprache, was die Organisation des Codes, das Programmierparadigma des Codes und die objektorientierte Theorie betrifft. Die Frage, ob Javascript eine objektorientierte Sprache ist, wird seit langem diskutiert Es gibt offensichtlich schon seit langem eine Antwort. Auch wenn Javascript seit zwanzig Jahren vorherrscht, schauen Sie sich einfach das „Black Horse Cloud Classroom JavaScript Advanced Framework“ an, wenn Sie beliebte Frameworks wie jQuery, Angularjs und sogar React verstehen möchten Design-Video-Tutorial“.
