'AngularJS' 카테고리의 글 목록

'AngularJS'에 해당되는 글 40건

2015.10.22 [AngularJS SPA] "실전 프로젝트로 배우는 AngularJS" 출간 회고4
2015.01.05 [AngularJS] v1.3 - One-time bindings
2014.08.04 [AngularJS SPA] 앵귤러 기반 싱글 페이지 웹 애플리케이션 개발하기4
2014.08.04 [Directive Driven] 히치하이커를 위한 Directive 만들어 보기
2014.08.03 [AngularJS] 배우는 방법 & 기본 개념 잡기2
2014.06.17 [Directive Driven] 하이브리드 앱 프레임워크 for Angular.js
2014.06.04 [Directive Driven] Google Chart Directive 사용하기
2014.06.03 [MEAN Stack] Protractor 통한 클라이언트 E2E Test
2014.06.02 [MEAN Stack] Karma 통한 클라이언트 Unit Test
2014.05.28 [MEAN Stack] 다국어 처리하기1
2014.02.04 [MEAN Stack] 로그인 서비스 개발 및 정보 저장하기
2014.01.30 [MEAN Stack] Yo 이용하여 Controller 생성하고 UI-Router에 설정하기
2014.01.29 [MEAN Stack] 메뉴 구성하고 UI Routing 설정하기
2014.01.29 [MEAN Stack] CSS Framework 및 Angular Library 사전준비하기
2014.01.26 [MEAN Stack] 프론트앤드 자동화 도구 Yeoman 설치와 사용법
2014.01.02 [MEAN Stack] Community 서비스
2013.12.15 [MEAN Stack] UX를 간편하게 구현하자
2013.12.05 [MEAN Stack] Angular.js 개요3
2013.11.28 [AngularJS] Prototypal 상속과 Isolated Scope의 관계에 대하여
2013.11.25 [MEAN Stack] 무엇을 쓸것인가? 목차에 대하여1

2015. 10. 22. 10:41 AngularJS

[AngularJS SPA] "실전 프로젝트로 배우는 AngularJS" 출간 회고

본 서적은 자바스크립트와 앵귤러 프레임워크를 프로젝트에 도입해 보려는 개발자 또는 프로토타입을 해보고 싶은 개발자 또는 사용해 본 경험이 있는 개발자를 대상으로 한다. 앵귤러에 대해 처음 공부하는 분에게는 다소 어려울 수 있으므로 기초서적을 권장드린다. 책 제목처럼 3장이후 부터 실전 프로젝트 실습을 위한 상세 소스를 GitHub에서 제공한다. 1~2장은 개념 정리이므로 읽고 나중에 참조하는 장으로 사용한다. 참고로 2장은 실습이 없이 개념을 설명하는 장이기에 소스를 제공하지 않고 있다. (소스의 Git Branch는 장이 끝나는 시점에 언급하고 있다. 먼저 전체 소스를 보고 싶다면 GitHub 내용을 참조하자)

출판의 여정

8개월의 원고작성, 3개월의 편집기간을 거쳐 드디어 책이 출간되었다. 책을 통해 개발자들과 공유하자는 의기투합은 2013년 겨울로 거슬러 올라간다. 이강훈님을 통해 알게된 이규원님, 김충섭님, 김대권님, 박유진님, 구교준님과 함께 MEAN 스택을 기획했었다. 그 당시 미국에 있었던 지라 구글 행아웃을 통해 주말마다 화상미팅을 하며 깃헙과 페이스북을 통해 서로의 의견과 결과물을 공유했다. 2014년 봄 귀국후 함께 오프라인에서 헤커톤도 하면서 책의 샘플을 만들며 진행했지만 각자의 일정으로 인해 MEAN 스택 집필을 흐지부지 되어갔다. 2014년 7월쯤 결단을 내리고 이렇게 진행하면 끝나지 않겠다 싶어서 다음 기회를 기약하였고, 홀로 책을 쓰기로 결심했다.

