AngularJS를 이용한

Todo app 만들기

Day 1

Conceptual Overview

Module
- Template
- Controller
- Scope
- Directive
- Service
- Filter
- Conceptual overview
MVW
- MVC, MVP, MVVM

Dev Environment

Angular v1.5
Nodejs v6.x
- node, npm
Atom editor
Chrome browser
Git

Hello world

View와 Controller의 관계
Data binding
Expression
ngApp, ngInit
- git checkout ngInit
ngController
- angular.module()
- controller()
- $scope
- git checkout helloWorld

ECMAScript 6

Block scope (let, const)
Arrow function
Template string
Class (getter, setter)
Promise

Block Scope

var: function scope
let: block scope, 가변
const: block scope, 불변

function foo() {
  if (false) {
    var a = 1;
  }
  console.log(a);
}

foo(); // undefined

function bar() {
  if (false) {
    let a = 1;
  }
  console.log(a);
}

bar(); // Reference Error

function foo() {
  var a;    
  if (false) {
    a = 1;
  }
  console.log(a);
}

foo(); // undefeind

function bar() {
  if (false) {
    let a;
    a = 1;
  }
  console.log(a);
}

bar(); // Reference Error

const a = 1;

a = 2; 
// TypeError: 
// Assignment to constant variable.

const b; 
// SyntaxError: 
// Missing initializer in const declaration

Arrow Function

arrow function
arguments 가 없음
this 가 없음 (lexical this)
위 binding 작업이 없어 가벼움

var foo = function(param) {
  return true;
}
const foo = (param) => {
  return true;
}
const foo = param => true;

let arr = [1,2,3,4,5];
arr.map(m = n * n)
   .filter(n => n % 2 === 0)
   .reduce((r, n) => r + n); // [4, 16]

Template String

코드 가독성
성능?

const protocol = 'http';
const ip = '127.0.0.1';
const port= 3000;
const resource = 'user';
const id = '402';

let url;
url = protocol + '://' + ip + ':' + port + '/' + resource + '/' + id;
url = `${protocol}://${ip}:${port}/${resource}/${id}`

Class

class
getter, setter

Promise

bluebird
q
Promise

const async1 = r => {
  return new Promise(rev => {
    setTimeout(() => {
      rev(r)
    }, 1000);
  });
};
const async2 = r  => Promise.resolve(r + 1);
const async3 = r  => Promise.resolve(r + 2);

Promise.resolve(1)
  .then(async1)
  .then(async2)
  .then(async3)
  .then(console.log); // 4

Promise.all([
  async1(1),
  async2(1),
  async3(1),
]).then(console.log); // [1, 2, 3]

Directives ...

ngRepeat
ngClick
Data binding (1way, 2way)
Function Components

ngRepeat

컬렉션으로부터 템플릿을 생성하는 내장 디렉티브
<div ng-repeat="model in collection | orderBy: 'id' |
filter: x | limitTo: limit
as results"> {{model.name}} </div>

ngClick

엘리멘트가 클릭되었을때 특정 행동을 정의하는 디렉티브
<div ng-click="expression">...</div>

ngModel

Data binding
- 1 way: ngBind, {{ }}
- 2 way: ngModel

Function Components

git checkout directives

Make Directives!

directive()
<todo-item>
<todo-form>
<todo-filters>
<todo-list>

directive()

directive('todoItem', ()=> {
return {
restrict: 'EA',
scope: { ... },
template: `<div></div>`,
compile: (tElement, tAttrs) => { ... }
link: (scope, iElement, iAttrs) => { ... },
}; });
git checkout todoItem
git checkout todoForm
git checkout todoFilters

Make Filters!

filter()
dateKo
timeKo

filter()

filter('capitalize', () => {
return v => {
if (!v) return '';

return v.charAt(0).toUpperCase() + v.slice(1);
};
});
$filter
git checkout filters

Day 2

Form

style
validate
custom validator
- todo-text-validator

Validation

폼 객체의 $error
todo-form directive 개선하기
- button
- warning messages
git checkout ngForm

Style

ngForm
ng-minlength, ng-maxlength
ng-pristine, ng-dirty, ng-valid, ng-invalid ...
클래스 오버라이딩

Custom Validator

검증자도 일종의 directive
require: 'ngModel'
modelCtrl
git checkout todoTextValidator

directive('todoTextValidator', () => {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: (scope, elem, attrs, modelCtrl) => {
      modelCtrl.$validators.todoText = (modelValue, viewValue) => {
        if (viewValue) return /^(:\w+\s)/.test(viewValue);
      }
    }
  };
});

SPA

hashbang, html5 mode
ngRoute
lite-server

ngRoute

ngRoute
- ngView
- $routeProvidor
- $routeParams
- $localtion.html5Mode()
git checkout ngRoute

Single Page App.

