막하는 스터디 네 번째 만남 AngularJs (20151108)

- MVC 구조를지원

- 뷰코드에서는 HTML을작성

- DOM을선택, 조작하는자바스크립트의작성은불필요

- 모델은단순자바스크립트객체(Getter/Setter 함수불필요)

- 컨트롤러함수도단순자바스크립트함수

- 화면의데이터와모델의데이터사이에서양방향데이터바인딩을제공

- 뷰데이터와모델데이터를서로동기화하는코드작성불필요

- 비즈니스로직을담당하는코드에더욱집중할수있음

(책에따르면…)

시작하세요! AngularJS 프로그래밍구글이만든차세대자바스크립트 MVC 프레임워크저자고재도| 위키북스 | 2014.05.02

책 저자와는 모르는 사이! (그저… 책이 괜찮길래…)

- UI컴포넌트를자바스크립트함수호출이아닌 HTML 태그이름이나태그속성을이용해사용할수있게해준다.


- 엉킨실타래와같은코드를작성하지않게의존관계주입을이용해웹애플리케이션을개발할수있다.

- 서비스프로바이더를이용해특정서비스컴포넌트를구현하고해당서비스컴포넌트가사용하는다른서비스

컴포넌트를직접참조하는것이아니라의존관계주입을이용해사용하게한다.

- 서비스컴포넌트를컨트롤러컴포넌트에서주입받아서사용가능

- 의존관계주입을이용해개발하면단위테스트를할수있고, 관심사가분리된재사용할수있는컴포넌트를개

발할수있다.


- HTML을이용해뷰코드를작성하고자바스크립트에서는 비즈니스로직코드만을작성하게하여뷰코드와

로직코드를명확하게분리함.

- 자바스크립트가 HTML의구조를알아야할필요가없어진다.

디자인 패턴 상으로 MVC, MVVC 등의 여러 주장이 있지만,

구글의 AngularJS팀은 MVW (Model-View-Whatever) 프레임워크라고칭함.


양방향데이터바인딩

MVC 구조

지시자(directive)를이용한 HTML 확장

의존관계주입(Depndency Injection)

단일페이지웹 애플리케이션을위한라우터(Router)

$q를이용한자바스크립트비동기프로그래밍지원

자바스크립트테스팅지원

Bower 나, npm 으로 설치하는 방식도 있지만,오늘은 AnguarJS만 사용할 때를 기준으로 스터디해 봅니다.

<html> 태그에 ng-app 이라는 지시자(directive)를 부여함으로써, AngularJs 앱이 됩니다.

그리고 AngularJS표현식(expression)은 {{ 변수 or 연산자 or 함수 }} 형태로작성합니다.

* 객체를 넣으면, JSON 구조가 출력됩니다. *

<html> 태그에 ng-app 지시자(directive)에 이름을 붙여 주세요.

그리고<body> 태그에 ng-controller라는 지시자를 주고, 컨트롤러의 이름을 붙여 주세요.

※ ng-app을 네임스페이스/패키지로 이해 하시고,

ng-controller를 클래스/함수 등으로 이해하시면 됩니다.

$scope 변수에 userList 라는 배열을 만들어 두었다면,

HTML 에서 ng-repeat 지시자를 통해,

userList 요소를 화면에 출력할 수 있습니다.

$index : 배열인덱스 (0부터시작)

$first : 첫번째요소이면 true

$middle :첫번째와마지막사이에있으면 true

$last :마지막요소이면 true

$even :짝수번째면 true

$odd :홀수번째면 true

각각의 input에 값을 입력하면,

ng-model 지시자에 따라 연결된,

$scope 변수 내에 해당 변수에 값이 자동으로 바인딩됩니다.

ng-click 지시자는 클릭을 했을 때, 반응하며

$scope변수의 addUser() 함수가 호출됩니다.

HTML에서 호출할

addUser()라는 함수를 $scope 변수 아래에 만들고,

$scope.userList 에 $scope.newUser 변수 값을

push 하는 동작만 수행하도록 작성합니다.


- 객체의접근시, window 객체가최상위가아니라 scope가최상위다.

- undefined 와 null 은 무시된다

- 제어문작성이안된다 (if, for, throw 등)

- AngularJS의필터를사용할수 있다. (예 : {{ money | currency }} 와 같은형태 )

- 그 외표현식내에서 3항식, delete , in, instanceof, new , this ,typeof 와같은

특별연산자는사용못함

newUser.name 과 같은 표현식 사용이 가능했던 이유

ng-model 지시자의 값이 true 를 가지고 있으면,

체크박스는 체크 표시됩니다.

(책에있던예제)

(책에있던예제)

여기 까지 해 보니,

!! 잠깐 쉬고 싶었어요…

폼이름.인풋명. $invalid : 유효하지않을때

$valid : 유효상태일때

$error.지시어(maxlength, pattern, true-value, false-value, change …)

$pristine : 사용자의입력이없으면 true

