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