AngularJS_AngularJS를 사용하여 양식 마법사를 구현하는 방법
- WBOY원래의
- 2016-05-16 15:53:431489검색
오늘은 AngularJ와 훌륭한 UI 라우터 및 Angular ngAnimate 모듈을 사용하여 애니메이션이 포함된 다단계 양식을 만들어 보겠습니다. 이 기술은 사용자 작업을 단순화하려는 대규모 양식에 사용할 수 있습니다.
우리는 이 기술이 많은 웹페이지에 적용되는 것을 보았습니다. 장바구니, 등록 양식, 온보딩 흐름, 다양한 다단계 양식 등을 통해 사용자는 온라인에서 양식을 더 쉽게 작성할 수 있습니다.
여기서 구축하겠습니다.
상태를 포함하고 각 상태에 대해 서로 다른 보기를 표시할 수 있는 UI Router를 사용하면 다단계 양식을 매우 쉽게 만들 수 있습니다.
본격적으로 시작해 최고의 형태를 만들어 봅시다!
프로젝트 만들기
프로젝트를 생성하려면 레이아웃 파일, 각 폼별 뷰 파일, 포맷 파일, 자바스크립트 파일이 필요합니다.
다음은 파일 목록입니다. 먼저 생성한 후 내용을 채워주세요
- - index.html
- - form.html
- - form-profile.html
- - form-interests.html
- - form-결제.html
- -app.js
- - style.css
각 양식-____.html은 계층 구조의 HTML 파일을 나타냅니다. 이러한 구조는 궁극적으로 양식 구조를 만듭니다.
레이아웃/템플릿 파일 index.html
필요한 모든 리소스를 소개하는 메인 파일을 생성하여 프로젝트를 시작합니다. 여기서는 index.html 파일을 메인 파일로 사용합니다.
이제 필요한 리소스(AngularJS, ngAnimate, Ui Router 및 기타 스크립트와 스타일시트)를 로드하고 ui-view를 설정하여 뷰가 표시되어야 하는 위치를 UI Router에 알려줍니다. 여기서는 Bootstrap을 사용하여 스타일을 빠르게 적용합니다.
<!-- 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>
모든 파일 소개를 마친 후 app.js를 입력하여 Angular 애플리케이션 생성과 가장 기본적인 라우팅 구성을 시작하겠습니다. Angular 앱(formApp)을 본문에 어떻게 적용했는지 확인하세요.
Angular 앱 app.js 만들기
이제 애플리케이션과 경로를 만들어 보겠습니다. 대규모 애플리케이션에서는 분명히 Angular 애플리케이션, 경로 및 컨트롤러를 자체 모듈에 배포하고 싶지만 간단한 사용 사례에서는 이들을 모두 app.js 중간이라는 행복한 제품군에 넣을 것입니다.
// 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!');
};
});
이제 ngAnimate와 ui.router가 삽입된 애플리케이션이 생겼습니다. 우리는 또한 해당 경로를 설정했습니다. 각 보기 영역에 대한 URL, 보기 파일(templateUrl) 및 컨트롤러를 어떻게 정의하는지 확인하세요.
양식이 기본 보기 영역이 됩니다. 또한 로 구분된 하위 뷰 영역 form.profile이 있습니다. 이 아이디어는 애플리케이션 상태가 변경되면(번역기: 라우팅, queryString 등일 수 있음) 실현될 수 있으며, 하위 뷰는 기본 뷰 영역에 표시됩니다. (번역자: 그리고 하위 보기 영역 변경 사항만 업데이트하고 하위 보기 영역 상태를 기록할 수 있습니다).
다음 섹션에서 이에 대해 설명하겠습니다. 이제 양식과 해당 하위 뷰 영역에 대한 뷰를 만들어야 합니다.
양식 템플릿 보기 form.html
새 form.html을 만들어 시작해 보겠습니다. index.html이 전체 프로젝트의 전체 템플릿으로 사용되는 것처럼 이 파일은 나머지 양식 보기 파일의 템플릿 역할을 합니다. 우리가 해야 할 일은 중첩된 선언이 뷰를 삽입할 위치를 알 수 있도록 이 파일에 ui-view를 포함시키는 것뿐입니다.
<!-- 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数据绑定。