2014년 8월 이강훈님 회사인 스터디지피에서(https://bagle.io)의 서비스를 개발하면서 미국 플젝에서 얻은 AngularJS 경험과 개념정리가 덜 된 부분을 하나하나 집어가며 집필을 시작했다. 처음에는 한 페이지를 나가는데 하루의 시간이 걸리더니 조금씩 속도가 붙으면서 한달만에 100p 가량을 썼다. 하지만 다시 가을 미국 프로젝트로 2달간 집필 중단 후 한국에 돌아와 마음을 다잡고 12년전 내 책을 출판해 보자는 꿈을 다시한번 상기했다. 위키북스의 박찬규 대표님도 은근히 압력을 넣어주시며 언제쯤 나올까요 물어볼때마다 곧 나올겁니다 대답하곤 하루 1~2시간씩 짬을 내어 집필을 계속했다. 2015년 3월 집필을 완료하고 출판사에 전달했지만 피드백으로 날아온 것은 맞춤법과 문장 난해함에 대한 엄청난 지적질의 빨간줄이었다.

한달간 주말마다 빨간 선생님과 싸움하며 "그래 글쓰는 것도 배우는 거다"라고 생각하고 나의 국어실력을 한탄하며 글을 풀어서 이야기식으로 고쳐나갔다. 사실 블로그를 쓰다보니 블릿(점, 점으로 요약한 내용)으로 내용을 요약해 표현하다 보니 책도 그렇게 썼드랬다. 블릿 내용을 다 풀어쓰는 것만도 한달. 다시 피드백받아 또 고치고 피드백받아 또 고치고, "아 무한루프의 피드백". 점점 스트레스와 화가 살짝 났다. 인생 목표 10가지중 1가지가 1년에 책한권씩 내자였던 것이 여지없이 깨지는 순간이었다. 이렇게 하다가는 2년에 한권내는 것도 힘들겠다 싶었다. 하지만 일에는 끝이 있는 법. 5월초 거의 마무리 피드백을 보내고, 책 추천사를 받고 인덱스를 보내고, 몇가지 피드백을 마무리하며 3개월의 수정작업은 6월 5일 마무리되었고, 예약 판매가 모든 온라인 서점에서 시작되었다. 그렇게 나온 것이 "실전 프로젝트로 배우는 AngularJS" 이다.

본 서적은 AngularJS가 하도 유행이라 하여 한번쯤은 기초서적을 구매하거나 빌려서 본적이 있고, 온라인 튜토리얼을 통해 프로토타입핑을 해보았지만 당췌 AngularJS로 서비스를 어떻게 만들어야 할지 모르는 개발자를 위한 책이다. "나도 내가 원하는 서비스 뚝딱 만들어 보고 싶어 근데 어떻게 시작해야는 거야?"라고 생각하는 모든 개발자를 위한 책이다. AngularJS는 생태계를 가지고 있고 인식의 전환을 해야하는 새로운 용어들이 존재한다.

처음 1장에서는 간단한 ToDo 서비스를 만들면서 주변의 생태계 도구와 개념을 이해하고 2장에서는 AngularJS의 장점들과 그중에 지시자(Directive)에 대해 좀 더 심도있게 설명을 했다. 3장, 4장에서 서비스를 바로 만들 줄 알았다면 오산이다. 이제 서비스를 만들 준비운동단계이다. 먼저 요건정의를 하고 이에 맞는 코딩 컨벤션 부터 AngularJS를 이용한 SPA 개발시 준비할 것들을 프론트앤드 아키텍처로 접근해 보았다. 5장에서 이제 좀 개발들어가려 했더니 그래도 요즘 많이 사용하는 NodeJS, MongoDB는 알고가자는 취지에서 개념과 실습코드를 넣었다. 1장~5장이 준비운동과 스타트 단계였다면 6장, 7장은 엄청난 스피도로 골인점을 향해가는 단계이다. 올초 2개월간 TossLab의 JANDI(http://www.jandi.com)에서 AngularJS에 대한 컨설팅 경험을 적용한 장이다.

▣ 01장: 단일 페이지 애플리케이션 개발 준비
1-1. 개발 도구 설치
- 깃 설치
- 노드 설치
- 요맨 설치
- 서브라임 텍스트 편집기 설치

1-2. 단일 페이지 애플리케이션 생성
- yo generator 선택과 설치
- Yo를 이용한 ToDo 애플리케이션 생성
1-3. 애플리케이션 컴포넌트 생성
- 앵귤러를 위한 index.html 설정 이해하기
- yo를 이용한 앵귤러 컨트롤러 추가
- bower를 이용한 앵귤러 지시자 추가
1-4. 애플리케이션 테스트 및 빌드
- grunt를 이용한 테스트
- grunt를 이용한 배포
정리

▣ 02장: AngularJS 프레임워크 이해
2-1. MV* 프레임워크
2-2. 양방향 데이터 바인딩
- 스코프 내부와 상속 관계
- MyToDo 애플리케이션에서 양방향 데이터 바인딩
- 스코프 생명 주기(Life Cycle)
- 그 외 $scope 객체 메서드
2-3. 의존성 주입(DI, Dependency Injection)
2-4. 클라이언트 템플릿
2-5. 지시자(Directive)
- 지시자가 DOM에 적용되는 순서
- 지시자 정의
- 지시자의 스코프 객체의 범위 종류
- Template, TemplateUrl, TemplateCache, replace와 ng-template 사용
- compile, link의 $watch 등록을 이용한 양방향 데이터 바인딩
- controller, require와 link 네 번째 파라미터와의 관계
- transclude, ng-transclude 사용
2-6. 테스트 프레임워크(단위, E2E)
- 카르마 기반 단위 테스트
- 프로트랙터 기반 E2E 테스트
정리

▣ 03장: 싱글 페이지 애플리케이션 기획및 생성
3-1. 애플리케이션 기획
- 메인 페이지
- 그룹 정보 페이지
- 그룹 활동 페이지
- 설문 생성 페이지
3-2. 애플리케이션 제너레이터 설계
- 애플리케이션의 폴더 구조 전략
- 애플리케이션 제너레이터 선정
- 앵귤러 코드 스타일 전략
- 스타일 가이드에 따른 제너레이터 템플릿 수정 방법
- IE8 지원을 위한 index.html 설정
3-3. SPA 생성
- 애플리케이션의 모듈 구성
- 라우팅 설정 방식
3-4. 단위 업무를 위한 앵귤러 컴포넌트 조합
- $resource를 통한 REST 모델 사용
- promise와 $q Async 호출에 대한 이해
정리

▣ 04장: 애플리케이션을 위한 공통 프레임워크 개발
4-1. 공통 프레임워크 모듈 개발
- 다국어 처리
- 메시지 처리
- 팝업 메시지창 지시자
- HTTP 에러 처리
- 사용자 정의 Bower 컴포넌트 등록
- 로컬 저장소 서비스
- 유틸리티 지시자
4-2. 로그인 화면 개발
- 트위터 부트스트랩 기반의 화면 디자인 및 폰트 사용
- 폼 유효성(Form Validation) 검사
- 인증을 위한 토큰과 쿠키
4-3. OAuth를 이용한 인증 처리
- 백엔드에서 Passport 모듈을 이용한 인증 처리
- 페이스북 인증 처리
- 크롬 브라우저 개발자 도구를 이용한 클라이언트 디버깅
- 노드 인스팩터를 이용한 서버 디버깅
정리

▣ 05장: 메인 페이지 개발
5-1. 백엔드 API 개발
- REST API 별 서버 모듈 조합
- 노드 모듈의 exports 이해
- 몽고디비와 몽구스 이해
- 서버 모델 개발
- 그룹 REST API 개발
- 포스트맨을 이용한 REST API 검증
- 백엔드 단위 테스트 수행
5-2. 메인 화면 개발
- 공통 컴포넌트 재구성
- 메인 화면 레이아웃 개발
- 그룹 생성
5-3. 그룹 목록 및 정보 표현
정리

▣ 06장: 그룹 페이지 개발
6-1. 그룹 정보 페이지
- 그룹 상세 정보 조회
- 그룹 프로필 이미지 변경
- 그룹 가입, 탈퇴
6-2. 그룹 활동 페이지
- 그룹 활동 화면 레이아웃 개발
- 그룹 멤버 목록 표현
6-3. 설문 카드 생성
- 설문 카드 생성
- 카드 지시자 개발
6-4. 설문 종류별 카드 표현
6-5. 설문 응답 및 결과 표현
정리

▣ 07장: 실시간 반응 개발
7-1. Socket.IO 기반 실시간 연동
- 노드 기반 백엔드 Socket.IO
- AngularJS 기반 프런트엔드 Socket.IO
- 상단 알림 메뉴 추가
7-2. 카드 목록 UX 개선
- 카드에 동영상 추가
- 무한 스크롤 적용
- 애니메이션 효과 적용
7-3. AngularJS 성능 옵션
- 일회 바인딩
- ngModelOptions 지시자
- 디버깅 정보 비활성화
- $applyAsync 적용

정리

구매

현재는 예약 판매로 10% 싸게 구매 할 수 있다. 6월 17~19일간 배송을 시작한다. 당초 높은 가격이 책정되었지만 위키북스 대표님에게 가격이 높아 개발자에게 부담이 될 것 같다하였더니 파격적인(?) 가격에 판매를 시작해 주셨다. 지금까지 독자로 책을 사보면서 철자하나 틀리면 왠지 기분이 나쁘고 지적을 해주고 싶었는데 이제부터는 너그러이 용서해 줄것 같다. 정말 많은 공력과 시간이 투여되는 시간이었다. 하지만 새로운 경험을 하게 되었고 이렇게 해서 책 한권 한권이 출판된다는 생각을 하니 한권의 책을 사도 감사히 볼 마음가짐이 생긴다.

이번달 중으로 출판사의 양해를 얻어 1장과 2장은 블로그에 공개하려 한다. 2장은 AngularJS v1.* 이 계속 사용되는 한 유용한 레퍼런스가 되리라 생각한다. 이렇게 생애 첫 책 출판을 자축하며... 내년에는 "Data Visualization using D3.js" 이고, 여기에 ReactJS 또는 AngularJS v2.* 와 Meteor를 접목한 경험을 출판할 계획이다. 글쓰기도 가끔은 중독이다. 자전거 처럼 잘 타지는 못하지만 타고 있는 동안은 자유다. 나를 표현하고 느낄 수 있는 시간이랄까~~~

소스

책의 소스는 모두 깃헙에 있습니다. 책 챕터마도 브랜치에 대한 정보가 담겨 있습니다.

책 소스를 위한 깃헙 그룹 : https://github.com/AngularJS-SPA-Development

저작자표시 비영리 변경금지

'AngularJS' 카테고리의 다른 글

[AngularJS SPA] 앵귤러 기반 싱글 페이지 웹 애플리케이션 개발하기 (4)	2014.08.04

posted by Peter Note

2015. 1. 5. 20:25 AngularJS/Concept

[AngularJS] v1.3 - One-time bindings

AngularJS v1.3에서 많은 기능들이 새롭게 추가되었지만 우선 성능에 영향을 미쳤던 부분을 해결하는 방법을 알아보자.

양방향 데이터 바인딩 이해

AngularJS의 특징중 양방향 데이터 바인딩은 reactive programming의 구현체라고 할 수 있다. Meteor의 Blaze, Facebook의 React도 같은 기능을 제공한다. 이들은 HTML과 JS사이에 특별한 코드의 등록없시도 HTML->JS / HTML <- JS 양방향으로 데이터 갱신이 가능하다. AngularJS에서 양뱡향 데이터 바인딩의 중요 매개체는 $scope이고 해당 객체 내부에는 데이터의 변경을 감시하는 $watch가 있는데, 모든 개별 데이터마다 $watch가 등록된다. 하기와 같이 $scope.name에 대한 expression도 watcher(감시자, 즉 $watch)가 등록된다. (예제)

name이 $scope에 속성으로 선언되어 HTML에서 사용을 하면(사용하지 않는 속성은 등록되지 않음) AngularJS는 $watch를 모두 등록하고 $scope 속성 하나라도 변경이 되면 Duty-Checking방식으로 AngluarJS Context안의 $digest 루프를 돌면서 매칭되는 $scope의 속성을 사용하는 DOM 내역을 동적으로 변경한다. 여기서 생각해 볼것은 만일 화면에 뿌려지는 $scope의 속성값이 100개이고(테이블이나 리스트 같은 경우 ng-repeat을 사용한다면) 최초 화면이 뿌려진 후 단 1개만이 사용자의 액션이나 실시간 Push를 통해 변경되는 것이어도 100의 $watch를 $digest루프를 돌며 변경을 체크하게 된다. 100개가 아니라 10만개라면 어떻게 될까? 분명 성능상에 영향을 미칠것이다. $watch, $digest에 대한 사항은 블로그를 읽어보자

Watch Expressions 성능 개선

one-time expression은 최초 digest 루프를 한번 타고 값이 설정되면 그 다음에 다시 digest 루프를 타지 않게 해주는 것이다. 따라서 최초 동적 바인딩이 이루어진 후에는 $watch에서 제거되어 digest 루프를 타지 않도록 함으로 성능상의 이점을 누릴 수 있다. 사용방법은 간단히 $scope의 속성앞에 :: 를 하기와 같이 표기한다. (예제)

이제 최초에 한번 데이터를 바인딩한 후에 동적 변경이 필요없는 HTML안의 AngularJS Expression들에 One-Time-Binding을 사용하자.

<참조>

- Explorering Angular v1.3 - One-Time-Binding

- $watch, $digest는 무엇인가?

저작자표시 비영리 변경금지

'AngularJS > Concept' 카테고리의 다른 글

[Directive Driven] 히치하이커를 위한 Directive 만들어 보기 (0)	2014.08.04
[AngularJS] 배우는 방법 & 기본 개념 잡기 (2)	2014.08.03
[Directive Driven] 하이브리드 앱 프레임워크 for Angular.js (0)	2014.06.17
[Directive Driven] Google Chart Directive 사용하기 (0)	2014.06.04
[AngularJS] Prototypal 상속과 Isolated Scope의 관계에 대하여 (0)	2013.11.28

posted by Peter Note

2014. 8. 4. 00:41 AngularJS

[AngularJS SPA] 앵귤러 기반 싱글 페이지 웹 애플리케이션 개발하기

AngularJS(이하, 앵귤러) 기반의 싱글 페이지 웹 애플리케이션 개발에 대한 책을 집필하고 있다. 책안에 들어갈 내용을 위해 참조한 내역을 정리해 보고자 한다. 요즘 가장 큰 화두는 다양한 프론트 앤드 프레임워크가 나옴에 따라 프론트 앤드 개발에도 아키텍팅이 필요하다는 것이다. 프론트 앤드에서는 SPA(Single Page Application 이하, 싱글 페이지 웹 애플리케이션)가 앵귤러 프레임워크 기반으로 많이 소개 되고 있다. 싱글 페이지 웹 애플리케이션 접근 방식은 JSP, PHP같은 서버 템플릿이나 스프링 프레임워크에 익숙한 개발자에게는 생소한 개념이다.

싱글 페이지 웹 애플리케이션(SPA)은 "싱글 페이지 웹" 글자만 빼면 그냥 애플리케이션이다. 윈도우에 설치해서 사용하는 .exe 애플리케이션 개발 방식과 하등 차이가 없고 보여지는 기반이 브라우저안이라는 것 밖에 없다. 몇년전 리치 인터넷 애플리케이션(RIA)를 이끌었던 플랙스(Flex)를 떠올려도 좋다. 하지만 지금은 모바일과 웹의 시대이니 HTML/CSS/JavaScript 만으로도 충분히 애플리케이션을 만들 수 있어야 한다.

앵귤러는 애플리케이션을 만드는 프레임워크이다. 스프링 MVC 패턴의 개발을 했다면 앵귤러에서도 그렇게 할 수 있다. 스프링 의존성 주입의 편리함을 누리고 있다면 앵귤러에서도 그렇게 할 수 있다. 이제 웹의 세상에 맞는 애플리케이션 개발자로 거듭나 보자.

1장. 싱글 페이지 애플리케이션 개발 준비

+ 1-1 개발 도구 준비

+ 1-2 싱글 페이지 애플리케이션 생성

+ 1-3 애플리케이션 컴포넌트 생성

+ 1-4 애플리케이션 테스트 및 빌드빌드

2장. AngularJS 프레임웍 이해

+ 2-1 MV* 프레임웍

+ 2-2 양방향 데이터 바인딩

+ 2-3 의존성 주입

+ 2-4 클라이언트 템플릿

+ 2-5 지시자 (Directive)

+ 2-6 테스트 프레임웍

3장. 싱글 페이지 애플리케이션 기획 및 생성

+ 3-1 애플리케이션 기획

+ 3-2 애플리케이션 제너레이터 생성

+ 3-3 싱글 페이지 애플리케이션 생성

+ 3-4 단위 업무를 위한 앵귤러 컴포넌트 조합

4장. 애플리케이션을 위한 공통 프레임웍 개발

+ 4-1 공통 프레임웍 모듈 개발

+ 4-2 로그인 프론트앤드 개발

+ 4-3 OAuth를 이용한 인증 처리

5장. 메인 페이지 개발

+ 5-1 백앤드 API 개발

+ 5-2 프론트앤드 화면 레이아웃

+ 5-3 그룹 목록 및 정보 표현

6장. 그룹 페이지 개발

+ 6-1 그룹 정보 페이지

+ 6-2 그룹 활동 페이지

+ 6-3 설문 카드 생성

+ 6-4 설문 카드 목록에 표현

+ 6-5 설문 응답 및 결과 표현

7장. 실시간 반응 개발

+ 7-1 Socket.IO 기반 실시간 연동

+ 7-2 카드 표현 고도화

+ 7-3 AngularJS 성능 옵션

총 7개의 목차 중에서 1, 2장을 출판사의 양해를 얻어 공개토록 한다.

저작자표시 비영리 변경금지

'AngularJS' 카테고리의 다른 글

[AngularJS SPA] "실전 프로젝트로 배우는 AngularJS" 출간 회고 (4)	2015.10.22

posted by Peter Note

2014. 8. 4. 00:11 AngularJS/Concept

[Directive Driven] 히치하이커를 위한 Directive 만들어 보기

Highchart에 대한 Directive를 만들며서 controller, compile, link 등을 써보고 있는데, 성능 최적화 및 실시간 데이터 업데이트 방법등에 대해서 고민하면서 좋은 글이 있어서 머리도 정리할 겸 따라쟁이 해본다.

1. Directive 사용 영역

- HTML안에서 element, attribute, class name, comment 4영역

2. 이름 규칙

- HTML안에서 하이픈(hyphens) 으로 단어 사이를 구분하여 사용

- JavaScript안에서 단어사이는 대문자로 구분하여 사용

App.directive('theQuickSilverRiderYoungsik', function() { ... });

3. 테스트전 SaaS

- http://plnkr.co/ 코드 테스트 Preview 서비스를 이용한다

- GitHub 아이디로 로그인 한후 -> [Launch the Editor] 한다

- 자신의 테스트 코드 및 타인의 코드를 서로 공유할 수 있다

- 해당 서비스 자체가 AngularJS 기반으로 만들어 졌다 (Node.js + AngularJS 소스 공개)

- 그림 오른쪽의 angular.js 라이브러리 버전을 선택하면 index.html에 자동 삽입되고 코딩을 시작할 수 있다

4. 간단한 테스트 수행

- 사용자 정의 태그를 만든다

- 이름 : angular

// index.html

// script.js

var App = angular.module('App', []);
 
App.directive('angular', function() {
  return {
    restrict: 'ECMA',
    link: function(scope, element, attrs) {
      var img = document.createElement('img');
      img.src = 'http://goo.gl/ceZGf';
 
 
      // directives as comment
      if (element[0].nodeType === 8) {
        element.replaceWith(img);
      } else {
        element[0].appendChild(img);            
      }
    }
  };
});

- plunker preview

- <angular> 태그에 <img> 태그가 추가되었다

5. Directive Definition

- AngularJS는 기동될 때(bootstrapped), 사용자정의 및 빌트인된 directives를 찾고 $compile() 메소드를 이용하여 컴파일을 한다

- compile 메소드 역할 : 모든 directives 요소를 찾아서 우선순위 sort하고 link function을 만든다. 또한 scope와 element사이의 2-way data binding을 위하여 $watch를 셋팅하거나 event listener를 생성된 (ng-app, ng-controller, ng-include, etc)같은 scope에 link한다

- Directive 정의

var myModule = angular.module(...); 
myModule.directive('directiveName', function (injectables) {
  return {
    restrict: 'A',
    template: '<div></div>',
    templateUrl: 'directive.html',
    replace: false,
    priority: 0,
    transclude: false,
    scope: false,
    terminal: false,
    require: false,
    controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... },
    compile: function compile(tElement, tAttrs, transclude) {
      return {
        pre: function preLink(scope, iElement, iAttrs, controller) { ... },
        post: function postLink(scope, iElement, iAttrs, controller) { ... }
      }
    },
    link: function postLink(scope, iElement, iAttrs) { ... }
  };
});

5-1. Compile function

- compile function이 link function을 만든다(produce)

- 2개 파라미터

+ tElement : directive가 선언되어진 template element (jQuery object이다. 따라서 $로 다시 wrap하지 마라)

+ tAttrs : tElement와 관련된 모든 attributes 목록

- ng-repeat같은 것을 사용할 경우 성능상의 이슈로 compile function이 사용된다. DOM과 scope객체를 연결지으려는데 데이터를 가져올 때마다 바인드과정을 거치지 않고 최초 한번 바인드되고 link functioin을 통해서 데이터 변경시에 scope-DOM간의 2-way 바인딩을 하여 변경을 반영한다

// in index.html

// in script.js

App.directive('compileCheck', function() {
   return {
     restrict: 'A',
     compile: function(tElement, tAttrs) {
       tElement.append('Added during compilation phase!');
     }
   };
});

- index.html에 <div compile-check></div>를 추가하고 script.js에 코드를 추가하면 하단에 'Added during compilation phase!'가 첨부된다

5-2. Link function

- DOM과 scope 객체를 2-way data binding 하는 역할이다. compile function에서는 scope 객체에 접근할 수 없다

- $watch 메소드를 통하여 사용자정의 listener를 생성할 수 있다. (register등록은 angular가 자동으로 해준다)

- 3개 파라미터

+ element : directive와 바인드된 요소

+ scope : directive에 의해 사용되어지는 scope 객체

+ attrs : 요소와 관련된 모든 attribute목록

5-3. Restrict

- E : elements

- A : attributes

- C : class name (CSS)

- M : comments

- HTML5 호환 표기가 가능한다 : 빌트인 ng-bind 사용

<span ng:bind="name"></span>
<span ng_bind="name"></span>
<span ng-bind="name"></span>
<span data-ng-bind="name"></span>
<span x-ng-bind="name"></span>

5-4. Template

- html에 넣은 요소와 교체할 내역

- html안의 태그 반복되는 부분을 별도의 모듈화로 중복을 방지 할 수 있다

- https://api.github.com/repos/angular/angular.js 호출하면 angular.js 관련 정보가 JSON 형태로 나옴

// index.html

// script.js

- $scope는 $rootScope를 상속받기 때문에 template에서 {{header}}, {{footer}}를 호출 할 수 있다

5-5. TemplateUrl

- 템플릿 마크업 및 별도의 html 파일로 관리한다

- template 파일의 로딩을 빠르게 할려면 메모리에 적제하여 사용한다. $templateCache

- <script> 태그를 이용한다

<script type='text/ng-template' id='whoiam.html'></script>

- inde.html 내역 : template script 태그를 head 태그안에 넣는다. id로 whoiam.html을 사용한다

<!DOCTYPE html>

<html ng-app="App">

<head>
    
    <script data-require="angular.js@1.1.5"
      data-semver="1.1.5"
      src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>

    
    <script type='text/ng-template' id='whoiam.html'>
      <div class="thumbnail" style="width: 260px;">
          <div><img ng-src="{{data.owner.avatar_url}}" style="width:100%;"/></div>
          <div class="caption">
            <p><b>Name: </b>{{data.name}}</p>
            <p><b>Homepage: </b>{{data.homepage}}</p>
            <p><b>Watchers: </b>{{data.watchers}}</p>
            <p><b>Forks: </b>{{data.network_count}}</p>
          </div>
        </div>
     </script>
</head>

<body>
    <h1>Hello Angular</h1>
    
    <div ng-controller="DemoCtrl">
      <div whoiam>This text will be overwritten</div>
    </div>
</body>

</html>

- script.js 내역

- 호출한 angular.js 정보가 출력된다

5-6. Replace

- directive를 설정한 태그를 템플릿 태그로 교체하고자 할때 따라서 template 또는 templateUrl과 함께 사용한다

- replace: true

- index.html : elment, attribute, class name, comment 4가지 설정

- script.js 내역

var App = angular.module('App', []);

App.directive('angular', function() {
return {
    restrict: 'ECMA',
    template: '<img src="http://goo.gl/ceZGf" />',
    replace: true
};
});

- 결과 html

// attribute

// class name

// element

// comment

- img 태그가 4개 생성되어서 이미지가 4개 보인다

5-7. Priority

- 우선순위에 따라서 compile/link의 순위를 정한다. 값이 클 수록 우선순위가 높다

- 이것은 미리 컴파일된 directive의 결과값을 체크하여 수행할 필요가 있을 때 사용한다

- zero이면 priority 설정을 하지 않고 default priority를 사용한다

- bootstrap의 'btn-primary' 클래스를 적용하려고 할때 index.html

- script.js 내역 : 우선순위로 btn이 먼저 생성되었으므로 primary에 대한 적용이 가능해 진다

- bootstrap의 btn-primary CSS가 적용된 버튼이 보인다

5-8. Terminal

- 가장 최근에 수행된 directive에 terminal: true를 설정하면 그 이후 directive는 수행되지 않는다

- index.html 내역

- script.js 내역 : first -> second -> noEntry 가 수행되지만 second에 terminal: true 설정으로 매noEntry는 수행되지 않는다

- ng-repate, ng-switch는 priority 높음에도 나중에 수행됨. 버그?

- first, second의 priority 값을 서로 바꾸어 보라 : 버튼의 text 순서가 바뀔 것이다. 또는 noEntry의 priority값을 1000이하로 하면 directive가 실행된다

5-9. Controller

- Directive를 제어를 담당한다.

- $scope, this 를 사용하여 properties/methods를 바인할 수 있다

- this 키워드로 바인딩된 데이터는 require옵션을 사용하여 controller를 injecting함으로써 다른 directives에서 엑세스할 수 있게 한다.

- 5-10의 require에서 예제 진행함

App.directive('powerSwitch', function() {
      return {
        restrict: 'A',
        controller: function($scope, $element, $attrs) {
          $scope.state = 'on';
 
          $scope.toggle = function() {
            $scope.$apply(function() {
              $scope.state = ($scope.state === 'on' ? 'off' : 'on');
            });
          };
 
          this.getState = function() {
            return $scope.state;
          };
        },
     };
});

5-10. Require

- controller를 다른 directive에 전달해서 compile/linking function안에 연관시킬 수 있다

- 같은 element 또는 부모와 바인드 되어야 한다

- prefixed 부호가 붙는다

+ ? : 지정한 directive가 없더라도 에러가 발생시키지 않는다

+ ^ : 부모 element위의 directive를 찾는다. 같은 element위치는 유효하지 않다

- index.html 내역

- script.js 내역

- 변경내역 : toggle off일 경우

<div class="btn btn-success ng-binding disabled" power-switch="">

      SWITCHED OFF

    <div class="bulb off" ng-class="bulb" lightbulb=""></div></div>

- 결과 화면 : uppercase 필터 사용

5-11. Scope

- scope가 hierarchy하게 생성/유지되면 element와 부모 element사이의 scope를 설정한다.

- 그러나 자신은 부모 Scope하고만 바인드되어 data에 접근 할 수 있다. 최상위 scope는 $rootScope 객체이다

- scope: false

+ 새로운 scope 객체를 만들지 않고 부모가 가진 같은 scope 객체를 공유한다

- scope: true

+ 새로운 scope 객체를 만들고 부모 scope 객체를 상속받는다

- index.html 내역

<!DOCTYPE html>

<html ng-app="App">

<head>
    
    <script data-require="angular.js@1.1.5"
      data-semver="1.1.5"
      src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>

</head>

<body>
    <h1>Hello Angular</h1>
    
    <div class='well'>
      Bound to $rootScope: <input type="text" ng-model="parent">
      <div child></div>
    </div>

    <div class='form well' ng-controller="OneCtrl">
      ng-controller="OneCtrl"<br/>

      <input type="text" ng-model="children"><br/>
      I am {{children}} and my grandfather is {{parent}}

      <div child></div>
    </div>
</body>

</html>

- script.js 내역 : child 디렉티브의 link에서 conole.log(scope)를 찍어본다

- 결과화면 : child의 scope: true, false로 변경해 가면서 console.log의 내역을 비교해 본다

- scope: true

// 첫번째 child의 $parent객체를 보면 ROOT이다

// 두번째 child의 $parent 객체를 보면 controller의 scope.children='The One' 값이 보임. 즉, controller scope가 부모이다

// Chrom에서 보면 scope 구조도가 보인다

- scope: false

// 첫번째 child의 $parent객체를 보면 ROOT이다

// 두번째 child의 $parent 객체를 보면 ROOT 이다

// 002 는 ROOT scope 이고 그 밑으로 controller scope만 존재하고 child는 이것을 공유한다

- scope: 'isolate'

+ 부모 scope를 상속받지 않는다. 그러나 scope.$parent로 부모 scope를 억세스 할 수 있다

+ iscope.$parent을 사용하지 않고 isolated scope와 부모 scope간의 데이터 공유방법은 어떻게 하는가?

isolated scope는 당신이 부모 scope로 부터 properties를 끌어내어 local scope와 바인드하는 object/hash를 갖는다

1) @ : 부모 scope property 와 local scope 값을 바인딩한다. 원하는 값 전달시 {{}} 를 사용한다

