3. - MVC 구조를 지원
- 뷰 코드에서는 HTML을 작성
- DOM을 선택, 조작하는 자바스크립트의 작성은 불필요
- 모델은 단순 자바스크립트 객체(Getter/Setter 함수 불필요)
- 컨트롤러 함수도 단순 자바스크립트 함수
- 화면의 데이터와 모델의 데이터 사이에서 양방향 데이터 바인딩을 제공
- 뷰 데이터와 모델 데이터를 서로 동기화하는 코드 작성 불필요
- 비즈니스 로직을 담당하는 코드에 더욱 집중 할 수 있음
(책에 따르면…)
시작하세요! AngularJS 프로그래밍
구글이 만든 차세대 자바스크립트 MVC 프레임워크
저자 고재도| 위키북스 | 2014.05.02
책 저자와는 모르는 사이! (그저… 책이 괜찮길래…)
4. - UI컴포넌트를 자바스크립트 함수 호출이 아닌 HTML 태그 이름이나 태그 속성을 이용해 사용할 수 있게 해 준다.
(책에 따르면…)
- 엉킨 실타래와 같은 코드를 작성하지 않게 의존관계 주입을 이용해 웹 애플리케이션을 개발할 수 있다.
- 서비스 프로바이더를 이용해 특정 서비스 컴포넌트를 구현하고 해당 서비스 컴포넌트가 사용하는 다른 서비스
컴포넌트를 직접 참조하는 것이 아니라 의존관계 주입을 이용해 사용하게 한다.
- 서비스 컴포넌트를 컨트롤러 컴포넌트에서 주입 받아서 사용 가능
- 의존관계 주입을 이용해 개발하면 단위 테스트를 할 수 있고, 관심사가 분리된 재사용할 수 있는 컴포넌트를 개
발할 수 있다.
5. (책에 따르면…)
- HTML을 이용해 뷰 코드를 작성하고 자바스크립트에서는 비즈니스 로직 코드만을 작성하게 하여 뷰 코드와
로직 코드를 명확하게 분리함.
- 자바스크립트가 HTML의 구조를 알아야 할 필요가 없어진다.
디자인 패턴 상으로 MVC, MVVC 등의 여러 주장이 있지만,
구글의 AngularJS 팀은 MVW (Model-View-Whatever) 프레임워크라고 칭함.
6. (책에 따르면…)
양방향 데이터 바인딩
MVC 구조
지시자(directive)를 이용한 HTML 확장
의존관계 주입(Depndency Injection)
단일 페이지 웹 애플리케이션을 위한 라우터(Router)
$q를 이용한 자바스크립트 비동기 프로그래밍 지원
자바스크립트 테스팅 지원
7. Bower 나, npm 으로 설치하는 방식도 있지만,
오늘은 AnguarJS만 사용할 때를 기준으로 스터디해 봅니다.
8. <html> 태그에 ng-app 이라는 지시자(directive)를 부여함으로써, AngularJs 앱이 됩니다.
그리고 AngularJS 표현식(expression)은 {{ 변수 or 연산자 or 함수 }} 형태로 작성합니다.
* 객체를 넣으면, JSON 구조가 출력됩니다. *
9. <html> 태그에 ng-app 지시자(directive)에 이름을 붙여 주세요.
그리고<body> 태그에 ng-controller라는 지시자를 주고, 컨트롤러의 이름을 붙여 주세요.
※ ng-app을 네임스페이스/패키지로 이해 하시고,
ng-controller를 클래스/함수 등으로 이해하시면 됩니다.
10. $scope 변수에 userList 라는 배열을 만들어 두었다면,
HTML 에서 ng-repeat 지시자를 통해,
userList 요소를 화면에 출력할 수 있습니다.
$index : 배열 인덱스 (0부터 시작)
$first : 첫 번째 요소이면 true
$middle : 첫 번째와 마지막 사이에 있으면 true
$last : 마지막 요소이면 true
$even : 짝수 번째면 true
$odd : 홀수 번째면 true
11. 각각의 input에 값을 입력하면,
ng-model 지시자에 따라 연결된,
$scope 변수 내에 해당 변수에 값이 자동으로 바인딩됩니다.
ng-click 지시자는 클릭을 했을 때, 반응하며
$scope변수의 addUser() 함수가 호출됩니다.
12. HTML에서 호출할
addUser()라는 함수를 $scope 변수 아래에 만들고,
$scope.userList 에 $scope.newUser 변수 값을
push 하는 동작만 수행하도록 작성합니다.
13.
14. (책에 따르면…)
- 객체의 접근 시, window 객체가 최상위가 아니라 scope가 최상위다.
- undefined 와 null 은 무시된다
- 제어문 작성이 안된다 (if, for, throw 등)
- AngularJS의 필터를 사용할 수 있다. (예 : {{ money | currency }} 와 같은 형태 )
- 그 외 표현식 내에서 3항식, delete , in, instanceof, new , this ,typeof 와 같은
특별 연산자는 사용 못함
newUser.name 과 같은 표현식 사용이 가능했던 이유
24. 폼이름.인풋명. $invalid : 유효하지 않을 때
$valid : 유효 상태일 때
$error.지시어(maxlength, pattern, true-value, false-value, change …)
$pristine : 사용자의 입력이 없으면 true
$dirty : 사용자의 입력이 있었으면 true
25.
26. 값 in 배열
라벨로 사용할 프로퍼티 for 값 in 객체
라벨로 사용할 프로퍼티 group by 그룹 프로퍼티 for 값 in 객체
27. 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 : 폼 , 앵커 요소에서 커서를 잃을 때
28. $scope.$broadcast("이벤트 명", 인자);
자식 모듈에게 이벤트를 전달
$scope.$emit("이벤트 명", 인자);
부모 모듈에게 이벤트를 전달
$scope.$on("이벤트 명", 콜백)
이벤트를 받을 때 (콜백 두 번째 인자가 이벤트 발생시킨 쪽에서 보내는 데이터)
29. 빨간색 테두리가 부모 모듈입니다.
파란색 테두리가 자식 모듈들입니다.
“부모에게” 버튼은 부모 모듈에 이벤트를 보내고,
“자식에게” 버튼은 자식 모듈에 이벤트를 보냅니다.
39. 라우터 모듈(angualar-route.js)은 별도로 받아야 합니다.
AngularJS 받았던 화면에서, “Extras – Browse additional modules” 링크를 통해 다운로드 받을 수 있는 페이지로 이동하세요.
40.
41. 라우터는 Local에서 할 수가 없어요.
웹 서버 환경에서 실행해야 합니다.
모두 간단한 웹 서버 만들어서,
HTML 파일을 띄워주세요!
42. 익스프레스 제너레이터가 설치 안되어 있으면,
아래 명령으로 설치하세요! (지난 시간에 다들 했었어요~)
# npm install –g express-generator
프로젝트 폴더 하나 만드시고,
아래 명령으로 익스프레스 기본 파일 생성하세요!
# express --ejs
# npm install
43. 아래 명령으로 웹 서버를 80포트로 구동해 주세요.
# set PORT=80
# node binwww
44. views 폴더에 있는 index.ejs 파일 내용을
오른쪽 화면과 같이 작성해 주세요.
49. 컨트롤러에서 $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 : 응답 타입 설정
설정 객체