AngularJS 프로그래밍에서 양식을 제출하는 방법에 대한 자세한 분석

AngularJS가 등장하기 전에는 많은 개발자가 양식 제출 문제에 직면했습니다. 양식을 제출하는 방법이 너무 다양해서 사람들을 미치게 만들기 쉬웠을 것입니다... 하지만 여전히 사람들을 미치게 만듭니다.

오늘은 기존에 PHP를 사용하여 제출했던 폼을 Angular를 사용하여 변환하는 방법을 살펴보겠습니다. Angular를 사용하여 양식을 처리하는 것은 나에게 "아하" 순간이었습니다. Angular의 표면 수준을 건드리지 않더라도 사용자가 양식 제출의 잠재력을 확인하고 두 가지 데이터 바인딩 방법을 이해하는 데 도움이 됩니다.

이 프로세스에는 jQuery 플랫폼을 사용합니다. 그래서 해야 할 일은 먼저 자바스크립트를 사용하는 것입니다. 양식을 제출하고, 오류 메시지를 표시하고, 오류 클래스를 추가하고, JavaScript에서 정보를 표시하거나 숨깁니다.

그 다음에는 Angular를 사용하겠습니다. 우리는 그것을 사용하기 전에 필요한 대부분의 작업을 수행해야 하며 이전에 했던 많은 작업은 매우 쉬울 것입니다. 시작해 봅시다.

간단한 형태

양식을 제출하는 두 가지 방법에 중점을 둘 것입니다.

기존 방식: jQuery 및 PHP 양식 제출
새로운 방법: AngularJS 및 PHP 양식 제출

우선 양식을 살펴보세요. 매우 간단합니다.

2015619102411460.jpg (800×400)

공식적 요구사항

페이지 새로고침 양식 처리 구현
이름과 슈퍼히어로 별명을 입력하세요
오류가 있으면 오류 메시지가 표시됩니다
입력이 올바르지 않으면 입력이 빨간색으로 변합니다
모든 내용이 정상이면 성공 메시지가 표시됩니다

문서 구조

데모에서는 두 개의 파일만 필요합니다

index.html
process.php

양식 처리

양식을 처리할 새로운 PHP를 만들어 보겠습니다. 페이지는 매우 작으며 POST를 사용하여 데이터를 제출합니다.

양식 처리: 이는 우리에게 그다지 중요하지 않습니다. 양식을 처리하는 데 원하는 다른 언어를 사용할 수 있습니다.

// process.php
 
<&#63;php
 
$errors   = array();  // array to hold validation errors
$data    = array();   // array to pass back data
 
// validate the variables ======================================================
 if (empty($_POST['name']))
  $errors['name'] = 'Name is required.';
 
 if (empty($_POST['superheroAlias']))
  $errors['superheroAlias'] = 'Superhero alias is required.';
 
// return a response ===========================================================
 
 // response if there are errors
 if ( ! empty($errors)) {
 
  // if there are items in our errors array, return those errors
  $data['success'] = false;
  $data['errors'] = $errors;
 } else {
 
  // if there are no errors, return a message
  $data['success'] = true;
  $data['message'] = 'Success!';
 }
 
 // return all our data to an AJAX call
 echo json_encode($data);

로그인 후 복사

이것은 매우 간단한 양식 처리 스크립트입니다. 데이터가 존재하는지 여부만 확인하고, 존재하는 경우 처리나 작업을 수행하지 않습니다. 존재하지 않는 경우 $errors 배열에 정보를 추가해야 합니다.

AJAX 호출에 대한 데이터를 반환하려면 echo 및 json_encode를 사용해야 합니다. 이것이 PHP 양식 처리를 위해 수행해야 할 전부입니다. 일반 jQuery AJAX 또는 Angular를 사용하여 양식을 처리하는 경우에도 마찬가지입니다.
표시 양식

양식을 표시할 HTML을 만들어 보겠습니다

<!-- index.html -->
 
<!doctype html>
<html>
<head>
 <title>Angular Forms</title>
 
 <!-- LOAD BOOTSTRAP CSS -->
 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
 
 <!-- LOAD JQUERY -->
  <!-- when building an angular app, you generally DO NOT want to use jquery -->
  <!-- we are breaking this rule here because jQuery's $.param will help us send data to our PHP script so that PHP can recognize it -->
  <!-- this is jQuery's only use. avoid it in Angular apps and if anyone has tips on how to send data to a PHP script w/o jQuery, please state it in the comments -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
 
 <!-- PROCESS FORM WITH AJAX (OLD) -->
 <script>
  <!-- WE WILL PROCESS OUR FORM HERE -->
 </script>
</head>
<body>
<div class="container">
<div class="col-md-6 col-md-offset-3">
 
 <!-- PAGE TITLE -->
 <div class="page-header">
  <h1><span class="glyphicon glyphicon-tower"></span> Submitting Forms with Angular</h1>
 </div>
 
 <!-- SHOW ERROR/SUCCESS MESSAGES -->
 <div id="messages"></div>
 
 <!-- FORM -->
 <form>
  <!-- NAME -->
  <div id="name-group" class="form-group">
   <label>Name</label>
   <input type="text" name="name" class="form-control" placeholder="Bruce Wayne">
   <span class="help-block"></span>
  </div>
 
  <!-- SUPERHERO NAME -->
  <div id="superhero-group" class="form-group">
   <label>Superhero Alias</label>
   <input type="text" name="superheroAlias" class="form-control" placeholder="Caped Crusader">
   <span class="help-block"></span>
  </div>
 
  <!-- SUBMIT BUTTON -->
  <button type="submit" class="btn btn-success btn-lg btn-block">
   <span class="glyphicon glyphicon-flash"></span> Submit!
  </button>
 </form>
 
</div>
</div>
</body>
</html>

로그인 후 복사

이제 양식이 완성되었습니다. 또한 양식을 덜 보기 좋게 만들기 위해 Bootstrap을 사용했습니다. 부트스트랩 구문 규칙을 사용하여 각 입력에는 텍스트의 오류 메시지를 표시할 지점이 포함됩니다.

2015619102451118.jpg (800×400)