AngularJS - 네비게이션 메뉴
안녕하세요, 미래의 웹 개발자 여러분! 오늘은 AngularJS의 흥미로운 세상으로 뛰어들어 나비게이션 메뉴를 만들어 보겠습니다. 네 이웃의 친절한 컴퓨터 선생님이자, 저는 이 여정을 단계별로 안내해드리겠습니다. 마음에 드는 음료를 한 잔 챙기고 편안하게 앉아, 함께 코딩 모험을 떠나보겠습니다!
네비게이션 메뉴는 무엇인가요?
코드로 들어가기 전에 잠시 네비게이션 메뉴가 무엇인지 이해해 보겠습니다. 거대한 도서관에 있다고 상상해 봅시다. 수百万 권의 책이 있는 곳에서 원하는 책을 어떻게 찾을까요? 아마도 표지나 디렉토리를 찾을 것입니다, 아닌가요? 웹사이트의 네비게이션 메뉴는 바로 그 도서관 디렉토리와 같습니다. 사용자가 웹사이트에서 쉽게 길을 찾을 수 있도록 도와줍니다.
네비게이션 메뉴에 AngularJS를 사용하는 이유
"왜 나비게이션 메뉴에 AngularJS를 사용해야 할까요?" 고민이 드실 수 있습니다. AngularJS는 动态적이고 상호작용적인 메뉴를 쉽게 만들 수 있게 해줍니다. 웹 개발의 슈퍼파워가 가득한 스위스 아ーノ이 knife와 같은 존재입니다!
AngularJS 네비게이션 메뉴 시작하기
단계 1: 프로젝트 설정
먼저 프로젝트를 설정해 보겠습니다. AngularJS를 우리의 HTML 파일에 포함시켜야 합니다. 이렇게 합니다:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>My AngularJS Nav Menu</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- Our content will go here -->
<script src="app.js"></script>
</body>
</html>이 코드에서 우리는 HTML이 AngularJS를 사용하고 있음을 알리기 위해 <html> 태그에 ng-app="myApp"를 추가하고 있습니다. 또한 AngularJS 라이브러리와 우리의 자바스크립트 파일(app.js)을 포함시키고 있습니다. 여기서 우리는 AngularJS 코드를 작성할 것입니다.
단계 2: AngularJS 모듈과 컨트롤러 생성
이제 AngularJS 모듈과 컨트롤러를 생성해 보겠습니다. app.js 파일에 다음 코드를 추가하세요:
var app = angular.module('myApp', []);
app.controller('NavController', function($scope) {
$scope.menuItems = [
{ name: 'Home', url: '#/' },
{ name: 'About', url: '#/about' },
{ name: 'Contact', url: '#/contact' }
];
});여기서 우리는 myApp이라는 AngularJS 모듈과 NavController라는 컨트롤러를 생성하고 있습니다. 컨트롤러는 메뉴 항목을 포함한 배열을 가지고 있습니다.
단계 3: 네비게이션 메뉴 HTML 작성
이제 네비게이션 메뉴의 HTML을 추가해 보겠습니다. HTML 파일을 다음과 같이 업데이트하세요:
<body ng-controller="NavController">
<nav>
<ul>
<li ng-repeat="item in menuItems">
<a href="{{item.url}}">{{item.name}}</a>
</li>
</ul>
</nav>
<script src="app.js"></script>
</body>이 코드에서 우리는 ng-controller 디렉티브를 사용하여 AngularJS가 NavController를 사용하도록 지정하고 있습니다. 또한 ng-repeat 디렉티브를 사용하여 메뉴 항목을 반복하여 리스트 아이템을 생성하고 있습니다.
고급 기능
메뉴 항목에 액티브 상태 추가
메뉴에 액티브 상태를 추가하여 더 예쁜 메뉴를 만들어 보겠습니다. 컨트롤러를 app.js 파일에서 다음과 같이 업데이트하세요:
app.controller('NavController', function($scope, $location) {
$scope.menuItems = [
{ name: 'Home', url: '#/' },
{ name: 'About', url: '#/about' },
{ name: 'Contact', url: '#/contact' }
];
$scope.isActive = function(viewLocation) {
return viewLocation === $location.path();
};
});그리고 HTML을 다음과 같이 업데이트하세요:
<li ng-repeat="item in menuItems" ng-class="{ active: isActive(item.url) }">
<a href="{{item.url}}">{{item.name}}</a>
</li>이제 현재 페이지의 메뉴 항목은 'active' 클래스를 가집니다.
드롭다운 메뉴 생성
드롭다운 메뉴를 추가하여 한 단계 더 업그레이드해 보겠습니다. 컨트롤러를 다음과 같이 업데이트하세요:
$scope.menuItems = [
{ name: 'Home', url: '#/' },
{
name: 'Services',
url: '#/services',
subItems: [
{ name: 'Web Design', url: '#/services/web-design' },
{ name: 'SEO', url: '#/services/seo' }
]
},
{ name: 'Contact', url: '#/contact' }
];그리고 HTML을 다음과 같이 업데이트하세요:
<nav>
<ul>
<li ng-repeat="item in menuItems" ng-class="{ active: isActive(item.url) }">
<a href="{{item.url}}">{{item.name}}</a>
<ul ng-if="item.subItems">
<li ng-repeat="subItem in item.subItems">
<a href="{{subItem.url}}">{{subItem.name}}</a>
</li>
</ul>
</li>
</ul>
</nav>결론
이제 여러분은 AngularJS를 사용하여 动态적이고 상호작용적인 나비게이션 메뉴를 만들었습니다. 연습이 완벽을 이루는 길이니, 다양한 스타일과 기능을 실험해 보지 마세요.
이 표는 우리가 사용한 주요 AngularJS 디렉티브를 요약합니다:
| 디렉티브 | 목적 |
|---|---|
| ng-app | AngularJS 애플리케이션의 루트 엘리먼트 정의 |
| ng-controller | HTML 엘리먼트에 사용할 컨트롤러 지정 |
| ng-repeat | 주어진 횟수만큼 HTML을 반복 |
| ng-class | HTML 엘리먼트에 동적으로 CSS 클래스 바인딩 |
| ng-if | 조건에 따라 HTML 엘리먼트를 렌더링 |
계속 코딩하고, 배우고, 가장 중요한 것은 즐겁게 만들어 나가세요! 다음 시간에 다시 뵙겠습니다. 친절한 이웃의 컴퓨터 선생님이자, 행복한 코딩을 기원합니다!
Credits: Image by storyset