$dirty : 사용자의입력이있었으면 true

값 in 배열

라벨로사용할프로퍼티 for 값 in객체

라벨로사용할프로퍼티 group by 그룹프로퍼티 for 값 in 객체

ng-click : 클릭 시

ng-dblclick : 더블 클릭 시

ng-keydown : 키보드의 키를 누를 때 ($event 객체를 이용해 keyCode, altKey 등 획득 가능)

ng-keypress : 키를 눌러 입력되었을 때

ng-keyup : 키를 뗄 때

ng-mousedown : 마우스 버튼을 누를 때

ng-mouseenter : 마우스 포인터가 해당 개체 안으로 들어올때

ng-mouseleave : 마우스 포인터가 해당 개체 밖으로 들어올때

ng-mousemove : 마우스 포인터가 해당 개체 위에서 움직일 때

ng-mouseover : 마우스 포인터가 개체 위로 들어올 때

ng-mouseup : 마우스 포인터가 개체 위에 있는 동안 마우스 버튼을 뗄 때

ng-chnage : 폼 값이 변경되었을 때

ng-blur : 폼 , 앵커 요소에서 커서를 잃을 때

$scope.$broadcast("이벤트명", 인자);

자식모듈에게이벤트를전달

$scope.$emit("이벤트명", 인자);

부모모듈에게이벤트를전달

$scope.$on("이벤트명", 콜백)

이벤트를받을때 (콜백두번째인자가이벤트발생시킨쪽에서보내는데이터)

빨간색 테두리가 부모 모듈입니다.

파란색 테두리가 자식 모듈들입니다.

“부모에게” 버튼은 부모 모듈에 이벤트를 보내고,

“자식에게” 버튼은 자식 모듈에 이벤트를 보냅니다.

자식1 “부모에게” 이벤트를 보내고,

부모는 자식이 보내온 메시지를 화면에 출력했습니다.

자식2도 “부모에게” 이벤트를 보내고,

부모는 자식이 보내온 메시지를 화면에 또 출력했습니다.

부모도 “자식에게” 이벤트를 보내고,

자식들은 부모가 보내온 메시지를 화면에 출력했습니다.


컨트롤러

필터

지시자

서비스

angular.module('모듈 이름', ["사용할 모듈", "..."]);

.controller("컨트롤러 이름", ["인자1","인자2", function(인자1, 인자2) {

// 로직

}) ;



기본적으로 ng 모듈이로드되어, 사용되는것

ngMock, ngCookies, ngResource, ngSanitize 등이 있음

ngCookies 모듈은 $cookie와 $cookieStore 서비스를 제공함.

모듈 말고…,

!! 빨리 SPA 하나 만들고 싶거든요

라우터 모듈(angualar-route.js)은 별도로 받아야 합니다.

AngularJS 받았던 화면에서, “Extras – Browse additional modules” 링크를 통해 다운로드 받을 수 있는 페이지로 이동하세요.

라우터는 Local에서 할 수가 없어요.

웹 서버 환경에서실행해야합니다.

모두 간단한 웹 서버 만들어서,

HTML 파일을띄워주세요!

익스프레스 제너레이터가 설치안되어 있으면,

아래명령으로 설치하세요! (지난 시간에 다들 했었어요~)

# npm install –g express-generator

프로젝트 폴더하나만드시고,

아래명령으로 익스프레스 기본파일생성하세요!

# express --ejs

# npm install

아래명령으로 웹서버를 80포트로구동해주세요.

# set PORT=80

# node bin\www

views 폴더에있는 index.ejs 파일내용을

오른쪽 화면과같이작성해 주세요.

public 폴더에 파일들을 복사해 넣으세요.

- angular.js

- angular-route.js

- myApp.js (* 여러분이 만들어야 합니다)

- tpl.home.html (* 여러분이 만들어야 합니다)

- tpl.user.html (* 여러분이 만들어야 합니다)

myApp.js

tpl.home.html

tpl.user.html

컨트롤러에서의존성주입(DI)으로,

아래서비스를받아서활용해보세요.

$routeParams

jQuery의 $.ajax()와 같이 AJAX 통신할수 있도록하는모듈

컨트롤러에서 $http 를 받고,

var req = $http({ method : "GET", url : "sample.json" });

- $http.get , $http.post , $http.put, $http.delete , $http,head , $http.jsonp 등도제공

- $http.post와 $http.put만 2번째인자가 설정객체가아닌 데이터를넣고, 3번째인자에설정 객체

설정 객체에는:

- method : http 메서드

- url : 접근할 URL

- params : 쿼리 스트링

- data : 포스트로 보낼 것

- headers : 헤더

- timeout : 밀리초 단위 타임아웃

- responseType : 응답 타입 설정

설정객체

오늘은…,

!! 시간 남았으면, mongoDB 연동해서 미니 프로젝트 시작해 봐요!

Software

막하는 스터디 네 번째 만남 AngularJs (20151108)