2) = : 부모 scope (전달전 측정되어질) property 를 직접 바인딩 한다

3) & : 속해있는 scope context안에서 수행될 expression 또는 method 와 바인딩 한다

- prefix parent property @, children property =, shout() method & 를 준 예제

<!DOCTYPE html>

<html ng-app="App">

<head>
    
    <script data-require="angular.js@1.1.5"
      data-semver="1.1.5"
      src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>

</head>

<body>
    <h1>Hello Angular</h1>
    
    <div class='well'>
      Bound to $rootScope: <input type="text" ng-model="parent">
      <div child parent='{{parent}}' shout="shout()"></div>
    </div>

    <div class='form well' ng-controller="OneCtrl">
      ng-controller="OneCtrl"<br/>
      <input type="text" ng-model="children"><br/>
      I am {{children}} and my grandfather is {{parent}}
      <div child parent="{{parent}}" children="children" shout="shout()"></div>
    </div>

</body>

</html>

- script.js 내역

r App = angular.module('App', []);

App.run(function($rootScope) {
    $rootScope.parent = 'ROOT';

    $rootScope.shout = function() {
        alert("I am bound to $rootScope");
    };
});

App.directive('child', function() {
    return {
        restrict: 'A',
        scope: {
            parent: '@',
            children: '=',
            shout: '&'
        },
        template: '<div class="btn btn-link" ng-click="shout()">I am a directive and my father is {{parent || "NIL"}} as well as {{children || "NIL"}}</div>'
    };
});

