응답하라 반응형웹 - 4. angular
DESCRIPTION
응답하라 반응형 웹 네번째 발표 - AngularTRANSCRIPT
Speaker
Android Developer김경열 (http://www.facebook.com/chitacan)
Server-side Engineer윤정부 (http://www.facebook.com/jeongbu.yun)
● 유부남 개발자● Java Web Application Back-End 개발자
● 거품경력 10년차● Copy and Paste 달인.● 주 업무는 Back-End● Javascript 너무 어려워요.● Javascript 싫어요.● Javascript 열심히 공부중.
Index
● Angular.Js ?
● Angular.Js ,
● Angular.Js .
Angular.Js ?
● Google이 만든 MV*(Model-View-Whatever) Javascript
Framework.
● SPA(Single Page Application).
● 모던 웹을 좀더 화려하게 다룰수 있음.
● 오픈소스.
● 무료.
Angular.Js ?
Angular.Js ?
● 쉬운 Hello World.
● 하지만 Hell World.
● ng-app, ng-model , {{yourName}}
● Hello World Sample에 Angular.Js의 많은 핵심 기술이 있
음.
● learning curve.
● 시간(== 돈) 비용 발생.
Angular.Js ?
● 오픈소스 != 무료.
● 오픈소스 = 공부.
● 오픈소스 = 해당 소스의 이념, 사용법, 나(or 프로젝트) 에
필요한지 확인.
● 오픈소스 = 엄청난 시간과 노력 ( == 돈) 이 필요.
Angular.Js ?
● 학습용 사이트 소개
● http://angularjs.org/
● https://egghead.io/tags/AngularJS
Angular.Js ?
● 흔한 국내 웹 개발시 javascript 사용기
○ header : 공통 || 라이브러리.
○ body || contents : 업무로직.
○ 심한 경우 각자 알아서 가져다 쓰기..
○ 기타 필요한 라이브러리 및 개발 소스가 믹스.
● 코드는 협업.
● 소스 관리가 안됨.
● 개성이 넘쳐남.
● 중복코드, 미사용 코드 등 출처가 불명확 코드 난립.
Angular.Js ,
Angular.Js ,
● Back-End
○ Framework
○ 방법론
○ 디자인 패턴
● Javascript ...
● 아무거나 막 쓸수는 없음.
● 충분히 검증된 Framework.
● Back-End 개발자도 잘 적응할 수 있는 Framework.
Angular.Js ,
● MVC || MV* Framework.
● 확장성과 개발 생산성.
● 유용한 기능.
● Learning Curve.
● Hot 프레임웍.
Angular.Js ,
Angular.Js ,
● http://www.infoq.com/research/top-javascript-mvc-
frameworks
● Angular.Js VS BackBone.
● 협업(or 커뮤니케이션) 이 가능.
Angular.Js ,
● 양방향 데이터 바인딩.
● MVC
○ Model
○ ViewModel
○ View
○ Controller
Angular.Js .
● Templates.
● DI (Dependency Injection).
● Directives.
● Testing.
Angular.Js .
반응형 웹을 위한 Angular.js?
Angular.js 는 반응형 웹만을 위한 프레임워크는 아닙니다. 하지만 편리한 도구들을 제공해 줍니다.
웹 앱 만들기
● 브라우저 외부의 이벤트와 데이터에● 우리가 만든 문서가 반응하면 됩니다.
어디에 반응할 건데?
● 사용자 이벤트(click, touch, focus…)● 외부 데이터(http, accelerometer, video, audio)● form 입력● URL● 화면 크기
근데 화면 크기는
● css 에 맡깁시다!!● 귀찮으시면 Bootstrap 다크포스를...
뭐가 필요할까?
● Browser API● Dom API● CSS class API● 복잡한 구조를 정리하기 위한 패턴, 프레임워크들
○ mvc, promise...
어떻게 반응하나?
$('#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’);
});
어떻게 반응하나?
$.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);
}
});
반응하기
외부 이벤트와 데이터에 반응하고, 결과를 보여주려면, Dom 을 찾아다녀야 됩니다.
$(‘너‘).어디있니()
이러면 어떨까요?
<button ng-click=’click(data)’>oh</button>
<p ng-class=’{error:data}’>message</p>
HTML 을 확장해 Dom이 스스로 자신이 반응해야 할 이벤트와 데이터를 알 수 있다면?
● Dom과 Javascript 간의 데이터 공유 >>> Data Binding● HTML을 확장해 새로운 규칙 추가 >>> Directive
그 밖에도 component, DI, testing 등 엄청난 장점들이 있지만 오늘은 여기에만 집중!!
Angular Way.
Data Binding
{{ data }} data
dom javascript
● Dom 과 양방향으로 결합된 js 오브젝트 제공($scope)
Data Binding
<script>
//...
$scope.data = ‘Hello’;
// ...
</script>
<p>{{ data }}</p><p>Hello</p>
Data Biding 맛보기
http://docs.angularjs.org/api/ng/directive/ngClick
Directive
HTML 을 확장해 새로운 규칙을 가르쳐줍니다.
<p ng-class=’{error:data}’>message</p>
<p ng-if=’data’>message</p>
Directive 맛보기
http://docs.angularjs.org/api/ng/directive/ngClasshttp://docs.angularjs.org/api/ng/directive/ngIf
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>
Form 맛보기
http://docs.angularjs.org/guide/forms
URL 에 반응하기
URL에 따라 조금씩 다른 HTML과 동작이 필요하다면?
/book/:bookId >>> book.html
/book/:bookId/ch/:chapterId >>> chapter.html
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,
});
});
Router, Controller 맛보기
http://docs.angularjs.org/api/ngRoute/directive/ngView
Hack with Angular.js
● Angular.js 는 웹 앱을 만드는데 편리한 도구들을 제공해 줍니다.
● Angluar.js로 반응형 웹을 만드는 건 즐겁습니다!!
끝Hack the response with ng