AngularJS - 뷰: 초보자 가이드

안녕하세요, 미래의 프로그래머 여러분! 오늘은 AngularJS 뷰의 흥미로운 세상에 빠져보겠습니다. 코드를 한 줄도 적어보지 않았다면 걱정 마세요 - 이 여정에서 친절한 안내자로서 여러분을 引导할 것입니다. 수년 동안 수많은 학생들을 가르친 경험을 바탕으로 말이죠. 그럼 커피(또는 차, 당신의 취향에 따라)를 한 잔 마시면서 시작해 보겠습니다!

AngularJS - Views

AngularJS에서 뷰는 무엇인가?

구체적인 내용에 들어가기 전에 AngularJS에서 뷰가 무엇인지 이해해 보겠습니다. 뷰는 애플리케이션의 "얼굴"이라고 생각해 보세요 - 사용자가 보고 상호작용하는 부분입니다. AngularJS에서 뷰는 데이터를 표시하고 사용자 작업에 응답하는 HTML 템플릿입니다.

이제 AngularJS가 제공하는 뷰 작업 도구를 탐구해 보겠습니다.

ng-view 디렉티브: 동적 콘텐츠의 창

ng-view는 무엇인가?

ng-view 디렉티브는 AngularJS 애플리케이션의 특별한 창입니다. 현재 경로(또는 URL)에 따라 다른 콘텐츠를 표시하면서 전체 페이지를 다시 로드할 필요 없이 작동합니다. 멋지죠?

ng-view를 어떻게 사용하나?

ng-view를 사용하는 것은 매우 간단합니다. HTML 요소에 추가하는 것입니다. 다음은 예제입니다:

<div ng-view></div>

이렇게 하면 이 div가 현재 경로에 따라 다른 뷰를 로드하는 컨테이너로 작동합니다.

실제 세계 예제

예를 들어, 우리는 서점을 위한 간단한 웹사이트를 만들고 있어요. 메인 페이지는 다음과 같을 수 있습니다:

<!DOCTYPE html>
<html ng-app="bookstoreApp">
<head>
<title>내 멋진 서점</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.js"></script>
</head>
<body>
<h1>안녕하세요, 내 멋진 서점에 오셨습니다.</h1>
<div ng-view></div>
<script src="app.js"></script>
</body>
</html>

이 예제에서 <div ng-view></div>는 서점의 다른 페이지(책 목록, 개별 책 상세 정보 등)가 표시될 곳입니다.

ng-template 디렉티브: 뷰의 블루프린트

ng-template는 무엇인가?

ng-view가 창이라면 ng-template는 창에 들어갈 블루프린트입니다. 재사용 가능한 템플릿을 정의하여 AngularJS가 뷰에 사용할 수 있게 합니다.

ng-template를 어떻게 사용하나?

ng-template를 사용하려면 ID를 부여하고, 라우팅 구성에서 참조할 수 있습니다. 다음은 간단한 예제입니다:

<script type="text/ng-template" id="book-list.html">
<h2>우리의 책들</h2>
<ul>
<li ng-repeat="book in books">{{book.title}}</li>
</ul>
</script>

이 템플릿은 책 목록을 표시하는 데 사용됩니다.

$routeProvider 서비스: 트래픽 컨트롤러

$routeProvider는 무엇인가?

$routeProvider 서비스는 애플리케이션의 트래픽 컨트롤러입니다. 현재 URL에 따라 표시할 뷰를 결정합니다.

$routeProvider를 어떻게 사용하나?

$routeProvider는 애플리케이션의 구성 단계에서 설정합니다. 다음은 예제입니다:

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

app.config(function($routeProvider) {
$routeProvider
.when('/', {
template: '<h2>우리 서점에 오신 것을 환영합니다!</h2>'
})
.when('/books', {
templateUrl: 'book-list.html',
controller: 'BookListController'
})
.otherwise({
redirectTo: '/'
});
});

이 구성에서:

URL이 '/'일 때, 환영 메시지를 표시합니다.
URL이 '/books'일 때, 'book-list.html' 템플릿과 'BookListController'를 사용합니다.
다른 URL인 경우 '/'로 리디렉션합니다.

완전한 예제

이제 서점 애플리케이션의 더 완전한 예제를 모두 합쳐 보겠습니다:

<!DOCTYPE html>
<html ng-app="bookstoreApp">
<head>
<title>내 멋진 서점</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.js"></script>
</head>
<body>
<h1>안녕하세요, 내 멋진 서점에 오셨습니다.</h1>
<nav>
<a href="#!">홈</a>
<a href="#!books">책들</a>
</nav>
<div ng-view></div>

<script type="text/ng-template" id="book-list.html">
<h2>우리의 책들</h2>
<ul>
<li ng-repeat="book in books">{{book.title}} 저자: {{book.author}}</li>
</ul>
</script>

<script>
var app = angular.module('bookstoreApp', ['ngRoute']);

app.config(function($routeProvider) {
$routeProvider
.when('/', {
template: '<h2>우리 서점에 오신 것을 환영합니다!</h2><p>우리의 놀라운 책 모음을 확인해 보세요.</p>'
})
.when('/books', {
templateUrl: 'book-list.html',
controller: 'BookListController'
})
.otherwise({
redirectTo: '/'
});
});

app.controller('BookListController', function($scope) {
$scope.books = [
{title: 'To Kill a Mockingbird', author: 'Harper Lee'},
{title: '1984', author: 'George Orwell'},
{title: 'The Great Gatsby', author: 'F. Scott Fitzgerald'}
];
});
</script>
</body>
</html>

여기서 무엇이 일어나고 있나?

우리는 기본적인 HTML 구조를 설정하고 뷰 간의 이동을 위한 링크를 추가합니다.
책 목록 템플릿을 ng-template로 정의합니다.
라우트를 $routeProvider를 사용하여 구성합니다.
책 목록에 데이터를 제공하는 컨트롤러를 생성합니다.

이 애플리케이션을 실행하고 "책들" 링크를 클릭하면 ng-view div에 책 목록이 표시됩니다. 마법이죠?

결론

이제 여러분은 AngularJS 뷰의 첫 걸음을 냈어요! ng-view, ng-template, 그리고 $routeProvider에 대해 배웠고, 이들이 어떻게 함께 작동하여 동적 단일 페이지 애플리케이션을 만드는지 이해했습니다.

코드를 배우는 것은 자전거 타는 것과 같아요 -처음에는 흔들릴 수 있지만, 연습을 하면 곧 달릴 수 있을 거예요. 계속 실험하고 배우며, 가장 중요한 것은 즐기세요!

디렉티브/서비스	목적	예제 사용
ng-view	현재 뷰를 표시할 곳을 정의	`<div ng-view></div>`
ng-template	재사용 가능한 템플릿을 정의	`<script type="text/ng-template" id="template-name.html">...</script>`
$routeProvider	애플리케이션의 라우트를 구성	`$routeProvider.when('/path', { templateUrl: 'template.html', controller: 'ControllerName' });`

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

Credits: Image by storyset