브라우져는 하나의 html을 요청
라우팅을 자바스크립트로 처리 (페이지 리프레시 불필요)
hashbang
- https://twitter.com/#!/JeonghwanKim4
- fragment identifier
html5 history api
- window.pushState()
단점: 자바스크립트 깨지면? 크롤러는?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

    <ul>
      <li><a href="africa">Africa</a></li>
      <li><a href="asia">Asia</a></li>
      <li><a href="europe">Europe</a></li>
      <li><a href="north-america">North America</a></li>
      <li><a href="oceania">Oceania</a></li>
      <li><a href="south-america">South America</a></li>
    </ul>

    <div id="content"></div>

    <script type="text/javascript" src="app.js"></script>
  </body>
</html>

const load = country => {
  document.getElementById('content').innerHTML = `${country} is loaded`
  document.title = country;
};

window.addEventListener('click', e => {
  e.preventDefault();
  const country = e.target.text;
  history.pushState({country: country}, `title: ${country}`, country);
  load(country);
});

window.addEventListener('popstate', evt => {
  var state = evt.state;
  if (state !== null) load(state.country)
});

lite-server

cors (in chrome)
broken links (in safari, firefox)
all request → index.html
git ckeckout lite-server

Service

어플리케이션의 공유 로직, 싱글톤, DI
provider(), factory(), serivce()
todoStorage
localStorage

서비스 만드는 방법

provider()
factory()
service()
constant()
value()
decorator()
앵귤러 내부 코드

factory('myService', function() {
  var intstant = {
    users: ['Alice', 'Bek', 'Chris']
  };
  return intstant;
});


factory('myService', function() {
  this.users = ['Alice', 'Bek', 'Chris'];
});

todoStorage

컨트롤러에서 모델을 서비스로 분리
git checkout todoStorage

localStorage

localStoreage
브라우져의 key/value 저장소
localStorage.setItem()
localSotrage.getItem()
모두 문자열로 처리함
todoStorage와 localStorage 연동
update?
git checkout localStorage

Asynchronouse

Callback style
Promise
$q
$http

Callback

Callback style
Callback hell
주도권이 없다

Promise

비동기의 주도권을 획득
thanble
bluebird, q, Promise (es6)

$q

$q
$q.defer

Day 3

Backend

generator-weplajs
GET /todos
POST /todos
PUT /todos
DELETE /todos

Ajax

$http
todoService 개선

$http

https://docs.angularjs.org/api/ng/service/$http
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
}, function errorCallback(response) {
});
$http.get
$http.post
$http.put
$http.delete

$httpProvider.interceptors

$provide.factory('myHttpInterceptor', function() {
return {
'request': function(config) {return config;},
'requestError': function(rejection) {
return $q.reject(rejection);
},
'response': function(response) {return response;},
'responseError': function(rejection) {
return $q.reject(rejection);
}
};});

$httpProvider.interceptors.push('myHttpInterceptor');

todoService 개선

angular.module('todomvc')
.factory('todoStorage', ($http) => {
  const storage = {
    data: [],

    get() {
      $http.get('http://localhost:3002/v1/todos')
          .then(result => angular.copy(result.data, this.data))
          .catch(err => console.error(err));
      return this.data;
    },

    create(title) {
      $http.post('http://localhost:3002/v1/todos', {title: title, done: false})
          .then(result => this.data.push(result.data))
          .catch(err => console.error(err));
    },

    destory(todo) {
      $http.delete(`http://localhost:3002/v1/todos/${todo.id}`)
          .then(result => angular.copy(this.data.filter(t => t.id !== todo.id), this.data))
          .catch(err => console.error(err));
    },

    update(todo) {
      const reqBody = {title: todo.title, done: todo.done};
      $http.put(`http://localhost:3002/v1/todos/${todo.id}`, reqBody)
          .then(result => undefined)
          .catch(err => console.error(err));
    }
  };

  return storage;
});

Authentication

https://docs.google.com/presentation/d/1C9hbGHLuCfKSFcneCnKNDbaZCXTqZmlImQ62vF1aE_Q/edit?usp=sharing
APIs
- POST /auth
- DELETE /auth
- POST /users

Login

template
controller
angular-cookies
authInterceptor
redirection

Logout

template
MenuCtrl
auth.service

Register

template
RegisterCtrl
user.service

Angular2

[엔컴] AngularJS를 이용한 Todo app 만들기

By 김정환

[엔컴] AngularJS를 이용한 Todo app 만들기

엔컴 사내 강의용 발표자료입니다

1,806

AngularJS를 이용한

Todo app 만들기

Day 1

Conceptual Overview

Dev Environment

Hello world

ECMAScript 6

Block Scope

Arrow Function

Template String

Class

Promise

Directives ...

ngRepeat

ngClick

ngModel

Function Components

git checkout directives

Make Directives!

directive()

Make Filters!

filter()

Day 2

Form

Validation

Style

Custom Validator

SPA

ngRoute

Single Page App.

lite-server

Service

서비스 만드는 방법

todoStorage

localStorage

Asynchronouse

Callback

Promise

$q

Day 3

Backend

Ajax

$http

$httpProvider.interceptors

todoService 개선

Authentication

Login

Logout

Register

Angular2

[엔컴] AngularJS를 이용한 Todo app 만들기

More from 김정환