|
이클립스 AngularJS(앵귤러제이에스) 프로젝트 만들어서 실행하는 방법 |
|
환경: Eclipse Mars |
AngularJS 는 자바스크립트로 만든 클라이언트 측 MVC/MVVM 프레임워크 입니다. 지금까지 MVC 라고 하면 웹 어플리케이션에서 서버 프로그램에만 구현 가능한 것으로 알고 있었습니다. MVC 패턴의 장점은 확장 가능성, 유지보수성 향상, 편리한 단위 테스트 지원, 표준화 등이 있습니다. 이제 클라이언트 쪽도 AngularJS 를 통해서 제대로 된 구조를 가질 수 있게 되었습니다. 오늘은 이클립스 개발환경에서 AngularJS 프레임워크를 추가하고 샘플 웹 페이지를 만드는 방법에 대해 알아 보겠습니다.
▼ 먼저 이클립스에서 웹 어플리케이션을 만들어 보겠습니다. 새로운 프로젝트를 생성하기 위해 오른쪽 마우스를 눌러 [New] > [Other] 을 선택합니다.
▼ 새 프로젝트 생성 대화상자에서 웹 어플리케이션을 만들기 위해 Web > Dynamic Web Project 를 선택합니다.
▼ 프로젝트 생성 대화상자에서 Project name 을 입력합니다. Target runtime 은 기본 Tomcat 을 지정합니다. 테스트용이기 때문에 모든 옵션은 기본으로 해서 새로운 프로젝트를 생성합니다.
▼ 다음은 생성된 프로젝트에 AngularJS 프레임워크를 다운받아 추가해 보겠습니다. 사이트 주소는 아래와 같습니다. 메인 페이지에서 DOWNLOAD ANGULARJS 버튼을 클릭합니다.
▼ 팝업창에서 선택은 두 가지 입니다. 파일을 다운받아 로컬에서 바로 참조하거나 CDN 주소를 복사해서 사용하는 것입니다. CDN 주소를 사용하면 파일을 다운받을 필요가 없겠죠. 파일을 다운 받고 싶다면 Download 버튼을 클릭합니다.
▼ 다운받은 js 파일 angular.min.js 를 복사해서 웹 페이지 소스가 있는 곳에 복사해야 합니다.
▼ AngularJS 테스트 용으로 만든 프로젝트는 웹 어플리케이션입니다. 웹 사이트 리소스가 들어가는 폴더는 WebContent 입니다. 폴더명은 달라질 수 있으므로 WEB-INF 가 있는 곳을 찾아 복사한 angular.min.js 를 붙여 넣으세요.
▼ 테스트할 HTML 소스는 다음과 같습니다. 동작하는 방식은 input 박스에 데이터를 입력하면 {{id}} 에 자동으로 출력됩니다. {{id}} 가 바로 데이터바인딩 템플릿입니다. 이것이 가능하도록 하려면 Anuglar 어플리케이션에 포함되어 있다는 것을 명시해야 합니다. 그것이 바로 ng-app 입니다. <html ng-app> 태그안에 선언했기 때문에 <html></html> 사이에 AnuglarJS 를 이용한 MVC/MVVM 패턴 구현이 가능한 것입니다. input 박스와 {{id} 의 데이터바인딩은 <input type="text" ng-model="id">처럼 input 박스안에 ng-model 속성값으로 “id” 를 입력해야 합니다. 그럼 $scope 를 통한 데이터 동기화가 이루어 집니다.
<!DOCTYPE html>
<!--Angular.js라이브러리를 사용하겠다고 선언-->
<html ng-app>
<head>
<title></title>
<script src="angular.min.js"></script>
</head>
<body>
<input type="text" ng-model="id">
<h1>{{id}}</h1><!--텍스트 표시-->
</body>
</html>
위의 소스를 이용해서 html 파일을 생성합니다.
▼ 제대로 동작을 하는지 테스트 하기 위해 브라우저에서 웹 어플리케이션을 실행합니다. 화면에 나타난 input 박스안에 값을 입력해 보세요. 그럼 {{id}} 가 있는 위치에 실시간으로 데이터가 표현됩니다.
'프로그래밍 툴 > 이클립스(Eclipse)' 카테고리의 다른 글
| 이클립스(Eclipse) 성능 향상을 위해 코드 자동 완성 기능 끄는 방법 (0) | 2018.09.25 |
|---|---|
| 이클립스 한글 폰트 작게 보이는 경우 설정 변경하는 방법 (0) | 2018.09.24 |
| 이클립스(Eclipse) UML 이용할수 있는 플러그인 설치와 사용 – UML Designer (2) | 2018.05.11 |
| 이클립스(Eclipse) 기본 JDK 버전 설정하는 방법 (1) | 2018.05.02 |
| 이클립스 Spring Framework(스프링 프레임워크) 개발환경 구성하는 방법 (0) | 2017.08.20 |
| 이클립스 Eclipse 콘솔(Console) 글자 출력 버퍼 크기 늘이는 방법 (0) | 2017.06.09 |
| 이클립스 폰트와 색상을 원하는 취향대로 바꾸어보자 (3) | 2016.01.09 |
| 이클립스(Eclipse) SWT, AWT 화면개발에 도움되는 GUI 플러그인 Window Builder (0) | 2015.01.07 |
