lonic Framework - Angular

Ionic Framework 설치 방법 및 Angular 개념 정리한 자료 입니다.

Ionic

node 설치 후,

node.js command prompt 에서

1. cordova 설치

- npm install -g cordova

2. ionic 프레임워크 설치

- npm install -g ionic

3. android 와 java 환경변수 설정

- ANDROID_HOME : sdk 위치

4. 프로젝트 생성

- ionic start 프로젝트명 (플랫폼)

5. 플랫폼 추가

- ionic add platform android (default sdk version : 22)

6. 빌드 및 실행

- ionic build android

- ionic emulate android

- ionic run android

- ionic serve

- ionic serve -lab

({host}/ionic-lab : ios 와 android 비교 가능)

7. 애뮬

* ionicBox (android OS 기반 경량 애뮬)

8. 플러그인

-ionic plugin add {플러그인명}

※ Ionic Cloud 제공, Cloud 환경에서 배포파일 생성 가능

Angular

1. 데이터 바인딩

========================================================================

$scope

- 컨트롤러나 디렉티브의 유효 범위 내의 저장 공간
- 내붕에 정의된 모델이나 핸들러 함수에 접근 가능

※ 상위와 자식 컨트롤러간의 scope 공유 가능
(↔lsolate scope)

------------------------------------------------------------------------

$apply

- 모델값이 변경되면 자동으로 $digest loop 가 호출되어
모델의 변경을 확인 후 뷰를 업데이트

※ 3rd-party Library를 이용한 양방향 데이터 바인딩 경우 쓰임(jquery)

-------------------------------------------------------------------------

$watch

- $apply와 동일한 원리
(앵귤러 내부에서 사용되며, 특정 모델의 변경에 대한 함수 등록 가능)

-------------------------------------------------------------------------

2. 디렉티브 생성

=========================================================================

- HTML Compiler 가 HTML DOM를 돌면서 디렉티브 이름과 같은 DOM 요소를 찾음.
1) compile - DOM 요소를 돌면서 디렉티브를 찾음 (속성명, 태그명, 주석, 클래스명)
2) link - 디렉티브와 HTML이 상호작용 할 수 있도록 디렉티브에 listener를 등록
($watch 설정)

- 작명법
스크립트단 : 카멜 표기법
뷰단 : 스네이크 표기법

- 생성방법으로는 여러가지 룰이 있으며 규칙을 숙지하고 사용해야 함,
1) restrict (String = E, A, C, M)
- 옵션에 따른 매칭되는 태크명, 속성명, 클래스명, 주석으로 구분

2) templatev (String)
- html의 디렉티브를 사용한 부분을 보여줄 내용

3) templateUrl (String)
- template를 별도의 url에서 가져옴. 상대위치

4) replace (boolean)
- templateUrl 또는 template 의 내용을 추가할지 교체하지 설정

5) priority (int : Default = 0)
- 디렉토리별 우선순위 지정(↑)

6) transclude (boolean)
- ng-transclude를 이용하여 기존 원본 내용을 포함시킬지 결정

7) scope (boolean : Default = false)
- 부모객체 공유 여부
+ {...} : isolate/isolated scope를 새롭게 생성
(부모의 scope 값을 read/write 못하게 하기 위함, 
접근하고 싶은경우 바인딩 전략 =, @, & 사용)

8) controller (function(){...})
- 다른 디렉티브와 통신하기 위한 역할을 하는 컨트롤러 명칭을 정의
- $scope 와 this 를 이용하여 data 및 function을 정의
(require 에 의해 액세스 가능)

9) require
- 다른 컨트롤러나 디렉티브의 컨트롤러에 this로 정의된 function을 사용할 때 선언
- 컨트롤러 이름을 설정 -> 컨트롤러 주입 -> link 내에서 컨트롤러의 this로 선언된
모든 function 사용 가능
- 추가 옵션
ⓐ 디렉티브 이름 앞에 ? 추가 시, 매칭되는 디렉티브 없어도 에러 x
ⓑ ^ 를 추가 시, DOM 요소들을 거슬러 올라가 해당 디렉티브를 찾음

10) compile
- DOM 요소를 해석하여 디렉티브로 변환하며 두 종류의 link function을 리턴
ⓐ preLink - link 전
ⓑ postLink - link 후(DOM 구조 변경 시에 사용)

11) link
- 데이터 바인딩을 위해 해당 디렉티브 DOM 요소의 이벤트 리스너를 등록
- 디렉티브의 대부분의 로직을 선언
- postlink만 지원

서비스.txt

3. 서비스

- 싱글톤(하나의 인스턴스만 존재)

=====================================================================

constant

- 공통으로 사용하는 환경값을 지정할 때 상수를 지정
- 사용자 정의 디렉티브에서 환경값을 가져다 쓰고 싶을 때 유용

---------------------------------------------------------------------

value

- constant 와 유사
- 최초 한번만 변경 가능
- 디렉티브에서 유용
- 계산 불가

---------------------------------------------------------------------

factory

- 일반적인 서비스
- 어떤 형태의 데이터 타입이라도 리턴 가능
- 값이 변경되면 해당 팩토리의 인스턴스를 사용하는 모든 값이 변경
- Revealing Module Pattern 식으로 작성

--------------------------------------------------------------------

service

- 자동적으로 인스턴스 생성(return 불필요)

--------------------------------------------------------------------

provider

- $get:function(){...} 필요 why? ) config를 통하여 provier 에 대한
환경설정이 가능