막하는 스터디 네 번째 만남 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 binwww

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 연동해서 미니 프로젝트 시작해 봐요!

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

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

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

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