Please Enable JavaScript!
Gon[ Enable JavaScript ]

반응형

이클립스 AngularJS(앵귤러제이에스) 프로젝트 만들어서 실행하는 방법

 

환경: Eclipse Mars

 

AngularJS 는 자바스크립트로 만든 클라이언트 측 MVC/MVVM 프레임워크 입니다. 지금까지 MVC 라고 하면 웹 어플리케이션에서 서버 프로그램에만 구현 가능한 것으로 알고 있었습니다. MVC 패턴의 장점은 확장 가능성, 유지보수성 향상, 편리한 단위 테스트 지원, 표준화 등이 있습니다. 이제 클라이언트 쪽도 AngularJS 를 통해서 제대로 된 구조를 가질 수 있게 되었습니다. 오늘은 이클립스 개발환경에서 AngularJS 프레임워크를 추가하고 샘플 웹 페이지를 만드는 방법에 대해 알아 보겠습니다.

 

먼저 이클립스에서 웹 어플리케이션을 만들어 보겠습니다. 새로운 프로젝트를 생성하기 위해 오른쪽 마우스를 눌러 [New] > [Other] 을 선택합니다.

이클립스 AngularJS(앵귤러제이에스) 프로젝트 만들어서 실행하는 방법

 

새 프로젝트 생성 대화상자에서 웹 어플리케이션을 만들기 위해 Web > Dynamic Web Project 를 선택합니다

이클립스 AngularJS(앵귤러제이에스) 프로젝트 만들어서 실행하는 방법

 

프로젝트 생성 대화상자에서 Project name 을 입력합니다. Target runtime 은 기본 Tomcat 을 지정합니다. 테스트용이기 때문에 모든 옵션은 기본으로 해서 새로운 프로젝트를 생성합니다

이클립스 AngularJS(앵귤러제이에스) 프로젝트 만들어서 실행하는 방법

 

다음은 생성된 프로젝트에 AngularJS 프레임워크를 다운받아 추가해 보겠습니다. 사이트 주소는 아래와 같습니다. 메인 페이지에서 DOWNLOAD ANGULARJS 버튼을 클릭합니다.


https://www.angularjs.org/

이클립스 AngularJS(앵귤러제이에스) 프로젝트 만들어서 실행하는 방법

 

팝업창에서 선택은 두 가지 입니다. 파일을 다운받아 로컬에서 바로 참조하거나 CDN 주소를 복사해서 사용하는 것입니다. CDN 주소를 사용하면 파일을 다운받을 필요가 없겠죠. 파일을 다운 받고 싶다면 Download 버튼을 클릭합니다

이클립스 AngularJS(앵귤러제이에스) 프로젝트 만들어서 실행하는 방법

 

다운받은 js 파일 angular.min.js 를 복사해서 웹 페이지 소스가 있는 곳에 복사해야 합니다

이클립스 AngularJS(앵귤러제이에스) 프로젝트 만들어서 실행하는 방법

 

AngularJS 테스트 용으로 만든 프로젝트는 웹 어플리케이션입니다. 웹 사이트 리소스가 들어가는 폴더는 WebContent 입니다. 폴더명은 달라질 수 있으므로 WEB-INF 가 있는 곳을 찾아 복사한 angular.min.js 를 붙여 넣으세요

이클립스 AngularJS(앵귤러제이에스) 프로젝트 만들어서 실행하는 방법

 

테스트할 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 파일을 생성합니다

이클립스 AngularJS(앵귤러제이에스) 프로젝트 만들어서 실행하는 방법

 

제대로 동작을 하는지 테스트 하기 위해 브라우저에서 웹 어플리케이션을 실행합니다. 화면에 나타난 input 박스안에 값을 입력해 보세요. 그럼 {{id}} 가 있는 위치에 실시간으로 데이터가 표현됩니다

이클립스 AngularJS(앵귤러제이에스) 프로젝트 만들어서 실행하는 방법

반응형
Posted by 녹두장군1
,