App.controller('OneCtrl', function($scope) {
    $scope.children = 'The One';

    $scope.shout = function() {
        alert('I am inside ng-controller');
    };
});

- 결과화면

* scope: isolate 에 대한 이해는 egghead.io 사이트를 참조한다

5-12. Transcude

- ngTransclude를 통하여 DOM에 transcluded DOM을 insert 할 수 있다

- transclude: true
transcluded DOM을 template에서 ngTransclude directive에 삽입한다

// index.html

<!DOCTYPE html>

<html ng-app="App">

<head>
    
    <script data-require="angular.js@1.1.5"
      data-semver="1.1.5"
      src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
    
    <script type='text/ng-template' id='whoiam.html'>
      <div class="thumbnail" style="width: 260px;">
        <div><img ng-src="{{data.owner.avatar_url}}" style="width:100%;"/></div>
        <div class="caption">
          <p><b>Name: </b>{{data.name}}</p>
          <p><b>Homepage: </b>{{data.homepage}}</p>
          <p><b>Watchers: </b>{{data.watchers}}</p>
          <p><b>Forks: </b>{{data.network_count}}</p>
          <marquee ng-transclude></marquee>
        </div>
      </div>
    </script>
</head>

<body style='padding:30px;'>
<div whoiam>I got transcluded</div>
</body>
</html>

// script.js

// DOM 내역

</div>

    <span class="ng-scope">
      I got transcluded
    </span>

</marquee>

</div>

// 결과 화면 : I got transcluded 메세지가 오른쪽에서 왼쪽으로 움직인다

- transclude: 'element'

+ transclude link function을 compile function안에 정의한다

// index.html

// script.js

var App = angular.module('App', []);
App.directive('transcludeElement', function() {
    return {
        restrict: 'A',
        transclude: 'element',
        compile: function(tElement, tAttrs, transcludeFn) {

           // return 펑션이 link 펑션이 된다. 해당 펑션안에서 scope 객체 데이터 바인딩을 제어한다
            return function (scope, el, tAttrs) {
                transcludeFn(scope, function cloneConnectFn(cElement) {
                    tElement.after('<h2>I was added during compilation </h2>').after(cElement);
                });
            };
        }
    };
});

App.directive('child', function(){
    return {
        restrict: 'E',
        link: function($scope, element, attrs) {
            element.html(' with my child');
        }
    };
});

// DOM 내역

<body style="padding:30px;">
      
    <div class="ng-scope" transclude-element="">
      I got transcluded
      <child>
         with my child
      </child>

</div>

    <h2>
      I was added during compilation
    </h2>

</body>

// 결과 화면

<참조>

- 원문 : The Hitchhiker’s Guide to the Directive

- Scoep Isolate 참조 : egghead.io 사이트

- Yeoman 사용하기

저작자표시 비영리 변경금지

'AngularJS > Concept' 카테고리의 다른 글

[AngularJS] v1.3 - One-time bindings (0)	2015.01.05
[AngularJS] 배우는 방법 & 기본 개념 잡기 (2)	2014.08.03
[Directive Driven] 하이브리드 앱 프레임워크 for Angular.js (0)	2014.06.17
[Directive Driven] Google Chart Directive 사용하기 (0)	2014.06.04
[AngularJS] Prototypal 상속과 Isolated Scope의 관계에 대하여 (0)	2013.11.28

posted by Peter Note

2014. 8. 3. 23:26 AngularJS/Concept

[AngularJS] 배우는 방법 & 기본 개념 잡기

AngularJS를 배우기 위해 좌충우돌 하며 읽고, 보고, 듣고, 코딩해본 코스를 나름 정리해 보았다.

1. 개념잡기

- Angular's father인 미스코님의 AngularJS 소개 동영상을 본다 : 단계별로 jQuery와 잘 비교하고 있다

- Art of AngularJS를 보고서 이제 배워야할 필요성을 느껴보세요. 이제 시작하세요.

The Art of AngularJS from Matt Raible

- AngularJS의 중요 요소와 기본기를 다져보자 (60분 동강)

+ AngularJS 전체 구성 요소 : 각각에 대해 간단히 알아보자

+ AngularJS 흐름

- 개발자 가이드에서 Bootstrap, HTML Compiler, Conceptual Overview, Directives 를 꼭 읽는다 (내 포스팅에도 정리했다)

- AngularJS 홈페이지에서 제공하는 튜토리얼 보기

- 요약 정리 내역을 다시 보자

AngularJS Deep Dives (NYC GDG Apr 2013) from Nitya Narasimhan

2. 프로토타입핑 해보기

- 전체 flow를 간단히 코딩해 보자

- egghead.io 에서 모든 동강을 따라해 본다 : 100개 넘는 강좌가 있고 짧은 대신 꼭 코딩해본다

- AngularJS 팀의 Meetup 동영상들 보기 : Angular 기능별 설명을 해준다 (이건 개당 1시간씩 넘어서 틈틈히 보자)

+ Best Practices : 미스코님이 직접 설명한다.

- AngularJS에서의 Deferred and Promise에 대한 이해

- http://www.yearofmoo.com/ 의 AngularJS 강좌들 코딩

+ Use AngularJS to Power

+ More AngularJS Magic

- AngularJS Design Patterns

- MEAN Stack 사용 예제 : MEAN is MongoDB + Express + AngluarJS + Node.js

3. Angular 생태계

- Angular-UI : Twitter Bootstrap, Grid 등 지속적으로 AngularJS Directives 를 만들어 내고 있다

- angular modules는 http://ngmodules.org/ 먼저 찾아보자

- angular-strap : http://mgcrea.github.io/angular-strap/

- Learn AngluarJS : Thinkster.io

- AngularJS-Tips

4. 데이터 연동

- AngularJS에서 제공하는 $r esource를 사용하여 RESTful 하게 개발한다

+ 동영상에서 $r esource를 어떻게 사용하는지 익히자 (GitHub Demo 소스)

- RestangularJS를 이용한 RESTful 서버 연동

- Real-time을 위한 AngularJS와 Socket.io 연동하기 seed 구성

5. 개발환경 구축하기

- 개발 소스 코드 저장소는 DVCS인 Git + GitHub 을 사용한다 : Git 을 통하여 성공적인 브랜칭 전략을 세우자

- Yeoman을 통하여 AngularJS의 스케폴딩 소스를 만들어 개발한다 : AngularJS 개발환경 구성하기

- Yeoman generator Angular 와 Express.js 연동하기

6. 참여와 공유

- AngularJS 구글 그룹스 참여

- 공개 그룹 활동하기

+ Facebook AgularJS 오픈 그룹

+ Google+ AngularJS 오픈 그룹

- JSFiddle을 통하여 예제파일 공유하기

- StackOverflow 통하여 Q&A 하기

- AngularJS 트위터 팔로잉

최근 -213.10.11- 으로 AngularJS에 대한 관심이 높아지고 있고, 다양한 블로그와 관련 글이 많이 올라오고 있다. 이중 AngularJS 배우기의 종결자 블로깅을 들어가서 배워보자

- A Better Way to Learn AngularJS

7. AngularJS v1.* 에서 v2.* 으로

- AngularJS는 올해 v2.* 버전이 나올 예정이고 큰 변화를 예고 하고 있다. 하지만 이것은 피할 수 없는 대세로 보여진다. 이유는 간단하다. 좀 더 단순하고 좀 더 성능이 뛰어나며 인지 가능한 단순 문법으로 하는 길로 가고 있다.

- v1.* 에서 v2.* 로 바뀌니 어쪄냐고 호들갑 떨지 말자. v1.*도 쓰지 않으면서 v2.* 의 변화를 논하지도 말자. 지금 당장 v1.*를 써보고 좀 더 쉽게 웹 애플리케이션을 개발해 보는 경험이 중요하다. v2.*가 성숙할 때 쯤이면 우리는 더 많은 변화 앞에 놓여 있을 것이다.

- v2.* 간결함과 Web Components, ECMAScript 6 로의 방향의 핵심은 Componen를 사용한 Composition 패턴의 애플리케이션이라 보며 새롭지도 않으며 어렵지도 않은 방향으로 대중적으로 사용할 수 있게 만들어 가는 능력에 찬사를 보낸다. 땡큐 AngularTeam!!!

8. Directives $compile 서비스에 대한 이해

2015 ng vegas에서 발표한 $compile에 대한 구현과정을 상세히 설명하고 있다. 예로 대시보드 빌더를 개발한다고 했을 때 대시보드 화면에 차트를 가져다 놓을 때 차트에 대한 디렉티브가 있다고 하면 동적으로 디렉티브를 컴파일하고 $scope와 링크를 맺우어주어야 한다. 이런 일련의 과정이 어떻제 진행되는지 알 수 있다. 또한 디렉티브에 대한 상호 관계로 상속(Inheritance)와 격리(Isolate)부분도 설명한다.

- 발표 동영상

발표중에 나온 장표

<참조>

- 배우는 과정을 잘 요약한 블로깅 : http://blog.whydoifollow.com (강추)

- AngularJS 내용 요약 (필독)

- Angular v1.3 변경 사항들

- 몇가지 참조할 만한 사이트

+ AngularJS 포스팅 in codingsmackdown.tv

tiny -> medium -> large project 확장하는 방법 (소스)

+ 페이지 플래그먼트의 라우팅 : http://onehungrymind.com/building-a-website-with-angularjs-routes-and-partials/

+ $apply 사용 이유 : http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

+ $provide 사용 : http://slides.wesalvaro.com/20121113/#/

+ AngularJS에서 Dependency Injection에 대한 이해

+ 요분 유명하다 와인샐러 샘플 : http://coenraets.org/blog/2012/02/sample-application-with-angular-js

+ 전체 구성요소 설명

+ Directive 통하여 재사용가능 컴포넌트 만들기

+ Lazing Loading in AngularJS

+ Animation in AngularJS

+ AngularJS CheetSheet

- 처음 개발할 때 8가지 유용한 개발 접근법 ($rootScope, $locationProvider 사용예)

저작자표시 비영리 변경금지

'AngularJS > Concept' 카테고리의 다른 글

