AngularJS - 인라인 애플리케이션

소개

안녕하세요, 미래의 AngularJS 마에스트로 여러분! AngularJS 인라인 애플리케이션의 세계로 인도해드리게 되어 매우 기쁩니다. floopy disks가 실제로 유연했던 시절을 기억하는 만큼의 경험을 가진 프로그래밍 강사로서, 이 튜토리얼이 끝나면 여러분이 자신감 있게 첫 AngularJS 인라인 애플리케이션을 만들 수 있을 것이라 확신합니다.

AngularJS - In-line Application

인라인 애플리케이션은 무엇인가?

코드로 뛰어들기 전에 "인라인 애플리케이션"이 무엇을 의미하는지 이해해 보겠습니다. 상상해 보세요, 버페트에서 식사하는 것(여기서의 비유는 이해를 돕기 위한 것입니다). 인라인 애플리케이션은 좋아하는 모든 요리가 하나의 접시에 담겨 있는 것처럼입니다 - 필요한 모든 것이 바로 그 자리에 준비되어 있습니다. AngularJS 용어로는, 우리는 전체 애플리케이션을 단일 HTML 파일 내에 작성할 것입니다. 별도의 JavaScript 파일 없이, 외부 모듈 없이 -純粹한 AngularJS의 매력입니다.

첫 번째 인라인 애플리케이션 설정

단계 1: HTML 스픰론

먼저, 우리의 HTML 파일의 기본 골격을 시작해 보겠습니다:

<!DOCTYPE html>
<html>
<head>
<title>내 첫 AngularJS 인라인 앱</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

</body>
</html>

웹 개발을 해 본 적이 있으면 익숙할 수 있습니다. 그렇지 않으면 걱정 마세요! 우리는 기본 HTML 문서를 설정하고 AngularJS 라이브러리를 Content Delivery Network (CDN)에서 포함시키고 있습니다. AngularJS를 우리의 코딩 파티에 초대하는 것과 같습니다.

단계 2: ng-app 디렉티브 추가

이제 AngularJS에게 우리의 애플리케이션이 어디에 있는지 알려보겠습니다:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>내 첫 AngularJS 인라인 앱</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

</body>
</html>

우리는 <html> 태그에 ng-app="myApp"를 추가했습니다. 이는 우리의 집에 큰 표지를 달아 "AngularJS가 여기 살고 있습니다!"라고 말하는 것과 같습니다. myApp 부분은 우리가 우리의 애플리케이션에 부여한 이름입니다.

첫 번째 컨트롤러 생성

컨트롤러는 무엇인가?

AngularJS에서 컨트롤러는 애플리케이션의 뇌와 같습니다. 특정 애플리케이션 부분의 데이터와 동작을 관리합니다. 하나 만들어 보겠습니다!

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>내 첫 AngularJS 인라인 앱</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{greeting}}</h1>

<script>
var app = angular.module('myApp', []);
app.controller('MainController', function($scope) {
$scope.greeting = "Hello, AngularJS World!";
});
</script>
</body>
</html>

이를 간단히 설명하자면:

우리는 <body> 태그에 ng-controller="MainController"를 추가했습니다. 이는 AngularJS에게 이 HTML 부분이 이 컨트롤러에 의해 관리된다고 알립니다.
<script> 태그 내에서 우리는 애플리케이션 모듈을 angular.module('myApp', [])로 생성합니다.
우리는 컨트롤러를 app.controller()로 정의합니다. $scope 매개변수는 컨트롤러와 뷰(우리의 HTML) 간에 데이터를 전달하는 방법입니다.
우리는 $scope에 greeting 프로퍼티를 설정합니다. 이는 우리의 HTML에서 사용할 수 있게 합니다.
HTML 내에서 우리는 {{greeting}}을 사용하여 greeting의 값을 표시합니다.

사용자 상호작용 추가

우리의 애플리케이션을 조금 더 상호작용적으로 만들기 위해 인사를 변경하는 버튼을 추가해 보겠습니다:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>내 첫 AngularJS 인라인 앱</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{greeting}}</h1>
<button ng-click="changeGreeting()">인사 변경</button>

<script>
var app = angular.module('myApp', []);
app.controller('MainController', function($scope) {
$scope.greeting = "Hello, AngularJS World!";
$scope.changeGreeting = function() {
$scope.greeting = "인사, 지구인!";
};
});
</script>
</body>
</html>

새로운 부분은 다음과 같습니다:

우리는 ng-click 디렉티브를 추가한 버튼을 추가했습니다. 이는 버튼이 클릭될 때 AngularJS가 changeGreeting() 함수를 호출하도록 합니다.
컨트롤러 내에서 우리는 $scope에 changeGreeting() 함수를 정의합니다. 이 함수는 greeting의 값을 변경합니다.

데이터 바인딩을 활용해 보기

AngularJS의 가장 강력한 기능 중 하나는 양방향 데이터 바인딩입니다. 이를 실제로 확인해 보겠습니다:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>내 첫 AngularJS 인라인 앱</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{greeting}}</h1>
<input type="text" ng-model="name">
<p>Hello, {{name}}!</p>

<script>
var app = angular.module('myApp', []);
app.controller('MainController', function($scope) {
$scope.greeting = "Welcome to our AngularJS App!";
$scope.name = "Anonymous";
});
</script>
</body>
</html>

이 예제에서:

우리는 ng-model="name"을 추가한 입력 필드를 추가했습니다. 이는 입력 필드의 값을 $scope의 name 프로퍼티와 바인딩합니다.
우리는 문단에서 {{name}}을 사용하여 name의 값을 표시합니다.
입력 필드에 입력을 하면 실시간으로 인사가 업데이트됩니다. 이것이 양방향 데이터 바인딩의 마법입니다!

결론

축하합니다! 여러분은 첫 AngularJS 인라인 애플리케이션을 만들었습니다. 우리는 AngularJS 애플리케이션 설정, 컨트롤러 생성, 사용자 상호작용 처리, 양방향 데이터 바인딩의 기본을 다루었습니다. 기억하시기 바랍니다, 새로운 기술을 배우는 것은 연습이 필요합니다. 실험을 하고, 것을 깨뜨리고, 실수에서 배우세요. 우리 모두가 그렇게 개발자가 되었습니다!

이 표는 우리가 사용한 주요 AngularJS 디렉티브를 요약합니다:

디렉티브	목적
ng-app	AngularJS 애플리케이션을 정의하고 부트스트랩합니다
ng-controller	애플리케이션의 특정 부분에 컨트롤러를 지정합니다
ng-click	요소가 클릭될 때 함수를 실행하도록 지정합니다
ng-model	입력, 선택, 또는 텍스트 영역을 `$scope`의 프로퍼티와 바인딩합니다

계속 코딩하고, 배우고, 가장 중요한 것은 즐겁게 하세요! 모든 전문가는 초보자였습니다. 여러분의 AngularJS 여정이刚刚 시작되었습니다!

Credits: Image by storyset