AngularJS - 주문 양식: 초보자 가이드

안녕하세요, 미래의 AngularJS 마법사 여러분! 오늘 우리는 AngularJS 주문 양식의 세계로 흥미로운 여정을 떠납니다. 코드를 한 줄도 작성한 적이 없어도 걱정하지 마세요 - 우리는 매우 기본적인 것부터 시작하여 점진적으로 올라갈 것입니다. 이 튜토리얼의 끝까지 따라오면, 프로처럼 동적인 주문 양식을 만드는 법을 배울 것입니다!

AngularJS - Order Form

AngularJS는 무엇인가요?

주문 양식에 들어가기 전에, AngularJS가 무엇인지 이해해 보겠습니다. 당신이 집을 짓는다고 상상해 보세요. HTML은 벽돌과 시멘트처럼, CSS는 페인트와 장식처럼, 그렇다면 AngularJS는 모든 것이 상호작용하고 동적으로 만드는 스마트 홈 시스템처럼 생각할 수 있습니다.

AngularJS는 HTML에 새로운 속성을 추가하여 동적인 웹 애플리케이션을 만들기에 적합한 JavaScript 프레임워크입니다. 그것은 당신의 정적 HTML에 초능력을 주는 것과 같습니다!

프로젝트 설정

먼저, 우리의 프로젝트를 설정해 보겠습니다. AngularJS 라이브러리를 우리의 HTML 파일에 포함시켜야 합니다. 다음은 그 방법입니다:

<!DOCTYPE html>
<html ng-app="orderApp">
<head>
<title>My AngularJS Order Form</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- 우리의 양식이 여기에 들어갈 자리 -->
<script src="app.js"></script>
</body>
</html>

이 코드에서 우리는 몇 가지 중요한 일을 하고 있습니다:

ng-app="orderApp"를 <html> 태그에 추가하여 AngularJS에게 이것이 우리 애플리케이션의 루트 요소임을 알립니다.
AngularJS 라이브러리를 <script> 태그를 사용하여 포함시킵니다.
우리의 자바스크립트 파일(app.js)을 포함시키고, 여기서 AngularJS 코드를 작성할 것입니다.

AngularJS 모듈과 컨트롤러 생성

이제 app.js 파일을 만들고 AngularJS 모듈과 컨트롤러를 설정해 보겠습니다:

var app = angular.module('orderApp', []);

app.controller('OrderController', function($scope) {
$scope.order = {
items: [],
total: 0
};
});

이제 무엇이 일어나고 있는지 설명해 보겠습니다:

우리는 'orderApp'이라는 AngularJS 모듈을 생성하고 있습니다.
우리는 'OrderController'라는 컨트롤러를 정의하고 있습니다.
컨트롤러 내부에서 우리는 $scope에 order 객체를 초기화하고 있습니다. 이 객체는 주문 항목과 총액을 저장합니다.

주문 양식 작성

이제 HTML에서 주문 양식을 작성해 보겠습니다:

<div ng-controller="OrderController">
<h2>주문하시오</h2>
<form>
<label>항목 이름: <input type="text" ng-model="newItem.name"></label><br>
<label>가격: $<input type="number" ng-model="newItem.price"></label><br>
<button ng-click="addItem()">항목 추가</button>
</form>

<h3>주문 요약</h3>
<ul>
<li ng-repeat="item in order.items">
{{item.name}} - ${{item.price}}
<button ng-click="removeItem($index)">제거</button>
</li>
</ul>
<p>총액: ${{order.total}}</p>
</div>

이를 다음과 같이 설명할 수 있습니다:

ng-controller를 사용하여 이 섹션을 OrderController와 연결합니다.
항목 이름과 가격에 대한 입력 필드를 ng-model을 사용하여 연결합니다.
"항목 추가" 버튼을 클릭할 때 addItem() 함수를 호출합니다.
ng-repeat를 사용하여 주문의 각 항목을 표시합니다.
각 항목에 "제거" 버튼을 추가하여 removeItem() 함수를 호출합니다.
총 주문 금액을 표시합니다.

컨트롤러 로직 구현

이제 컨트롤러에 필요한 함수를 추가해 보겠습니다:

app.controller('OrderController', function($scope) {
$scope.order = {
items: [],
total: 0
};

$scope.newItem = {name: '', price: ''};

$scope.addItem = function() {
$scope.order.items.push({
name: $scope.newItem.name,
price: parseFloat($scope.newItem.price)
});
$scope.calculateTotal();
$scope.newItem = {name: '', price: ''};
};

$scope.removeItem = function(index) {
$scope.order.items.splice(index, 1);
$scope.calculateTotal();
};

$scope.calculateTotal = function() {
$scope.order.total = $scope.order.items.reduce(function(sum, item) {
return sum + item.price;
}, 0);
};
});

각 함수는 다음과 같은 작업을 수행합니다:

addItem(): 새로운 항목을 주문에 추가하고 새로운 총액을 계산하고 입력 필드를 초기화합니다.
removeItem(): 주문에서 항목을 제거하고 총액을 다시 계산합니다.
calculateTotal(): 주문의 모든 항목 가격을 합산합니다.

사용자 경험 향상

양식을 더 사용자 친화적으로 만들기 위해, 검증을 추가해 보겠습니다:

<form name="orderForm" ng-submit="addItem()" novalidate>
<label>항목 이름: <input type="text" ng-model="newItem.name" required></label><br>
<label>가격: $<input type="number" ng-model="newItem.price" min="0" step="0.01" required></label><br>
<button type="submit" ng-disabled="orderForm.$invalid">항목 추가</button>
</form>

그리고 컨트롤러를 업데이트합니다:

$scope.addItem = function() {
if ($scope.orderForm.$valid) {
$scope.order.items.push({
name: $scope.newItem.name,
price: parseFloat($scope.newItem.price)
});
$scope.calculateTotal();
$scope.newItem = {name: '', price: ''};
$scope.orderForm.$setPristine();
}
};

이러한 변경 사항은 다음과 같습니다:

양식 검증을 추가하여 모든 필드가 채워지고 가격이 양수인지 확인합니다.
양식이 유효하지 않을 때 "항목 추가" 버튼을 비활성화합니다.
양식이 유효할 때만 항목을 추가합니다.
항목을 추가한 후 양식을 초기 상태로 되돌립니다.

결론

축하합니다! 우리는 기능적인 AngularJS 주문 양식을 만들었습니다. 우리는 AngularJS의 기본 개념을 포함하여 모듈, 컨트롤러, 양방향 데이터 바인딩, 양식 검증을 다루었습니다. 기억하시라, 실습이 완성입니다. 이 양식을 실험하고 확장해 보세요. 할인 기능을 추가하거나 주문을 저장할 수 있는 기능을 추가해 보세요! 가능성은 무한합니다!

여기서 사용한 주요 AngularJS 디렉티브를 요약한 표입니다:

디렉티브	목적
ng-app	AngularJS 애플리케이션의 루트 요소를 정의합니다
ng-controller	애플리케이션의 섹션에 컨트롤러를 지정합니다
ng-model	양방향 데이터 바인딩을 생성합니다
ng-click	요소가 클릭될 때 함수를 실행합니다
ng-repeat	컬렉션의 각 항목에 대해 요소를 반복합니다
ng-submit	양식이 제출될 때 함수를 실행합니다
ng-disabled	조건에 따라 요소를 비활성화합니다

기쁜 코딩을 하시고, 기억하세요 - 모든 전문가는 초보자였습니다. 실습을 계속하면 곧 AngularJS 마스터가 될 것입니다!

Credits: Image by storyset