[AngularJS] v1.3 - One-time bindings (0)	2015.01.05
[Directive Driven] 히치하이커를 위한 Directive 만들어 보기 (0)	2014.08.04
[Directive Driven] 하이브리드 앱 프레임워크 for Angular.js (0)	2014.06.17
[Directive Driven] Google Chart Directive 사용하기 (0)	2014.06.04
[AngularJS] Prototypal 상속과 Isolated Scope의 관계에 대하여 (0)	2013.11.28

posted by Peter Note

2014. 6. 17. 14:33 AngularJS/Concept

[Directive Driven] 하이브리드 앱 프레임워크 for Angular.js

이제 모든 서비스는 모바일 먼저 기획을 하고 웹 서비스로 넘어가야 한다고 생각한다. 즉, Contents -> UX -> Design -> Develop -> Launch로 넘어가면서 그 기본은 모바일이 먼저이다. 기존에 Bootstrap을 사용했을 경우 RWD (Response Web Design)이 적용되어 해상도에 따른 사용자 경험을 데스크탑과 모바일에 준하게 줄 수 있었지만 네이티브 앱과 유사한 UX 경험을 제공하기에는 부족하다. HTML5 기반으로 개발을 한다면 RWD 외에 Mobile First 전략을 가지고 있는 하이브리드 웹앱 Framework을 살펴 볼 필요가 있다. 살펴볼 두가지의-ionic, onsenui - 하이브리드 앱(모바일 웹앱) 프레임워크는 PhoneGap + Angular.js 와 결합되는 형태를 취하고 있다. mobile angular ui는 PhoneGap과 연결시키는 별도의 작업을 수반한다.

Ionic 하이브리드 웹앱 프레임워크

- Ionic 홈페이지

- PhoneGap에 최적화 되어 프로젝트를 생성해 준다.

- https://github.com/driftyco/ionic-starter-sidemenu 처럼 ionic-starter-xx의 sidemenu, tabs, blank 3가지 타입을 제고하고 있다

// 설치

$ sudo npm install -g cordova

/usr/local/bin/cordova -> /usr/local/lib/node_modules/cordova/bin/cordova

cordova@3.5.0-0.2.4 /usr/local/lib/node_modules/cordova

$ sudo npm install -g ionic

/usr/local/bin/ionic -> /usr/local/lib/node_modules/ionic/bin/ionic

ionic@1.0.14 /usr/local/lib/node_modules/ionic

// 프로젝트 생성

$ ionic start myAppSideMenu sidemenu

Running start task...

Creating Ionic app in folder /Users/prototyping/myAppSideMenu based on sidemenu project

DOWNLOADING: https://github.com/driftyco/ionic-app-base/archive/master.zip

DOWNLOADING: https://github.com/driftyco/ionic-starter-sidemenu/archive/master.zip

Initializing cordova project.

Fetching plugin "org.apache.cordova.device" via plugin registry

Fetching plugin "org.apache.cordova.console" via plugin registry

Fetching plugin "https://github.com/driftyco/ionic-plugins-keyboard" via git clone

$ cd myAppSlideMenu

- ionic 수행

$ ionic platform add android

Running platform task...

Adding platform android

.. 생략 ..

Project successfully created.

Installing "com.ionic.keyboard" for android

Installing "org.apache.cordova.console" for android

Installing "org.apache.cordova.device" for android

$ ionic build android

Running build task...

Building platform android

Running command: /Users/prototyping/myAppSideMenu/platforms/android/cordova/build

Buildfile: /Users/prototyping/myAppSideMenu/platforms/android/build.xml

... 중략 ...

-post-build:

[move] Moving 1 file to /Usersprototyping/myAppSideMenu/platforms/android/ant-build

[move] Moving 1 file to /Users/prototyping/myAppSideMenu/platforms/android/CordovaLib/ant-build

debug:

BUILD SUCCESSFUL

Total time: 48 seconds

// Android의 AVD를 먼저 실행해야 한다

$ ionic emulate android

Running emulate task...

Emulating app on platform android

Running command: /Users/nulpulum/development/studygps_company/prototyping/myAppSideMenu/platforms/android/cordova/run --emulator

... 중략 ...

BUILD SUCCESSFUL

Total time: 9 seconds

Installing app on emulator...

Using apk: /Users/prototyping/myAppSideMenu/platforms/android/ant-build/HelloCordova-debug-unaligned.apk

Launching application...

LAUNCH SUCCESS

-- AVD 통해 본 모습

* 안드로이드 AVD 관리하기 (참조)

- ionic 분석

- ionic 명령을 통하여 ionic 프레임워크와의 통합 빌드작업을 자동 수행해 준다

// 완벽하게 angular.js 기반으로 운영된다 (angular.js v1.2.12 버전 번들링)

// www/lib/ionic/js/ionic.bundle.js

// index.html

<!DOCTYPE html>

<html>

<head>

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above

-->

</head>

<ion-nav-view></ion-nav-view>

</body>

</html>

- ionic components

Onsen UI 프레임워크

- PhoneGap을 설치와 Onsen ui 설치는 별개로 진행된다. 따라서 ionic과 같이 PhoneGap에 대한 기본 지식이 필요하다

- Onsen ui는 angular.js directive를 제공하는데 주력한다

- PhoneGap 환경 설정

// PhoneGap

$ npm install -g cordova

$ cordova create MyAppOnsenui && cd MyAppOnsenui

Creating a new cordova project with name "HelloCordova" and id "io.cordova.hellocordova" at location "/Users/prototyping/MyAppOnsenui"

Downloading cordova library for www...

Download complete

$ cordova platform add android

Creating android project...

Creating Cordova project for the Android platform:

Path: platforms/android

Package: io.cordova.hellocordova

Name: HelloCordova

Android target: android-19

Copying template files...

Running: android update project --subprojects --path "platforms/android" --target android-19 --library "CordovaLib"

Resolved location of library project to: /Users/prototyping/MyAppOnsenui/platforms/android/CordovaLib

Updated and renamed default.properties to project.properties

..중략..

Project successfully created.

-- build와 emulate 전에 하기의 Onsen ui 설치와 설정을 먼저 한 후에 수행한다

$ cordova build android

.. 중략 ..

BUILD SUCCESSFUL

Total time: 32 seconds

-- android의 AVD를 먼저 실행해야 한다

$ cordova emulate android

- Onsenui components : 가장 기본적인 것들을 제공함

- Phonegap과 Angular.js 의 결합을 개발자가 직접해야함

- 활발한 Community feedback이 없는 상태이다 (참조)

- Onsenui설치

// Onsen ui

$ cd MyAppOnsenui

$ bower init 명령으로 bower.json 파일을 만들거나 기존의 generator-angular-fullstack의 것을 사용한다

$ bower install onsenui --save

