한국어

AngularJS 튜토리얼

AngularJS 애플리케이션

AngularJS - Bootstrap Application

안녕하세요, 열정적인 프로그래머 되시는 분들! 오늘 우리는 AngularJS와 함께하는 흥미로운 여정을 시작하고 어플리케이션을 부트스트랩하는 방법을 배우겠습니다. 여러분의 친절한 이웃 컴퓨터 과학 교사로서, 저는 이 과정을 단계별로 안내해드리겠습니다. 모든 코드를 이해하실 수 있도록 신경 쓰겠습니다. 그러니 좋아하는 음료를 마시며 편안하게 앉아, 시작해 보세요!

AngularJS - Bootstrap Application

AngularJS는 무엇인가요?

어플리케이션을 부트스트랩하기 전에, AngularJS가 무엇인지 이해해 보겠습니다. AngularJS는 动态 웹 어플리케이션을 구축하는 데 도움을 주는 강력한 JavaScript 프레임워크입니다. 웹 개발자 számára 스위스 아ーノ이Knife와 같은 존재로, 우리의 삶을 더 쉽게 만들고 코드를 더 정리된 형태로 만들어주는 도구를 제공합니다.

AngularJS를 도움을 주는 어시스턴트라고 생각해 보세요. 코드를 정리하고 인터랙티브 웹사이트를 만들기 더 쉽게 만들어줍니다. 초능력을 가진 친구가 놀라운 것들을 만들 때 도와주는 것과 같습니다!

AngularJS 어플리케이션 부트스트랩하기

이제 흥미로운 부분으로 넘어가겠습니다 - AngularJS 어플리케이션을 부트스트랩하는 것. 부트스트랩은 "시작하다" 혹은 "초기화하다"는 뜻의 세련된 표현입니다. 자동차의 이그니션 키를 돌리는 것처럼, 모든 것을 가동시키는 것입니다!

Step 1: HTML 설정하기

먼저, AngularJS 어플리케이션의 기반을 제공할 HTML 파일을 만들어야 합니다. index.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>
<h1>Welcome to My AngularJS App!</h1>
<div ng-controller="MainController">
<p>{{ message }}</p>
</div>
<script src="app.js"></script>
</body>
</html>

이를 설명해 보겠습니다:

  1. <html> 태그의 ng-app="myApp" 속성은 AngularJS에게 이가 어플리케이션의 루트 요소임을 알립니다.
  2. AngularJS 라이브러리를 <script> 태그로 포함시킵니다.
  3. ng-controller="MainController"를 가진 <div> 태그는 동적 콘텐츠를 표시할 곳입니다.
  4. {{ message }}는 JavaScript에서 정의할 데이터의 占位符입니다.
  5. app.js 파일을 연결합니다.

Step 2: JavaScript 파일 생성하기

이제 app.js 파일을 만들어 보겠습니다:

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

app.controller('MainController', function($scope) {
$scope.message = "Hello, AngularJS World!";
});

이 작업의 내용은 다음과 같습니다:

  1. angular.module('myApp', [])를 사용하여 'myApp'이라는 Angular 모듈을 생성합니다.
  2. app.controller()를 사용하여 'MainController'라는 컨트롤러를 정의합니다.
  3. 컨트롤러 내에서 $scope.message를 우리의 인사말로 설정합니다. 이는 HTML에서 {{ message }}로 표시됩니다.

마법의 이해

이제 "이 모든 것이 어떻게 함께 작동하는가?"라는 궁금증이 드실 수도 있습니다. 훌륭한 질문입니다! 설명해 보겠습니다:

  1. 페이지가 로드될 때, AngularJS는 ng-app 디렉티브를 찾습니다. 이는 AngularJS가 어디서 시작해야 하는지 알려줍니다.
  2. 그런 다음, 정의한 모듈(myApp)을 찾아 초기화합니다.
  3. 그 다음, ng-controller 디렉티브를 찾아 MainController와 연결합니다.
  4. 컨트롤러는 $scope에 message를 설정하여 JavaScript와 HTML 간의 메신저 역할을 합니다.
  5. 마지막으로, AngularJS는 HTML에서 {{ message }}를 실제 메시지로 대체합니다.

이 모든 것이 하나의 잘 조직된 춤처럼 작동합니다!

어플리케이션 확장하기

이제 기본적인 내용을 이해했으므로, 어플리케이션에 추가 기능을 추가해 보겠습니다. 간단한 할 일 목록을 만들겠습니다:

index.html을 업데이트합니다:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>My AngularJS To-Do App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<h1>My To-Do List</h1>
<div ng-controller="TodoController">
<input type="text" ng-model="newTask">
<button ng-click="addTask()">Add Task</button>
<ul>
<li ng-repeat="task in tasks">{{ task }}</li>
</ul>
</div>
<script src="app.js"></script>
</body>
</html>

그리고 app.js를 업데이트합니다:

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

app.controller('TodoController', function($scope) {
$scope.tasks = ['Learn AngularJS', 'Build an app'];

$scope.addTask = function() {
if($scope.newTask) {
$scope.tasks.push($scope.newTask);
$scope.newTask = '';
}
};
});

새로운 내용을 설명해 보겠습니다:

  1. ng-model="newTask"를 가진 입력 필드를 추가합니다. 이는 입력 필드와 $scope.newTask 간의 양방향 바인딩을 생성합니다.
  2. 버튼에 ng-click="addTask()"를 추가하여 클릭 시 addTask() 함수를 호출합니다.
  3. ng-repeat="task in tasks"는 tasks 배열의 각 항목에 대해 목록 항목을 생성합니다.
  4. JavaScript에서 $scope.tasks를 두 가지 작업으로 초기화합니다.
  5. addTask() 함수는 새로운 작업을 배열에 추가하고 입력 필드를 지웁니다.

결론

축하합니다! 여러분은 첫 AngularJS 어플리케이션을 부트스트랩하고 심지어 추가 기능을 추가했습니다. 코드를 배우는 것은 새로운 언어를 배우는 것과 같습니다 - 연습과 인내가 필요합니다. 하지만 각 단계마다 웹 개발의 언어에 더 능숙해집니다.

마무리하며, 중요한 AngularJS 디렉티브를 요약한 표를 제공합니다:

디렉티브 목적
ng-app AngularJS 어플리케이션의 루트 요소 정의
ng-controller HTML 요소에 사용할 컨트롤러 지정
ng-model 양방향 데이터 바인딩 생성
ng-click 요소 클릭 시 실행할 함수 지정
ng-repeat 배열의 각 항목에 대해 HTML 섹션 반복

계속 탐구하고, 계속 코딩하고, 가장 중요한 것은 즐겁게 만들어가세요! 웹 개발의 세계는 방대하고 흥미롭습니다. 여러분이 첫 걸음을 뗐습니다. 다음 번에 만날 때까지, 행복한 코딩 되세요!

Credits: Image by storyset

이전 튜토리얼:
AngularJS - 메모 애플리케이션
다음 튜토리얼:
AngularJS - 로그인 애플리케이션