[angular] 앵귤러 eclipse에서 간단한 project 테스트

console mode에서 angular를 설치하고 간단한 project를 생성하고 테스트를 해보았는데요.

[angular] angular 간단한 프로젝트 console에서 테스트

이번에는 eclipse에서 angular plug-in을 설치하고 테스트를 해보도록 하겠습니다.

상단 메뉴에서

File > New > Other…

를 선택하면 창이 하나 뜨고 거기에 Angular가 있는지 확인 합니다.

없네요.

설치가 안되어 있나 봅니다.

그럼 설치를 해보겠습니다.

 

먼저 eclipse 상단 메뉴에서 Eclipse Marketplace를 선택 합니다.

Help > Eclipse Marketplace…

 

그러면 Eclipse Marketplace 팝업 창이 열립니다.

 

Find 입력창에 설치하려는 angular를 입력하고 검색을 합니다.

버전은 시간이 지나면서 변경이 되겠지만 검색된 Angular IDE 설치 합니다.

Angular IDE는 Angular 통합 개발환경으로 자세한 제품 및 기능 설명은

https://www.genuitec.com/products/angular-ide/

이곳을 참조하면 좋은 정보를 얻을 수 있습니다.

[Install] 버튼을 클릭해서 설치할 파일들을 다운받습니다.

 

추가로 설치할 솔루션이 있으면 선택을 하고 [Confirm] 버튼을 클릭 합니다.

라이선스에 동의를 하고 [Finish] 버튼을 선택 합니다.

 

eclipse에 Angular를 설치를 완료 하면 재시작 요청 팝업을 오픈 합니다.

[Restart Now] 버튼을 선택하여 eclipse를 재시작 합니다.

 

재 시작을 하면 eclipse 테마를 변경 시킬 수 있습니다..

 

[Next] 버튼을 선택 합니다.

 

이제 테마를 선택 하는 창이 나오는데 기호에 맞는 테마를 선택 합니다.

여기서는 Darkest Dark Theme를 선택 했습니다.

테마를 선택 했으면

[Next] 버튼을 선택 합니다.

 

추가적인 기능 설치 팝업이 나오는데 Angular IDE를 만든 CodeMix에서 제공하는 건데 모두 Next를 해줍니다.

설치가 끝났으면 이제 원래 하려던 Project를 하나 생성해 보겠습니다.

 

console mode에서 만들어 본 것 처럼 동일하게 만들겠습니다.

 

상단 메뉴에서 Angular Project를 찾기 위해 선택을 하면

File > New > Other…

 

이제는 Angular가 보이는 군요.

Angular Project를 선택 합니다.

생성할 프로젝트에 대한 설정을 하는 팝업 창이 나오네요.

프로젝트 명은 myNgProject로 했고 나머지는

선택할 수 있는 버전들이 있는데 잠시 어떤 버전들이 있는지 볼까요?

그냥 기본으로 설정 합니다.

[Finish] 버튼을 선택 합니다.

Anglar perspective를 보겠냐는데 함 보죠.

eclipse 우측에 머가 나오는 군요.

eclipse 좌측 Project Explorer를 보니 프로젝트가 생성이 되었는데 파일이 없습니다.

아직 다 생성이 된게 아닙니다.

시간이 지나면서 조금씩 파일이 나타납니다.

하단에 프로젝트 생성 진행 상황이 Terminal 창에 보여집니다.

한참 동안 뭔가를 만들다가 화면에 README.md가 나타나면 생성이 된 것 입니다.

README.md에 간단한 프로젝트에 대한 설명이 기술되어 있는데

실행은 ng serve로 하고 접속은 http://localhost:4200으로 하면 된다는 군요.

 

생성된 프로젝트 파일들도 보입니다.

 

프로젝트를 실행 합니다.

프로젝트 명에 마우스를 놓고 우측버튼을 클릭하고

Run As > Angular Web Application

선택하면 또 한참을 하단 Terminal 창에서 먼가를 표시하다가

짠 하고 결과가 나옵니다.

 

테마를 어떤걸 선택하느냐에 따라 화면 비교를 해보겠습니다.

위에서도 화면 캡처를 두가지 버전으로 해보았습니다.

 

Darkest Dark Theme

Fresh Light Theme

테마를 Light로 하니 단점이 있습니다.

원래 Angular IDE가 Dark를 기본으로 해서 그런지 일부 기호가 흰바탕 에서는 희미하게 보이는군요.

개인의 기호니까 가독성이 좋은것으로 선택을 하세요.

저는 노트북과 데스크톱을 달리 해서 좀더 써봐야 겠습니다.

 

- copy coding -