{

"name": "mobiconsoft-mobile-app",

"version": "0.1.0",

"dependencies": {

"angular": ">=1.2.*",

"json3": "~3.3.1",

"es5-shim": "~3.2.0",

"angular-resource": ">=1.2.*",

"angular-cookies": ">=1.2.*",

"angular-sanitize": ">=1.2.*",

"angular-ui-router": "~0.2.10",

"restangular": "~1.4.0",

"jquery": "1.11.1",

"modernizr": "~2.8.1",

"console-shim": "*",

"jStorage": "~0.4.8",

"angular-gettext": "~0.2.9",

"ladda-studygps": "~0.9.4",

"angular-ladda-studygps": "~0.1.7",

"onsenui": "~1.0.4"

"devDependencies": {

"angular-mocks": ">=1.2.*",

"angular-scenario": ">=1.2.*"

"testPath": "test/client/spec"

}

-- http://onsenui.io/OnsenUI/project_templates/sliding_menu_navigator.zip 에서 샘플 파일을 다운로드 받아서 app 폴더에 있는 것을 www 폴더로 복사한다. 그리고 index.html안에 cordova.js를 넣는다. (개발시에는 404 NOT Found 발생함)

$ cordova build android

$ cordova emulate android

-- AVD로 띄워본 결과

- Sliding Menu에 있어서는 Ionic 보다는 Onsenui가 좀 더 세련되어 보임

Mobile Angular UI

- Slide Menu 와 기본적인 모바일 화면 구성 컴포넌트를 angular.js 기반으로 Directive화 해놓았다.

- 친숙한 Bootstrap 기반의 UI를 제공한다. 그러나 Twitter bootstrap의 RWD기반은 아니다

ngCordova

- cordova에서 제공하는 API를 angular 에서 사용할 수 있도록 Angular Service로 만들어 놓았음

좀 더 잘 정비된 것을 쓰고 싶다면 Ionic을 기초 기술부터 체크하면 갈 것이라면 Onsenui를 추천한다. 또한 좀 더 세련되 UI는 Onsenui에 점 수를 더 주고 싶다. 그리고 서로의 아키텍쳐에 대한 부분과 커스터마이징 여부는 좀 더 들여다 보아야 할 것으로 보인다. 각각의 상황과 특성에 따라 선택하여 사용하면 될 것으로 보인다.

<참조>

- Ionic 시작하기

- onsenui 시작하기

- onsenui sliding menu zip

sliding_menu_navigator.zip

- mobile angular ui

- iSO 8 UI Framework 7

- ngCordova

- 용어 정의

저작자표시 비영리 변경금지

'AngularJS > Concept' 카테고리의 다른 글

[Directive Driven] 히치하이커를 위한 Directive 만들어 보기 (0)	2014.08.04
[AngularJS] 배우는 방법 & 기본 개념 잡기 (2)	2014.08.03
[Directive Driven] Google Chart Directive 사용하기 (0)	2014.06.04
[AngularJS] Prototypal 상속과 Isolated Scope의 관계에 대하여 (0)	2013.11.28
[SPA] Modern Web에서의 Design Pattern 인식의 전환 (0)	2013.09.28

posted by Peter Note

2014. 6. 4. 00:20 AngularJS/Concept

[Directive Driven] Google Chart Directive 사용하기

Angular.js 기반 개발시 시각화를 위하여 구글 차트를 이용할 경우 Directive화 방법

구글

- Don't invent wheel, already exist

- 하지만 자신의 입맛에 맞게 수정은 해야 한다.

- 수정하려면 GitHub에서 Fork한 후에 수정을 하자

https://github.com/mobiconsoft/angular-google-chart-resize

구글 차트 API 사용법

- 구글 차트 사용하기

- 구글 Visualization 라이브러리위에 구글 Chart가 올라가는 형태이다 (참조)

- visualization의 버전 1.0 을 명시하고 사용할 차트 패키지를 설정한다. 보통 corechart 로 하면 bar, line, pie등을 사용할 수 있다

google.load('visualization', '1.0', {'packages':[<<list-of-google-chart-libraries>>]})

- 데이터 생성은 2차원의 google.visualization.DataTable을 이용한다

- https://google-developers.appspot.com/chart/interactive/docs/datatables_dataviews

- anuglar의 controller에서 하기와 같이 json형태로 정의 가능. 또는 addColumn() 호출 설정방식중 택일

- DataTable을 통해 .csv 파일 생성가능

$scope.chartObject = {};

$scope.onions = [

{v: "Onions"},

{v: 3},

];

// 데이터 시각화를 위하여 가장 큰 값은 첫번째에, 그 다음 큰값은 맨 마지막에 오게 한다

$scope.chartObject.data = {"cols": [

{id: "t", label: "Topping", type: "string"},

{id: "s", label: "Slices", type: "number"}

], "rows": [

{c: [

{v: "Olives"},

{v: 31}

]},

{c: $scope.onions},

{c: [

{v: "Zucchini"},

{v: 1},

]},

{c: [

{v: "Pepperoni"},

{v: 2},

]},

{c: [

{v: "머쉬롬"},

{v: 10},

]},

]};

$scope.chartObject.options = {

'title' : 'How Much Pizza I Ate Last Night',

'height' : 500,

'colors' : ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']

}

- 차트 커스터마이징을 위하여 옵션을 준다

- 높이는 px(pixel) 단위이다.

- 차트의 width + height 주는 방법은 html에 주거나, option 으로 주는 두가지 방법이 있다. (참조)

var options = {

'legend':'left',

'title':'My Big Pie Chart',

'is3D':true,

'width':400,

'height':300

}

- ChartWrapper를 이용하면 차트 종류, 데이터, 옵션, 그려지는 위치등의 설정을 한번에 할 수 있다 (ChartWrapp API)

var wrapper = new google.visualization.ChartWrapper({

chartType: 'ColumnChart',

dataTable: [['', 'Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],

['', 700, 300, 400, 500, 600, 800]],

options: {'title': 'Countries'},

containerId: 'vis_div'

});

wrapper.draw();

- Chart의 interaction은 ready, select, error, onmouseover/onmouseout 이 존재한다 (참조)

- addListener를 이용하여 event handler를 등록한다

function selectHandler() {

var selectedItem = chart.getSelection()[0];

if (selectedItem) {

var topping = data.getValue(selectedItem.row, 0);

alert('The user selected ' + topping);

}

google.visualization.events.addListener(chart, 'select', selectHandler);

- Formatters 에는 arrow, bar, color, date, number 등이 있고, 주로 table에서 사용된다. 단, color는 차트에서도 사용됨 (참조)

- Advanced Chart 기능을 쓰고 싶을 경우 (참조)

- 웹툴상에서 차트의 API 테스트 하는 도구

기존 소스 이해

- google-chart에 대한 directive 소스에 resize 넣음

/**

* @description Google Chart Api Directive Module for AngularJS

* @version 0.0.9

* @author Nicolas Bouillon <nicolas@bouil.org>

* @author GitHub contributors

* @moidifier Peter Yun <nulpulum@gmail.com>

* @license MIT

* @year 2013

(function (document, window, angular) {

'use strict';

angular.module('googlechart', [])

.constant('googleChartApiConfig', {

version: '1.0',

optionalSettings: {

packages: ['corechart']

}

})

/**

* 인코딩 주의)

* index.html 안에 UTF-8 설정

* <meta http-equiv="content-type" content="text/html; charset=UTF-8">

* 사용예)

* <script type="text/javascript" src="https://www.google.com/jsapi"></script>

* <script type="text/javascript">

* google.load('visualization', '1.0', {'packages':['corechart']});

* google.setOnLoadCallback(drawChart);

* function drawChart() { ... }

* </script>

* @변경 : jsapi.js 파일을 로컬에서 읽어오도록 수정할 수 있다

* googleJsapiUrlProvider.setProtocol(undiefined);

* googleJsapiUrlProvider.setUrl('jsapi.js');

* @참조 : https://google-developers.appspot.com/chart/interactive/docs/quick_start

.provider('googleJsapiUrl', function () {

var protocol = 'https:';

var url = '//www.google.com/jsapi';

this.setProtocol = function(newProtocol) {

protocol = newProtocol;

};

this.setUrl = function(newUrl) {

url = newUrl;

};

this.$get = function() {

return (protocol ? protocol : '') + url;

};

})

/**

* google.load('visualization', '1.0', {'packages':['corechart']}); 수행하는 팩토리

* @param {[type]} $rootScope [description]

* @param {[type]} $q [description]

* @param {[type]} apiConfig [description]

* @param {[type]} googleJsapiUrl [description]

* @return {[type]} [description]

.factory('googleChartApiPromise', ['$rootScope', '$q', 'googleChartApiConfig', 'googleJsapiUrl', function ($rootScope, $q, apiConfig, googleJsapiUrl) {

var apiReady = $q.defer();

var onLoad = function () {

// override callback function

var settings = {

callback: function () {

var oldCb = apiConfig.optionalSettings.callback;

$rootScope.$apply(function () {

apiReady.resolve();

});

if (angular.isFunction(oldCb)) {

oldCb.call(this);

}

};

settings = angular.extend({}, apiConfig.optionalSettings, settings);

window.google.load('visualization', apiConfig.version, settings);

};

var head = document.getElementsByTagName('head')[0];

var script = document.createElement('script');

script.setAttribute('type', 'text/javascript');

script.src = googleJsapiUrl;

if (script.addEventListener) { // Standard browsers (including IE9+)

//console.log('>>> 1. load jsapi...');

script.addEventListener('load', onLoad, false);

} else { // IE8 and below

//console.log('>>> 2. load jsapi...');

script.onreadystatechange = function () {

if (script.readyState === 'loaded' || script.readyState === 'complete') {

script.onreadystatechange = null;

onLoad();

}

};

}

head.appendChild(script);

return apiReady.promise;

}])

/**

* Element 또는 Attribute로 사용할 수 있다. Element 사용시에는 IE8+에 대한 고려가 있어야 함

* 사용예)

* <div google-chart chart="chartObject" style="height:300px; width:100%;"></div>

* @param {[type]} $timeout [description]

* @param {[type]} $window [description]

* @param {[type]} $rootScope [description]

* @param {[type]} googleChartApiPromise [description]

* @return {[type]} [description]

.directive('googleChart', ['$timeout', '$window', '$rootScope', 'googleChartApiPromise', function ($timeout, $window, $rootScope, googleChartApiPromise) {

return {

restrict: 'EA',

scope: {

chartOrig: '=chart',

onReady: '&',

select: '&'

link: function ($scope, $elm, attrs) {

// Watches, to refresh the chart when its data, title or dimensions change

$scope.$watch('chartOrig', function () {

$scope.chart = angular.copy($scope.chartOrig);

drawAsync();

}, true); // true is for deep object equality checking

// Redraw the chart if the window is resized

$rootScope.$on('resizeMsg', function () {

$timeout(function () {

// Not always defined yet in IE so check

if($scope.chartWrapper) {

drawAsync();

}

});

// Keeps old formatter configuration to compare against

$scope.oldChartFormatters = {};

function applyFormat(formatType, formatClass, dataTable) {

var i, cIdx;

if (typeof($scope.chart.formatters[formatType]) != 'undefined') {

if (!angular.equals($scope.chart.formatters[formatType], $scope.oldChartFormatters[formatType])) {

$scope.oldChartFormatters[formatType] = $scope.chart.formatters[formatType];

$scope.formatters[formatType] = [];

if (formatType === 'color') {

for (cIdx = 0; cIdx < $scope.chart.formatters[formatType].length; cIdx++) {

var colorFormat = new formatClass();

for (i = 0; i < $scope.chart.formatters[formatType][cIdx].formats.length; i++) {

var data = $scope.chart.formatters[formatType][cIdx].formats[i];

if (typeof(data.fromBgColor) != 'undefined' && typeof(data.toBgColor) != 'undefined')

colorFormat.addGradientRange(data.from, data.to, data.color, data.fromBgColor, data.toBgColor);

else

colorFormat.addRange(data.from, data.to, data.color, data.bgcolor);

}

$scope.formatters[formatType].push(colorFormat)

}

} else {

for (i = 0; i < $scope.chart.formatters[formatType].length; i++) {

$scope.formatters[formatType].push(new formatClass(

$scope.chart.formatters[formatType][i])

);

}

//apply formats to dataTable

for (i = 0; i < $scope.formatters[formatType].length; i++) {

if ($scope.chart.formatters[formatType][i].columnNum < dataTable.getNumberOfColumns())

$scope.formatters[formatType][i].format(dataTable, $scope.chart.formatters[formatType][i].columnNum);

}

//Many formatters require HTML tags to display special formatting

if (formatType === 'arrow' || formatType === 'bar' || formatType === 'color')

$scope.chart.options.allowHtml = true;

}

function draw() {

// 그리고 있는중에는 다시 그리기 안함

if (!draw.triggered && ($scope.chart != undefined)) {

draw.triggered = true;

// ref: https://docs.angularjs.org/api/ng/service/$timeout

$timeout(function () {

if (typeof($scope.formatters) === 'undefined')

$scope.formatters = {};

var dataTable;

if ($scope.chart.data instanceof google.visualization.DataTable)

dataTable = $scope.chart.data;

else if (angular.isArray($scope.chart.data))

dataTable = google.visualization.arrayToDataTable($scope.chart.data);

else

dataTable = new google.visualization.DataTable($scope.chart.data, 0.5);

if (typeof($scope.chart.formatters) != 'undefined') {

applyFormat("number", google.visualization.NumberFormat, dataTable);

applyFormat("arrow", google.visualization.ArrowFormat, dataTable);

applyFormat("date", google.visualization.DateFormat, dataTable);

applyFormat("bar", google.visualization.BarFormat, dataTable);

applyFormat("color", google.visualization.ColorFormat, dataTable);

}

var customFormatters = $scope.chart.customFormatters;

if (typeof(customFormatters) != 'undefined') {

for (var name in customFormatters) {

applyFormat(name, customFormatters[name], dataTable);

}

// resize > 0 이상이면 적용됨

// by peter yun

// <div style="height:100%" id="gc">

// <div google-chart chart="chartObject" resize="#gc" style="width:100%;"></div>

// </div>

var height = angular.element(attrs.resize).height();

if(height) {

$scope.chart.options.height = height;

}

var chartWrapperArgs = {

chartType: $scope.chart.type,

dataTable: dataTable,

view: $scope.chart.view,

options: $scope.chart.options,

containerId: $elm[0]

};

$scope.chartWrapper = new google.visualization.ChartWrapper(chartWrapperArgs);

google.visualization.events.addListener($scope.chartWrapper, 'ready', function () {

$scope.chart.displayed = true;

$scope.$apply(function (scope) {

scope.onReady({chartWrapper: scope.chartWrapper});

});

google.visualization.events.addListener($scope.chartWrapper, 'error', function (err) {

console.log("Chart not displayed due to error: " + err.message + ". Full error object follows.");

console.log(err);

});

google.visualization.events.addListener($scope.chartWrapper, 'select', function () {

var selectedItem = $scope.chartWrapper.getChart().getSelection()[0];

$scope.$apply(function () {

$scope.select({selectedItem: selectedItem});

});

$timeout(function () {

$elm.empty();

$scope.chartWrapper.draw();

draw.triggered = false;

});

}, 0, true);

}

/**

* jsapi의 load가 끝나면 draw하도록 promise를 걸어 놓은 것

* @return {[type]} [description]

function drawAsync() {

googleChartApiPromise.then(function () {

draw();

})

}

};

}])

/**

* window즉 브라우져의 사이즈가 변경되면 google chart의 size를 변경토록 한다. 단 html설정에서 다음과 같이 되어야 한다

* <div google-chart chart="chartObject" style="height:300px; width:100%;"></div>

* height는 %가 아니라 자신이 속한 parent dive의 height를 따르도록 해주어야 한다

* @param {[type]} $rootScope [description]

* @param {[type]} $window [description]

* @return {[type]} [description]

.run(['$rootScope', '$window', function ($rootScope, $window) {

angular.element($window).bind('resize', function () {

$rootScope.$emit('resizeMsg');

});

}]);

})(document, window, window.angular);

<참조>

- 구글 차트 Directive

- 구글 차트 Directive 만들기 예제

- 웹툴상에서 차트의 API 테스트 하는 도구

- Directive 수정 소스

저작자표시 비영리 변경금지

'AngularJS > Concept' 카테고리의 다른 글

[AngularJS] 배우는 방법 & 기본 개념 잡기 (2)	2014.08.03
[Directive Driven] 하이브리드 앱 프레임워크 for Angular.js (0)	2014.06.17
[AngularJS] Prototypal 상속과 Isolated Scope의 관계에 대하여 (0)	2013.11.28
[SPA] Modern Web에서의 Design Pattern 인식의 전환 (0)	2013.09.28
[AngularJS] Service 종류 이해하기 (0)	2013.08.22

posted by Peter Note

2014. 6. 3. 15:23 AngularJS/Start MEAN Stack

[MEAN Stack] Protractor 통한 클라이언트 E2E Test

Angular Team에서 End-To-End 테스트를 위하여 별도로 개발한 프레임워크가 Protractor 이다. protractor는 WebDriverJs기반으로 만들어 졌다.

Protractor 설정

- Chrome 최신 버전 사용

- protractor 설치 및 Chrome에서 selenium standalone server로 구동하기 위한 driver도 설치한다

$ npm install -g protractor

$ webdriver-manager update

- selenium server를 기동하는 방법 : 4444 port로 listen한다 ( 호출 : http://localhost:4444/wd/hub )

$ webdriver-manager start

seleniumProcess.pid: 55938

6월 02, 2014 5:08:16 오후 org.openqa.grid.selenium.GridLauncher main

정보: Launching a standalone server

Setting system property webdriver.chrome.driver to /usr/local/lib/node_modules/protractor/selenium/chromedriver

17:08:16.913 INFO - Java: Oracle Corporation 24.51-b03

17:08:16.915 INFO - OS: Mac OS X 10.9.3 x86_64

17:08:16.935 INFO - v2.41.0, with Core v2.41.0. Built from revision 3192d8a

17:08:17.079 INFO - Default driver org.openqa.selenium.ie.InternetExplorerDriver registration is skipped: registration capabilities Capabilities [{platform=WINDOWS, ensureCleanSession=true, browserName=internet explorer, version=}] does not match with current platform: MAC

17:08:17.145 INFO - RemoteWebDriver instances should connect to: http://127.0.0.1:4444/wd/hub

17:08:17.146 INFO - Version Jetty/5.1.x

17:08:17.148 INFO - Started HttpContext[/selenium-server/driver,/selenium-server/driver]

17:08:17.149 INFO - Started HttpContext[/selenium-server,/selenium-server]

17:08:17.149 INFO - Started HttpContext[/,/]

17:08:17.510 INFO - Started org.openqa.jetty.jetty.servlet.ServletHandler@4b8e282c

17:08:17.510 INFO - Started HttpContext[/wd,/wd]

17:08:17.517 INFO - Started SocketListener on 0.0.0.0:4444

17:08:17.517 INFO - Started org.openqa.jetty.jetty.Server@3e578b06

- 잘 동작하지 않는다면 Path에 JAVA_HOME을 설정한다.

Protractor 환경 설정

- 루트에 protractor-e2e.conf.js 파일 생성

- 설정 : baseUrl은 grunt serve 시에 기동되는 port 번호

exports.config = {

seleniumAddress: 'http://localhost:4444/wd/hub',

capabilities: {'browserName': 'chrome'},

specs: ['test/client/e2e/**/*.js'],

baseUrl: 'http://localhost:9000',

jasmineNodeOpts: {

onComplete: null,

isVerbose: true,

showColors: true,

includeStackTrace: true,

defaultTimeoutInterval: 10000

framework: 'jasmine'

};

- 체크

$ webdriver-manager start

$ protractor protractor-e2e.conf.js

Using the selenium server at http://localhost:4444/wd/hub

[launcher] Running 1 instances of WebDriver

Finished in 0.001 seconds

0 tests, 0 assertions, 0 failures

[launcher] chrome passed

- grunt를 이용하여 테스트 할 수 있도록 Gruntfile.js 에 설정. run: {..} 안의 options에 configFile 설정이 중요함

$ npm install grunt-protractor-runner --save-dev

// grunt.initConfig 안에 설정

protractor: {

options: {

keepAlive: true

run: {

options: {

configFile: "protractor-e2e.conf.js", // Target-specific config file

args: {} // Target-specific arguments

}

// task 설정

grunt.registerTask('test', function(target) {

if (target === 'server') {

return grunt.task.run([

'env:test',

'mochaTest'

]);

}

else if (target === 'client') {

return grunt.task.run([

'concurrent:test',

'autoprefixer',

'karma',

'protractor'

]);

}

else grunt.task.run([

'test:server',

'test:client'

]);

});

// grunt test 에 첨부

$ grunt test 또는 grunt test:client 수행 (단, 수행전에 webdriver-manager start 수행해 놓은 상태이어야함)

Running "protractor:run" (protractor) task

Using the selenium server at http://localhost:4444/wd/hub

[launcher] Running 1 instances of WebDriver

Finished in 0 seconds

0 tests, 0 assertions, 0 failures

[launcher] chrome passed

Done, without errors.

Execution Time (2014-06-02 15:43:51 UTC)

protractor:run 2.2s ▇▇ 100%

Total 2.3s

- 또는, grunt 설정을 하지 않았을 경우는 다음과 같이도 테스트 가능하다. 하지만 가급적 grunt를 이용하자.

$ webdriver-manager start

$ protractor protractor-e2e.conf.js

End-to-End 테스트 코드 작성방식

- 테스트 코드를 작성하기 위한 몇가지 개념을 익힌다. (위키)

> browser : webdriver를 감싼 객체. navigation 과 page information 을 갖음

> element : html element를 찾고 상호작용을 위한 helper method

> by : element locator collection

> protractor : webdriver namespace를 wrapping한 protractor namespace

- 샘플 코드

+ browser.get : page loading

+ element : page에서 element를 찾아줌

+ by 종류 (소스 참조)

by.binding searches for elements by matching binding names, either from ng-bind or {{}} notation in the template.
by.model searches for elements by input ng-model.
by.repeater searches for ng-repeat elements. For example, by.repeater('phone in phones').row(11).column('price')returns the element in the 12th row (0-based) of the ng-repeat = "phone in phones" repeater with the binding matching{{phone.price}}.

describe('angularjs homepage', function() {
  it('should greet the named user', function() {
    // Load the AngularJS homepage.
    browser.get('http://www.angularjs.org');

    // Find the element with ng-model matching 'yourName' - this will
    // find the <input type="text" ng-model="yourName"/> element - and then
    // type 'Julie' into it.
    element(by.model('yourName')).sendKeys('Julie');

    // Find the element with binding matching 'yourName' - this will
    // find the <h1>Hello {{yourName}}!</h1> element.
    var greeting = element(by.binding('yourName'));

    // Assert that the text element has the expected value.
    // Protractor patches 'expect' to understand promises.
    expect(greeting.getText()).toEqual('Hello Julie!');
  });
});

실제 End-to-End 테스트 코드

- 로그인의 경우 e2e 코드 작성예 (필수 - 참조)

'use strict';

var LoginPage = function() {

this.email = element(by.model('user.email'));

this.password = element(by.model('user.password'));

this.setEmail = function(email) {

this.email.sendKeys(email);

};

this.setPassword= function(password) {

this.password.sendKeys(password);

};

this.url = function() {

browser.get('/#/signin');

};

this.login = function() {

return element(by.buttonText('button')).click();

};

describe('Login Page', function() {

it('should successfully login', function(){

var loginPage = new LoginPage();

loginPage.url();

loginPage.setEmail('test@test.com');

loginPage.setPassword('test');

loginPage.login().then(function(response){

console.log(response);

}, function(error){

})

});

- 수행 : grunt test:client

+ 수행 에러 발생함 : to be continue...

<참조>

- Protractor 테스트 방법

- Protractor Test PPT (필독)

- Unit, E2E ToDo 예제

- Protractor Grunt 설정하기

- End-To-End Test 하기 예제

- grunt-protractor-runner

- Angular Test Pattern

저작자표시 비영리 변경금지

'AngularJS > Start MEAN Stack' 카테고리의 다른 글

[MEAN Stack] Karma 통한 클라이언트 Unit Test (0)	2014.06.02
[MEAN Stack] 다국어 처리하기 (1)	2014.05.28
[MEAN Stack] 로그인 서비스 개발 및 정보 저장하기 (0)	2014.02.04
[MEAN Stack] Yo 이용하여 Controller 생성하고 UI-Router에 설정하기 (0)	2014.01.30
[MEAN Stack] 메뉴 구성하고 UI Routing 설정하기 (0)	2014.01.29

posted by Peter Note

2014. 6. 2. 10:09 AngularJS/Start MEAN Stack

[MEAN Stack] Karma 통한 클라이언트 Unit Test

프로트앤드 개발을 하면서 테스트는 어떻게 할 수 있는지 알아본다. 앵귤러에서는 테스트 관련 내용까지도 포함하고 있어서 개발 테스트의 편의성을 함께 제공하고 있다.

사전 준비

generator-angular를 설치하게 되면 앵귤러 프레임워크에 카르마(Karma) 테스트 프레임워크와 Mock 객체등이 포함되어 있다. 과거에는 Karma를 통해서 단위(Unit) 테스트와 E2E (End-To-End) 테스트 두가지를 하였으나, 최근에는 Karma로는 단위 테스트만을 수행하고 Protractor라는 새로운 테스트 프레임워크를 통해서 E2E 테스트를 수행한다

- karma.conf.js : Unit Test 환경파일. 내부적으로 Jasmine (http://pivotal.github.io/jasmine/) 프레임워크를 사용한다

- karma-e2e.conf.js : E2E Test 환경파일 (

- "grunt test" 를 통해 수행

Karma가 Jasmine 테스트 프레임워크를 사용하고, 필요한 files 목록을 정의하며 Chrome 브라우져에서 8080 포트를 사용하여 테스트함. angular.js 와 angular-mocks.js 파일은 필 첨부 (angular-mocks.js 안에 module, inject 펑션 존재)

// karma.conf.js

// Karma configuration

// http://karma-runner.github.io/0.10/config/configuration-file.html

module.exports = function(config) {

config.set({

// base path, that will be used to resolve files and exclude

basePath: '',

// testing framework to use (jasmine/mocha/qunit/...)

frameworks: ['jasmine'],

// list of files / patterns to load in the browser

files: [

'app/bower_components/angular/angular.js',

'app/bower_components/angular-mocks/angular-mocks.js',

'app/bower_components/angular-resource/angular-resource.js',

'app/bower_components/angular-cookies/angular-cookies.js',

'app/bower_components/angular-sanitize/angular-sanitize.js',

'app/bower_components/angular-route/angular-route.js',

'app/scripts/*.js',

'app/scripts/**/*.js',

'test/mock/**/*.js',

'test/spec/**/*.js'

// list of files / patterns to exclude

exclude: [],

// web server port

port: 8080,

// level of logging

// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG

logLevel: config.LOG_INFO,

// enable / disable watching file and executing tests whenever any file changes

autoWatch: false,

// Start these browsers, currently available:

// - Chrome

// - ChromeCanary

// - Firefox

// - Opera

// - Safari (only Mac)

// - PhantomJS

// - IE (only Windows)

browsers: ['Chrome'],

// Continuous Integration mode

// if true, it capture browsers, run tests and exit

singleRun: false

});

};

Gruntfile.js 의 test Task 내역 : grunt test

// Test settings

karma: {

unit: {

configFile: 'karma.conf.js',

singleRun: true

}

... 중략 ..

grunt.registerTask('test', [

'clean:server',

'concurrent:test',

'autoprefixer',

'connect:test',

'karma'

]);

1. Jasmine 테스트 프레임워크

describe ~ it 으로 BDD를 표현한다. BDD는 TDD의 2세대 버전 정도로 이해하자. 보다 자세한 사항은 위키 참조 (http://en.wikipedia.org/wiki/Behavior-driven_development)

describe("A suite", function() {

it("contains spec with an expectation", function() {

expect(true).toBe(true);

});

describe로 시작하는 것을 Suite (슈트)라고 부르고, it 으로 시작하는 것을 spec (스펙)이라고 부른다. 슈트안에 여러개의 스펙이 있을 수 있다. beforeEach(), afterEach()를 통해서 스펙 수행시 마다 환경 초기값 셋업(Setup)이나 마무리 작업(TearDown)을 수행할 수 있다. 스펙 안에는 expect 기대값에 대한 다양한 메서드를 제공한다.

toEqual()

toBe(), not.toBe()

toBeTruthy(), toBeFalsy()

toContain(), not.toContain()

toBeDefined(), toBeUndefined()

toBeNull()

toBeNaN()

toBeGreaterThan()

toBeLessThan()

toBeCloseTo() : 소수점

toMatch() : 정규표현식

toThrow()

...

보다 자세한 사항은 Jasmine 문서를 참조한다 (http://jasmine.github.io/2.0/introduction.html)

2. 앵귤러 Service 테스트 준비

yo를 통하여 앵귤러 코드를 완성하게 되면 자동으로 테스트 코드까지 생성된다. SessionService에 대한 테스트 코드는 /test/spec/services 폴더 밑에 동일한 session-service.js 파일이 존재한다. module 호출 후에 inject 가 올 수 있으나 inject 후에 module 호출은 올 수 없다. _ (underscore)를 양쪽에 붙이는 것은 angular프레임워크에 테스트를 위하여 해당 서비스를 사용함을 알려준다.

describe('Service: SessionService', function () {

// load the service's module

beforeEach(module('meanstackApp'));

// instantiate service

var SessionService;

beforeEach(inject(function (_SessionService_) {

SessionService = _SessionService_;

}));

it('should do something', function () {

expect(!!SessionService).toBe(true);

});

grunt test 명령을 수행하면 에러가 발생할 것이다. 그것은 index.html에 필요에 의해 추가한 .js파일을 Karma 환경파일에 추가하지 않았기 때문이다. controller 쪽에서도 에러가 발생하는데 기본 테스트 코드에서 발생하므로 불필요한 코드를 삭제한다.

// karma.conf.js

files: [

'app/bower_components/jquery/jquery.js',

'app/bower_components/bootstrap/dist/js/bootstrap.js',

'app/bower_components/angular/angular.js',

'app/bower_components/angular-mocks/angular-mocks.js',

'app/bower_components/angular-resource/angular-resource.js',

'app/bower_components/angular-cookies/angular-cookies.js',

'app/bower_components/angular-sanitize/angular-sanitize.js',

'app/bower_components/angular-route/angular-route.js',

'app/bower_components/angular-bootstrap/ui-bootstrap-tpls.js',

'app/bower_components/angular-ui-router/release/angular-ui-router.js',

'app/scripts/*.js',

'app/scripts/**/*.js',

'test/mock/**/*.js',

'test/spec/**/*.js'

singleRun: true

// Controller 테스트 파일에서 불필요한 하기 코드 삭제

it('should attach a list of awesomeThings to the scope', function () {

expect(scope.awesomeThings.length).toBe(3);

});

3. 앵귤러 Service 테스트를 위한 Mock 사용

SessionService 테스트 수행전에 공통적으로 사용하고 있는 Factory나 Service에 대한 테스트 코드를 작성한 후 SessionService를 최종 테스트 한다

- msRequestFactory : 원하는 JSON 객체가 생성되는지 테스트

- msRestfulApi : $httpBackend 이용하여 요청 처리 테스트

- SessionService : $httpBackend 이용하여 요청 처리하고 SessionInfo의 정보 유무 테스트

msRequestFactory 통하여 만들어진 JSON 객체가 원하는 key:value 값을 가지고 있는지 확인한다. expect().toEqual()을 사용한다

'use strict';

describe('Service: msRequestFactory', function () {

// load the service's module

beforeEach(module('meanstackApp'));

// instantiate service

var msRequestFactory;

beforeEach(inject(function ($injector) {

msRequestFactory = $injector.get('msRequestFactory');

}));

it('should exist', function () {

expect(!!msRequestFactory).toBe(true);

});

it('should make JSON', function () {

var request = msRequestFactory.createRequest('user', 'login', '');

expect(request).toEqual({

'area' : 'user',

'resource' : 'login',

'id' : '',

'request' : {}

});

msRestfulApi는 $resource를 통해 서버에 요청을 보낸다. 서버 요청에 대한 Mock을 만들어서 응답을 줄 수 있는 기능으로 앵귤러는 $httpBackend를 제공한다. 즉, 실서버가 없을 경우 XHR 또는 JSONP 요청없이도 실서버에 요청한 것과 같은 응답을 줄 수 있다. $httpBackend의 유형은 두가지 이다

- request expectation : 요청 JSON 데이터의 검증 원하는 결과가 왔는지 설정. expect().respond()

- backend definition : 가상의 응답정보를 설정. when().respond()

서버의 요청은 모두 async 처리가 되므로 테스트코드 작성하기가 애매하다. 따라서 $httpBackend.flush()를 호출하는 시점에 request가 전달되므로, 테스트 코드 작성시 적절한 위치에 놓아야 한다. API 참조 (http://docs.angularjs.org/api/ngMock.$httpBackend)

// 로그인 서비스 테스트에서 계속 에러가 발생하여 Re-Thinking 중이다.

// 에러 코드

'use strict';

describe('Service: msRestfulApi', function () {

// load the service's module

beforeEach(module('meanstackApp'));

// instantiate service

var msRestfulApi, httpBackend, scope, resource;

beforeEach(inject(function ($injector) {

msRestfulApi = $injector.get('msRestfulApi');

httpBackend = $injector.get('$httpBackend');

scope = $injector.get('$rootScope');

resource = $injector.get('$resource');

httpBackend.when('POST', '/api/v1/user/login').respond(200, {'id': 1});

}));

it('should call test', function() {

var request = {

'area' : 'user',

'resource' : 'login',

'id' : '',

'request' : {}

};

msRestfulApi.login(request, function(response){

expect(response.id).toBe(1);

console.log(response);

}, function(error){

console.log(error);

});

httpBackend.flush();

expect(r.id).toBe(1);

});

<참조>

- Jasmine 문법

- Jasmine 소개

- Karma 테스트 하기

- Protractor Seed 소개 : Protractor WebDriver 업데이트

- WebDriverJS 소개

저작자표시 비영리 변경금지

'AngularJS > Start MEAN Stack' 카테고리의 다른 글

[MEAN Stack] Protractor 통한 클라이언트 E2E Test (0)	2014.06.03
[MEAN Stack] 다국어 처리하기 (1)	2014.05.28
[MEAN Stack] 로그인 서비스 개발 및 정보 저장하기 (0)	2014.02.04
[MEAN Stack] Yo 이용하여 Controller 생성하고 UI-Router에 설정하기 (0)	2014.01.30
[MEAN Stack] 메뉴 구성하고 UI Routing 설정하기 (0)	2014.01.29

posted by Peter Note

2014. 5. 28. 21:20 AngularJS/Start MEAN Stack

[MEAN Stack] 다국어 처리하기

다국어 처리를 Angular.js 기반인 클라이언트단에서 처리하는 방법에 대해 알아본다. angular-translate 과 angular-gettext 두가지가 존재하는데 여기서는 angular-gettext를 살펴보도록 한다

준비사항

- 먼저 poedit을 설치한다. 언어 번역을 일괄적으로 관리할 수 있는 툴이다. 기본 영문에서 한글 번역내역을 입력하여 언어별로 .po 파일을 관리한다

- angular-gettext 모듈을 사용한다. --save 옵션넣어서 bower.json 업데이트 한다. 인스톨 가이드를 참조한다

$ bower install angular-gettext --save

- grunt-angular-gettext 를 설치한다. --save-dev 옵션. 해당 모듈은 .po파일을 생성하거나 생성된 내용을 angular 자바스크립트로 변환을 담당한다

$ npm install grunt-angular-gettext --save-dev

Grunt Config 수정

- grunt-angular-gettext를 통하여 poedit에서 읽을 수 있는 원본 파일(.pot)을 생성하고, 원본에서 다른 언어의 번역을 넣은 파일(.po)을 읽어서 angular 형식의 자바스크립트 파일을 생성한다.

- Gruntfile.js 첨부내역

+ nggettext_extract : 다국어 지원이 필요한 .html을 읽어서 원본 origin_template.pot 파일 생성 위치와 파일명 지정

+ nggettext_compile : 다국어 .po 파일을 읽어서 angular 형식의 파일을 만들 위치와 파일명 지정.

별도의 모듈로 gettext_translation을 적용한다

// Translation for multi-lang

nggettext_extract: {

pot: {

files: {

'app/translation/po/origin_template.pot': [

'app/index.html',

'app/views/**/*.html',

'app/domain/**/*.html'

]

}

nggettext_compile: {

all: {

options: {

module: 'gettext_translation'

files: {

'app/translation/translation.js': ['app/translation/po/*.po']

}

다국어 지원 자바스크립트 생성 작업

- html 수정 : 다국어 지원이 필요한 부분에 translate 애트리뷰트를 넣는다. 한줄은 <span></span> 태그를 사용한다

<span translate>Create an Account</span>

</div>

<span style="color:red" ng-show="focusName" translate> @Please input your full name.</span>

</div>

<span translate>Email</span>

<span style="color:red" ng-show="focusEmail" translate> @Please input your email.</span>

</div>

<span translate>Password</span>

<span style="color:red" ng-show="focusPassword" translate> @Please input your password.</span>

</div>

<span translate>Have an account?</span>

</div>

</a>

<span translate>Create New Account</span>

</div>

</button>

<form>

- grunt를 통해서 html의 translate 을 해석하여 origin_template.pot파일을 생성한다

$ grunt nggettext_extract

- origin_template.pot 파일을 poedit로 import 한다. 한글을 언어로 설정하여 번역을 한후, ko_KR.po 파일을 생성한다.

+ 새 번역 만들기 클릭 후 origin_template.pot파일 선택한 후 번역 언어 선택함

+ 번역을 입력하고 "다른 이름으로 저장하기..."를 선택하여 ko_KR.po 파일을 만든다

- 번역된 ko_KR.po 파일 내역을 translate.js 파일로 만들기

$ grunt nggettext_compile

// ko_KR.po 파일 내역

msgid ""

msgstr ""

"Project-Id-Version: \n"

"POT-Creation-Date: \n"

"PO-Revision-Date: 2014-05-27 16:20+0900\n"

"Last-Translator: \n"

"Language-Team: \n"

"Language: ko_KR\n"

"MIME-Version: 1.0\n"

"Content-Type: text/plain; charset=UTF-8\n"

"Content-Transfer-Encoding: 8bit\n"

"X-Generator: Poedit 1.6.5\n"

"X-Poedit-Basepath: .\n"

"Plural-Forms: nplurals=1; plural=0;\n"