한국어

AngularJS 튜토리얼

AngularJS 애플리케이션

AngularJS - 지시자: 초보자 가이드

안녕하세요, 미래의 AngularJS 마법사 여러분! 오늘 우리는 AngularJS 지시자의 세상으로 흥미로운 여정을 떠납니다. 프로그래밍에 처음이라면 걱정 마세요 - 저는 당신의 친절한 가이드로, 모든 것을 단계별로 설명해 드릴게요. 커피(또는 차, 당신이 좋아하는 것)를 한 잔 마시고, 이제 시작해 보겠습니다!

AngularJS - Directives

지시자는 무엇인가요?

시작하기 전에 지시자가 무엇인지 이해해 보겠습니다. 지시자는 HTML에 주는 특별한 지시라고 생각해 보세요. 그들은 우리의 웹 페이지를 동적인 콘텐츠와 동작으로 살아나게 하는 마법의 주문 같은 것입니다. 멋지죠?

이제 AngularJS에서 가장 흔히 사용되는 지시자 중 일부를 탐구해 보겠습니다.

ng-app 지시자

ng-app 지시자는 우리의 AngularJS 집의 기초와 같습니다. AngularJS에게 "이제 여기서 내 애플리케이션이 시작된다!"라고 알립니다.

예제:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app>
<p>제 AngularJS 앱에 오신 것을 환영합니다!</p>
</body>
</html>

이 예제에서 우리는 <body> 태그에 ng-app를 추가했습니다. 이는 AngularJS에게 <body> 내의 모든 것이 우리의 AngularJS 애플리케이션의 일부임을 알립니다.

ng-init 지시자

ng-init 지시자는 마법사의 모자 같은东西입니다 - HTML에서 변수를 초기화할 수 있습니다. 이는 간단한 데모에 좋지만, 실제 애플리케이션에서는 컨트롤러에서 데이터를 초기화하는 것이 일반적입니다.

예제:

<div ng-app ng-init="firstName='John'; lastName='Doe'">
<p>이름은 {{ firstName + " " + lastName }}</p>
</div>

이 예제에서 우리는 ng-init를 사용하여 firstName과 lastName의 값을 설정합니다. 그런 다음, 이 값을 AngularJS 표현식(이중 대괄호)을 사용하여 표시합니다.

ng-model 지시자

ng-model 지시자는 HTML과 애플리케이션 데이터 간의 양방향 거리입니다. 그它可以:

  1. 입력, 선택, 또는 텍스트 영역을 스코프의 프로퍼티에 바인딩합니다.
  2. 애플리케이션 데이터에 대한 유형 검증을 제공합니다.
  3. 요소에 CSS 클래스를 설정합니다.
  4. HTML 요소를 폼 검증에 바인딩합니다.

예제:

<div ng-app>
<input type="text" ng-model="name">
<p>안녕하세요, {{ name }}!</p>
</div>

이 예제에서 입력 상자에 whatever을 입력하면, 입력 상자 아래의段落에 "안녕하세요," 뒤에 즉시 나타납니다. 마법 같지만, 그것은 ng-model의 힘입니다!

ng-repeat 지시자

ng-repeat 지시자는 HTML 요소의 복사기와 같습니다. 그它可以 배열의 각 항목에 대해 HTML 요소를 반복합니다. 이는 목록이나 테이블을 동적으로 생성하는 데 매우 유용합니다.

예제:

<div ng-app ng-init="fruits=['Apple', 'Banana', 'Orange']">
<ul>
<li ng-repeat="fruit in fruits">
{{ fruit }}
</li>
</ul>
</div>

이것은 과일 목록을 생성합니다. ng-repeat 지시자는 배열의 각 과일에 대해 <li> 요소를 반복합니다.

종합 예제

이제 더 복잡한 예제로 모든 것을 합쳐 보겠습니다:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app ng-init="students=[
{name:'John Doe', grade: 85},
{name:'Jane Smith', grade: 92},
{name:'Bob Johnson', grade: 78}
]">
<h2>학생 성적 추적기</h2>
<table border="1">
<tr>
<th>이름</th>
<th>성적</th>
</tr>
<tr ng-repeat="student in students">
<td>{{ student.name }}</td>
<td>{{ student.grade }}</td>
</tr>
</table>
<br>
<h3>새로운 학생 추가</h3>
<form>
이름: <input type="text" ng-model="newName"><br>
성적: <input type="number" ng-model="newGrade"><br>
<button ng-click="students.push({name:newName, grade:newGrade})">학생 추가</button>
</form>
</body>
</html>

이를 설명해 보겠습니다:

  1. 우리는 <body> 태그에 ng-app를 추가하여 AngularJS 애플리케이션을 초기화합니다.
  2. 우리는 ng-init를 사용하여 초기 학생 배열을 생성합니다.
  3. 우리는 ng-repeat를 사용하여 각 학생에 대해 테이블 행을 생성합니다.
  4. 우리는 ng-model을 사용하여 입력 필드를 변수에 바인딩합니다.
  5. 우리는 ng-click 지시자를 사용하여 버튼을 클릭할 때 새로운 학생을 배열에 추가합니다.

이 예제는 이 지시자들이 어떻게 함께 작동하여 동적이고 상호작용적인 웹 애플리케이션을 생성하는지 보여줍니다. 새로운 학생을 추가하면, 그들은 즉시 테이블에 나타납니다!

결론

축하합니다! 지금 당신은 AngularJS 지시자의 세상으로 첫 걸음을 내디디셨습니다. 우리는 ng-app, ng-init, ng-model, 그리고 ng-repeat의 기본을 다루었습니다. 이들은 AngularJS에서 제공하는 많은 지시자 중 몇 가지에 불과하지만, 좋은 시작점입니다.

기억하시라, 프로그래밍을 배우는 것은 새로운 언어를 배우는 것과 같습니다. 시간과 연습이 필요하지만, 언제쯤은 AngularJS를 유창하게 말할 수 있을 것입니다! 이 지시자들을 실험하고, 다른 방법으로 조합해 보세요, 그리고 가장 중요한 것은 즐겁게 하세요!

미래의 AngularJS 마스터 여러분, 즐겁게 코딩하세요!

Credits: Image by storyset

이전 튜토리얼:
AngularJS - 첫 번째 애플리케이션
다음 튜토리얼:
AngularJS - 표현식