응답하라 반응형 웹 네번째 발표 - Angular

2. Speaker
Android Developer
김경열 (http://www.facebook.com/chitacan)
Server-side Engineer
윤정부 (http://www.facebook.com/jeongbu.yun)

3. ● 유부남 개발자
● Java Web Application Back-End 개발
자
● 거품경력 10년차
● Copy and Paste 달인.
● 주 업무는 Back-End
● Javascript 너무 어려워요.
● Javascript 싫어요.
● Javascript 열심히 공부중.

5. Index
● Angular.Js ?
● Angular.Js ,
● Angular.Js .

6. Angular.Js ?
● Google이 만든 MV*(Model-View-Whatever) Javascript
Framework.
● SPA(Single Page Application).
● 모던 웹을 좀더 화려하게 다룰수 있음.
● 오픈소스.
● 무료.

7. Angular.Js ?

8. Angular.Js ?

9. ● 쉬운 Hello World.
● 하지만 Hell World.
● ng-app, ng-model , {{yourName}}
● Hello World Sample에 Angular.Js의 많은 핵심 기술이 있
음.
● learning curve.
● 시간(== 돈) 비용 발생.
Angular.Js ?

10. ● 오픈소스 != 무료.
● 오픈소스 = 공부.
● 오픈소스 = 해당 소스의 이념, 사용법, 나(or 프로젝트) 에
필요한지 확인.
● 오픈소스 = 엄청난 시간과 노력 ( == 돈) 이 필요.
Angular.Js ?

11. ● 학습용 사이트 소개
● http://angularjs.org/
● https://egghead.io/tags/AngularJS
Angular.Js ?

12. ● 흔한 국내 웹 개발시 javascript 사용기
○ header : 공통 || 라이브러리.
○ body || contents : 업무로직.
○ 심한 경우 각자 알아서 가져다 쓰기..
○ 기타 필요한 라이브러리 및 개발 소스가 믹스.
● 코드는 협업.
● 소스 관리가 안됨.
● 개성이 넘쳐남.
● 중복코드, 미사용 코드 등 출처가 불명확 코드 난립.
Angular.Js ,

13. Angular.Js ,

14. ● Back-End
○ Framework
○ 방법론
○ 디자인 패턴
● Javascript ...
● 아무거나 막 쓸수는 없음.
● 충분히 검증된 Framework.
● Back-End 개발자도 잘 적응할 수 있는 Framework.
Angular.Js ,

15. ● MVC || MV* Framework.
● 확장성과 개발 생산성.
● 유용한 기능.
● Learning Curve.
● Hot 프레임웍.
Angular.Js ,

16. Angular.Js ,

17. ● http://www.infoq.com/research/top-javascript-mvc-
frameworks
● Angular.Js VS BackBone.
● 협업(or 커뮤니케이션) 이 가능.
Angular.Js ,

18. ● 양방향 데이터 바인딩.
● MVC
○ Model
○ ViewModel
○ View
○ Controller
Angular.Js .

19. ● Templates.
● DI (Dependency Injection).
● Directives.
● Testing.
Angular.Js .

20. 반응형 웹을 위한 Angular.js?
Angular.js 는 반응형 웹만을 위한 프레임워크는
아닙니다. 하지만 편리한 도구들을 제공해 줍니
다.

21. 웹 앱 만들기
● 브라우저 외부의 이벤트와 데이터에
● 우리가 만든 문서가 반응하면 됩니다.

22. 어디에 반응할 건데?
● 사용자 이벤트(click, touch, focus…)
● 외부 데이터(http, accelerometer, video, audio)
● form 입력
● URL
● 화면 크기

23. 근데 화면 크기는
● css 에 맡깁시다!!
● 귀찮으시면 Bootstrap 다크포스를...

24. 뭐가 필요할까?
● Browser API
● Dom API
● CSS class API
● 복잡한 구조를 정리하기 위한 패턴, 프레임워크들
○ mvc, promise...

25. 어떻게 반응하나?
$('#btn').on('click', function(e) {
e.preventDefault();
// do something
$('#btn').addClass(‘clicked’);
});
$('#btn').on('click', function(e) {
e.preventDefault();
// do something
$('#btn').addClass(‘clicked’);
});
$('#btn').on('click', function(e) {
e.preventDefault();
// do something
$('#btn').addClass(‘clicked’);
});
$('#btn').on('click', function(e) {
e.preventDefault();
// do something
$('#btn').addClass(‘clicked’);
});
$('#btn').on('click', function(e) {
e.preventDefault();
// do something
$('#btn').addClass(‘clicked’);
});

26. 어떻게 반응하나?
$.ajax({
url:'/need_something',
type:'GET',
success: function(res) {
$('aside div p').html(res.value);
}
});
$.ajax({
url:'/need_something',
type:'GET',
success: function(res) {
$('aside div p').html(res.value);
}
});
$.ajax({
url:'/need_something',
type:'GET',
success: function(res) {
$('aside div p').html(res.value);
}
});
$.ajax({
url:'/need_something',
type:'GET',
success: function(res) {
$('aside div p').html(res.value);
}
});

27. 반응하기
외부 이벤트와 데이터에 반응하고, 결과를 보여주려면, Dom
을 찾아다녀야 됩니다.
$(‘너‘).어디있니()

28. 이러면 어떨까요?
<button ng-click=’click(data)’>oh</button>
<p ng-class=’{error:data}’>message</p>
HTML 을 확장해 Dom이 스스로 자신이 반응해
야 할 이벤트와 데이터를 알 수 있다면?

29. ● Dom과 Javascript 간의 데이터 공유 >>> Data Binding
● HTML을 확장해 새로운 규칙 추가 >>> Directive
그 밖에도 component, DI, testing 등 엄청난 장점들이 있지
만 오늘은 여기에만 집중!!
Angular Way.

30. Data Binding
{{ data }} data
dom javascript
● Dom 과 양방향으로 결합된 js 오브젝트 제공($scope)

31. Data Binding
<script>
//...
$scope.data = ‘Hello’;
// ...
</script>
<p>{{ data }}</p><p>Hello</p>

32. Data Biding 맛보기
http://docs.angularjs.org/api/ng/directive/ngClick

33. Directive
HTML 을 확장해 새로운 규칙을 가르쳐줍니다.
<p ng-class=’{error:data}’>message</p>
<p ng-if=’data’>message</p>

34. Directive 맛보기
http://docs.angularjs.org/api/ng/directive/ngClass
http://docs.angularjs.org/api/ng/directive/ngIf

35. Form 에도 반응해 봅시다.
Data Binding과 Directive 를 활용하면 유효성 검
사를 HTML에 선언할 수 있습니다.
<div class=’form-group’ ng-class=’{err: form.url.$invalid}’>
<input class=’form-control’ type=’url’ name=’url’/>
<p class=’help’ ng-show=’form.url.$invalid’>Invalid</p>
</div>

36. Form 맛보기
http://docs.angularjs.org/guide/forms

37. URL 에 반응하기
URL에 따라 조금씩 다른 HTML과 동작이 필요하다면?
/book/:bookId >>> book.html
/book/:bookId/ch/:chapterId >>> chapter.html

38. Router, Controller
angular.js 의 controller와 router 를 활용하면 URL에 쉽게 반
응할 수 있습니다.
function($routeProvider, $locationProvider) {
$routeProvider.when('/Book/:bookId', {
templateUrl: 'book.html',
controller: BookCtrl,
});
$routeProvider.when('/Book/:bookId/ch/:chapterId',
{
templateUrl: 'chapter.html',
controller: ChapterCtrl,
});
});

39. Router, Controller 맛보기
http://docs.angularjs.org/api/ngRoute/directive/ngView

40. Hack with Angular.js
● Angular.js 는 웹 앱을 만드는데 편리한 도구들을 제공해
줍니다.
● Angluar.js로 반응형 웹을 만드는 건 즐겁습니다!!

41. 끝
Hack the response with ng