AngularJS는 자바스크립트 기반의 오픈 소스 프론트엔드 웹 애플리케이션 프레임워크의 하나로,
싱글 페이지 애플리케이션 개발 중에 마주치는 여러 문제들을 해결하기 위해 개발되었다 (위키).
AngularJS의 기본 문법들은 간단해서 쉽게 익힐 수 있지만, MVC와 MVVM이 익숙하지 않으면 시작하기 어려운 단점이 있다.
더욱이 Angular CLI는 MVC(MVVM) 개념이 없으면 시작하기 어렵다.
여기에서는 간단한 게시판(CRUD)을 만들면서
AngularJS의 기본 문법을 익히고,
Angular CLI로 예제를 확장하면서 Angular의 특징을 익힐 수 있도록 정리하였다.
- AngularJS 기반 게시판
- Angular CLI 기반 게시판
- Mongoose 연동 (준비중)
여기서는 NodeJS와 AngularJS 문법에 대한 설명을 정리하지 않는다.
몰라도 문제는 없을 것으로 여겨지지만, 조금은 알고 있는 것이 도움이 될 것이다.
먼저, AngularJS의 기본 예제를 작성하면서 문법을 익힌다.
AngularJS의 기본 예제는 W3School에 잘 정리되어 있다.
영어를 몰라도 왼쪽의 메뉴를 클릭해서 예제를 보다 보면 눈치로 기본 문법을 익힐 수 있다 (책을 읽는 것이 가장 좋지만… ).
첫 예제는 W3School의 예제로 입력상자(Text)에서 이름을 입력하면
이름에 ‘Hello’를 붙여서 하단에 출력하는 예제 (위 그림 하단의 코드)이다.
[Try it Yourself] 버튼을 눌러서 실행해 볼 수 있다.
먼저, AngularJS를 사용하기 위해 JS 파일을 포함한다 [라인3].
그리고, AngularJS 사용영역이라고 ng-app 지시자를 이용하여 표시한다 [라인6].
ng-app 지시자의 하위 (자식) 테그(Tag)는 모두 AngularJS로 제어할 수 있다.
입력상자에서 ng-model 지시자로 name이라는 이름을 주고 [라인7],
입력상자에서 사용자가 입력한 값을 {{}} 기호로 출력한다 [라인8].
기존의 JavaScript(JS) 방식으로 설명하면
입력상자의 이름을 name으로 지정하고 (ng-model),
이 name이라는 이름으로 입력상자의 값을 가져와 사용하는 예제이다.
AngularJS에서는 별다른 JS 코드 없이 몇 가지 지정만으로 사용자가 입력한 글이 아래에 출력된다.
ng-app, ng-model, {{}} 를 기억해 두면 된다.
다음 예제는 JS (AngularJS)에서 변수(hello)를 선언하고, 변수(hello)의 값을 HTML에서 {{}}로 출력하는 예제이다.
ng-app의 이름을 myApp으로 지정하고
컨트롤(ng-controller)를 myCtrl로 지정하여 제어하는 예제이다.
대부분의 코드가 컨트롤에서 작성된다.
HTML에서 앱 이름(myApp)과 컨트롤러 이름(myCtrl)을 부여하였다 [라인 18].
이 이름은 자바 스크립트에서 Angular JS가 사용하고 있다.
AngularJS 앱을 지정하고 [라인 9],
앱의 컨트롤러 [라인 11]을 지정하여,
변수 hello에 “Hello World”라는 문자열을 지정하였다 [라인 12].
모든 변수는 $scope 하위에 선언하여 사용한다 [라인 12].
변수의 값은 HTML에서 {{변수}}로 출력한다 [라인 19].
이 구조가 AngularJS의 가장 흔한 기본 구조이니 기억해야 한다.
다음으로 구현할 예제는 다음 그림과 같이 배열의 값을 게시판 리스트 출력하듯이 화면에 출력하는 예제이다.
게시판을 만들기 위해서는
서버에서 Oracle이나 MariaDB 같은 DBMS를 이용하여 저장하지만,
여기서는 AngularJS의개념을 익히기 위하여 간단하게 구현한 것이라
데이터 베이스에 데이터를 저장하도록 처리하지 않고, 배열에 저장하여 구현하였다.
데이터를 저장하기 위해 필드는 JSon으로, 행은 배열([])로 작성하였다 [라인 13~16].
필드는 id, title, writer의 3가지로 구성하였고, 2개의 행을 생성해서 boardlist라는 이름으로 지정하였다.
배열의 값은 ng-repeat 지시자(반복문)로 한번에 모두 출력한다 [라인 28].
ng-repeat 지시자를 TR 태그에 사용하였기 때문에
배열의 개수인 두 개의 TR 태그가 생성된다.
각 행의 값은 ng-repeat에서 지정한 item 변수에 넣어지고
item 변수의 키값(id, title, writer)를 추출해서 값을 출력한다 [라인 30, 31].
$index는 AngularJS에서 제공하는 변수로
현재 출력하는 배열의 위치(인덱스) 값을 제공한다 [라인 29].
기존 코드에 다음 코드와 같이 remove 함수를 추가해서 구현한다.
app.controller("myCtrl", function($scope) {
$scope.boardlist = [
{id: 1, title: 'Title1', writer: 'Writer1'},
{id: 2, title: 'Title2', writer: 'Writer2'}
];
$scope.remove = function (id) {
if (!id) return;
var idx = -1;
for (var i = 0; i < $scope.boardlist.length; i++) {
if ($scope.boardlist[i].id === id) {
idx = i;
break;
}
}
if (idx === -1) return;
$scope.boardlist.splice(idx, 1);
}
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
~~ 생략 ~~
<td style="width: 50px"><button type="button" ng-click="remove(item.id)">삭제</button></td>
~~ 생략 ~~
앞서의 그림처럼 테이블 테그에 열(td)을 추가해서 버튼 태그을 생성하고, 해당 버튼을 클릭하면 remove() 함수를 호출하다.
함수 호출시 파라미터로 행의 키 값인 id 값을 생성한다.
id 값은 각 행의 고유 값(Primary key)을 나타내는 필드로 사용하였다.
일반적인 Click 이벤트 연결은 onclick=”remove(1)”처럼 구현하지만, AngularJS의 컨트롤과 연동하기 위해 ng-click 지시자를 사용한다.
즉, 이 지시자를 이용하여 HTML에서 AngularJS에 있는 함수를 호출할 수 있다.
변수를 $scope 하위에 boardlist로 사용하듯이
함수도 $scope 하위에 선언해서 사용한다 $scope.remove = function (id).
삭제하는 방법은 간단하다.
주어진 id값을 데이터(boardlist)에서 찾아서 지우면 된다.
지정된 행을 찾기 위해서는 모든 데이터들을(boardlist) 처음부터 행(length)의 개수만큼 반복해서 (for)
If문으로 값을 비교하고 if ($scope.boardlist[i].id === id),
id값이 일치하면 그 위치의 행을 삭제한다 .
배열을 삭제하는 것이기 때문에 splice() 함수를 이용한다.
주어진 id의 행을 찾는 것은 for문 대신에 다음과 같이 배열의 findIndex 함수를 사용하여 쉽게 구현할 수도 있다.
IE 하위버전에서 사용할 수 없다.
var idx = $scope.boardlist.findIndex(function (item) {
return item.id === id;
});
이상의 삭제 예제에서 알아야 할 것은,
AngularJS에서 함수를 생성하는 방법과 어떻게 HTML에서 AngularJS의 함수를 호출하는 가이다.
$scope와 ng-click 을 기억해야 한다.
이번에는 그림과 같이 사용자가 입력한 값을 추가하는 기능을 구현한다.
기존 코드에 다음 코드와 같이 addBoard함수와 Form 테그 등을 추가해서 구현한다.
$scope.boardForm = {};
$scope.addBoard = function () {
var newId = ! $scope.boardlist.length ? 1 : $scope.boardlist[$scope.boardlist.length - 1].id + 1;
var newItem = {
id: newId,
title: $scope.boardForm.title,
writer: $scope.boardForm.writer
};
$scope.boardlist.push(newItem);
}
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form ng-submit="addBoard()">
Title: <input type="text" ng-model="boardForm.title" autofocus> <br/>
Name: <input type="text" ng-model="boardForm.writer"><br/>
<button type="submit">Add</button>
</form>
제목(boardForm.title)과 이름(boardForm.writer)을 입력 받을 수 있도록 HTML 입력상자(Text)를 생성하고,
ng-model로 각각 이름을 boardForm.title과 boardForm.writer로 지정하였다.
boardForm라는 Json 형식의 변수를 AngularJS에서 선언하고, 구성 멤버를 id, title, writer로 지정하여 사용한다.
이 구성 멤버를 HTML에서 이름(boardForm.title, boardForm.writer)으로 바인딩시켜,
사용자가 값을 입력하면 자동으로 AngularJS의 boardForm 변수에 저장된다.
사용자가 저장 버튼을 클릭하면(submit), AngularJS의 addBoard함수를 호출하여, 새로운 행(Json)을 생성하여 배열에 넣어준다 (push).
HTML 입력상자(text)와 Angular 변수를 연결해서(Binding) 사용하는 개념을 이해해야 한다.
이번 예제의 핵심 개념이다.
id 값이 순서대로 정렬되어 있다는 전제로,
마지막 id 값이 가장 크다고 여겨서 마지막 id 값에 +1 한 값을 새로운 행의 id 값이 되게 구성하였다.
이 ID 값으로 삭제를 구현하였다.
이 ID 값을 이용하여 구현하지 않은 수정기능을 각자 구현해 보길 바란다.
AngularJS가 쉽고 재미난 프레임워크라는 것을 알 수 있다.
다음으로 AngularJS CLI를 정리한다.
AngularJS CLI로 가기 전에 앞서의 예제에서 구현하지 않은 수정 기능을 구현해 보는 것이 도움이 될 것 같다.
'Node.js > Angular JS' 카테고리의 다른 글
| 2. Angular CLI 기반 게시판 (4) | 2018.02.28 |
|---|