AngularJS - 첫 번째 애플리케이션

안녕하세요, 야심勃勃한 프로그래머 여러분! 오늘 우리는 AngularJS의 세계로 흥미로운 여정을 떠납니다. 여러분의 친절한 이웃 컴퓨터 선생님이자, 저는 여러분을 첫 AngularJS 애플리케이션으로 안내하게 되어 기쁩니다. 코드를 한 줄도 작성해본 적이 없더라도 걱정하지 마세요 - 우리는 단계별로 진행하며, 얼마 지나지 않아 전문가처럼 동적 웹 애플리케이션을 만드는 법을 배울 것입니다!

AngularJS - First Application

AngularJS 애플리케이션 만들기

기본적인 내용부터 시작해보겠습니다. AngularJS는 우리가 상호작용식 웹 애플리케이션을 만드는 데 도움을 주는 강력한 자바스크립트 프레임워크입니다. 이를 마법의 도구상자라고 생각해보세요. 우리의 웹 페이지를 살아나게 해줍니다!

우리의 첫 AngularJS 애플리케이션을 만들기 위해 간단한 HTML 파일을 설정해야 합니다. 다음과 같습니다:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>My First AngularJS App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<h2>Hello, {{name}}!</h2>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = 'AngularJS Beginner';
});
</script>
</body>
</html>

이를 해부해보겠습니다:

우리는 표준 HTML 구조로 시작합니다.
<html> 태그에 있는 ng-app="myApp"는 AngularJS에게 이가 우리 애플리케이션의 루트 요소임을 알립니다.
<head> 섹션에 AngularJS 라이브러리를 포함하는 <script> 태그를 추가합니다.
<body>에 <div> 태그에 ng-controller="myCtrl"를 추가하여 HTML을 AngularJS 컨트롤러와 연결합니다.
이 <div> 안에 {{name}}을 넣습니다. 이는 AngularJS 표현식으로, name의 값을 표시합니다.
마지막으로, 우리는 AngularJS 모듈과 컨트롤러를 정의하는 <script> 태그를 추가합니다.

AngularJS 애플리케이션 실행하기

이제 우리 애플리케이션을 만들었으니, 어떻게 실행하는지 보겠습니다:

위 코드를 index.html 파일에 저장합니다.
이 파일을 웹 브라우저(예: Chrome 또는 Firefox)에서 엽니다.

이게 전부입니다! 여러분의 AngularJS 애플리케이션은 이제 실행 중입니다. 생각보다 쉬웠죠?

출력

index.html 파일을 브라우저에서 엽니다. 다음과 같은 내용을 볼 수 있어야 합니다:

Hello, AngularJS Beginner!

마법이죠? 하지만 이게 어떻게 작동하는지 알아보겠습니다!

AngularJS가 HTML과 어떻게 통합되는지

AngularJS는 "디렉티브"를 통해 HTML과 원활하게 통합됩니다. 이는 AngularJS에게 DOM 요소에 대해 무엇을 하도록 지시하는 특별한 속성입니다. 주요 디렉티브를 살펴보겠습니다:

디렉티브	목적
ng-app	AngularJS 애플리케이션의 루트 요소를 정의합니다
ng-controller	HTML 요소에 사용할 컨트롤러를 지정합니다
{{ }}	표현식의 값을 표시합니다

자세한 설명을 추가하겠습니다:

ng-app: 이 디렉티브는 AngularJS 애플리케이션을 초기화합니다. 이는 AngularJS에게 이 페이지의 이 부분을 제어하도록 지시합니다. 우리의 예제에서는 <html> 태그에 이를 추가하여 전체 페이지를 AngularJS 애플리케이션으로 만들었습니다.
ng-controller: 이 디렉티브는 자바스크립트 컨트롤러 클래스를 지정합니다. 컨트롤러는 애플리케이션의 동작을 정의하기 위해 함수와 값을 정의하는 곳입니다. 우리의 예제에서 myCtrl이 컨트롤러입니다.
{{ }}: 이 이중 대괄호는 AngularJS 표현식입니다. 이는 AngularJS에게 표현식 내부를 평가하고 결과로 치환하도록 지시합니다. 우리의 경우 {{name}}은 "AngularJS Beginner"로 치환됩니다.

이제 자바스크립트 코드를 살펴보겠습니다:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = 'AngularJS Beginner';
});

angular.module('myApp', [])는 'myApp'이라는 새로운 AngularJS 모듈을 생성합니다. 이는 ng-app="myApp"에서 사용한 이름과 일치합니다.
app.controller('myCtrl', function($scope) { ... })는 우리의 컨트롤러를 정의합니다. $scope는 컨트롤러와 뷰(우리의 HTML) 사이의 다리 역할을 하는 특별한 객체입니다.
$scope.name = 'AngularJS Beginner'는 $scope에 프로퍼티를 설정합니다. 이를 통해 우리는 HTML에서 {{name}}을 사용할 수 있습니다.

이제 여러분은 첫 AngularJS 애플리케이션을 만들고 이해했습니다. 흥분되죠?

기억하세요, 코딩 배우는 새로운 언어를 배우는 것과 같습니다.처음에는 혼란스러울 수 있지만, 연습을 통해 두둔 Natur wird. 처음에 AngularJS를 가르치면서, 한 학생이 모든 괄호에 혼란스러워 '머스크 언어'라고 부르기도 했습니다! 하지만 강의가 끝나면 복잡한 애플리케이션을 만들고 자신의�始初 혼란을 웃었습니다.

그래서 걱정하지 마세요. 계속 연습하고, 코드를 수정해보세요 (예: 'AngularJS Beginner'를 여러분의 이름으로 변경해보세요). 그리고 가장 중요한 것은 즐기세요! 다음 강의에서는 더 많은 AngularJS 기능을 탐구하고 더 복잡한 애플리케이션을 만들기 시작하겠습니다. 그때까지, 즐겁게 코딩하세요!

Credits: Image by storyset