AngularJS - 모듈

안녕하세요, 미래의 프로그래머 여러분! 오늘 우리는 AngularJS 모듈의 세계로 접근해 보겠습니다. 프로그래밍에 새로운 사람이라고 걱정하지 마세요; 저는 수년간 많은 학생들을 가르친 경험을 바탕으로 단계별로 안내해 드릴 것입니다. 이 흥미로운 여정을 함께 시작해 보겠습니다!

AngularJS - Modules

AngularJS 모듈이란?

거대한 레고 구조물을 만들고 있다고 상상해 보세요. 한 번에 모든 것을 만들려고 하지 말고, 더 작고 관리가 가능한 조각들을 만들어 나중에 결합하는 것이 더 나을 것입니다. AngularJS에서 모듈이 하는 일이 바로 그 것입니다!

AngularJS의 모듈은 애플리케이션의 다른 부분들을 담는 컨테이너입니다. 이를 통해 코드를 조직하여 유지보수와 이해를 용이하게 합니다. 애플리케이션의 다양한 기능들을 저장하는 깨끗이 표시된 상자로 생각해 보세요.

애플리케이션 모듈

애플리케이션 모듈은 모든 다른 상자를 담고 있는 주요 상자입니다. 여기서 AngularJS 애플리케이션이 시작됩니다. 우리의 첫 애플리케이션 모듈을 만들어 보겠습니다:

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

이 줄에서 일어나는 일은 다음과 같습니다:

angular.module()는 새로운 모듈을 생성하는 함수입니다.
'myApp'은 우리가 모듈에 부여하는 이름입니다.
빈 배열 []은 모듈이 가질 수 있는 의존성을 나열할 곳입니다 (나중에 이에 대해 더 설명하겠습니다).

컨트롤러 모듈

이제 우리의 주요 상자(애플리케이션 모듈)가 있다면, 그 안에 더 작은 상자들을 추가해 보겠습니다. 그 중 하나는 컨트롤러 모듈입니다. AngularJS의 컨트롤러는 애플리케이션의 데이터를 관리합니다. 컨트롤러를 만드는 방법을 보겠습니다:

myApp.controller('MyController', function($scope) {
$scope.message = "Hello, AngularJS!";
});

이를 구분해 보겠습니다:

myApp.controller()는 myApp 모듈에 새로운 컨트롤러를 추가합니다.
'MyController'은 이 컨트롤러에 부여하는 이름입니다.
함수는 이 컨트롤러가 하는 일을 정의합니다.
$scope는 컨트롤러가 뷰(HTML)와 소통할 수 있게 해주는 특별한 객체입니다.

모듈 사용

이제 우리가 모듈을 만들었으니, 어떻게 사용할까요? 생각보다 간단합니다! HTML에서 참조하면 됩니다. 다음과 같이 합니다:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>My AngularJS App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MyController">
<h1>{{message}}</h1>
<script src="app.js"></script>
</body>
</html>

여기서 몇 가지 중요한 점을 주목해 보세요:

ng-app="myApp"는 AngularJS가 이곳에서 우리의 앱이 시작된다고 알립니다.
ng-controller="MyController"는 컨트롤러를 본문에 적용합니다.
{{message}}는 컨트롤러에서 정의한 메시지를 표시합니다.

예제

이제 약간 더 복잡한 예제로 모든 것을 통합해 보겠습니다. 간단한 할 일 목록 애플리케이션을 만들겠습니다:

// app.js
var todoApp = angular.module('todoApp', []);

todoApp.controller('TodoController', function($scope) {
$scope.todos = [
{text: 'Learn AngularJS', done: false},
{text: 'Build an app', done: false}
];

$scope.addTodo = function() {
$scope.todos.push({text: $scope.newTodo, done: false});
$scope.newTodo = '';
};
});

그리고 이에 해당하는 HTML입니다:

<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>Todo List</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="TodoController">
<h2>Todo List</h2>
<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span ng-class="{'done': todo.done}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" ng-model="newTodo" placeholder="Add a new todo">
<input type="submit" value="Add">
</form>
<script src="app.js"></script>
</body>
</html>

출력

이 코드를 실행하면 간단한 할 일 목록 애플리케이션을 볼 수 있습니다. 새로운 할 일을 추가하고 완료 체크할 수 있습니다. 이 마법은 우리의 모듈( app.js에 정의된 것)과 HTML 간의 상호작용을 통해 일어납니다.

결론

이제 우리는 AngularJS 모듈의 세계를 여행하며, 기본 개념에서 작동하는 할 일 목록 애플리케이션까지 이르렀습니다. 모듈은 레고 블록처럼 - 복잡한 구조를 조각별로 만들어 나갑니다. AngularJS 여정을 계속하면서 모듈을 사용하여 강력하고 효율적인 웹 애플리케이션을 만드는 더 많은 방법을 발견할 것입니다.

계속 연습하고, 호기심을 가지고, 가장 중요한 것은 코딩을 즐기세요! 누구 knows? 다음 혁명적 앱이 바로 당신의 손끝에 있을지도 모릅니다!

메서드	설명
angular.module()	새로운 모듈을 생성합니다
module.controller()	모듈에 새로운 컨트롤러를 추가합니다
ng-app	AngularJS 애플리케이션을 자동 부트스트랩하는 디렉티브
ng-controller	컨트롤러를 지정하는 디렉티브
ng-repeat	HTML 요소를 반복하는 디렉티브
ng-model	입력을 변수와 바인딩하는 디렉티브
ng-submit	폼 제출 동작을 지정하는 디렉티브
ng-class	동적으로 CSS 클래스를 설정하는 디렉티브

Credits: Image by storyset