다시보는 angular js

25
다시보는 AngularJS http://webframeworks. kr/

Upload: jeado-ko

Post on 12-Jul-2015

631 views

Category:

Technology


2 download

TRANSCRIPT

Page 1: 다시보는 Angular js

다시보는

AngularJS

http://webframeworks.kr/

Page 3: 다시보는 Angular js
Page 4: 다시보는 Angular js

https://plus.google.com/communities/109067040035659120428

Page 5: 다시보는 Angular js

AngularJS ?

Page 6: 다시보는 Angular js

Google이 만든 웹 어플리케이션을 위한 Structural Framework

● 양방향 데이터 바인딩● MVC 구조와 $scope(ViewModel aka VM)● 템플릿● 지시자Directive를 통한 컴포넌트 재사용● 의존성 주입Dependency Injection - Service, Factory, Provider● 단위unit 테스트와 종단간E2E 테스트● 단일페이지 웹 어플리케이션SPA를 위한 지원

- ngRoute, $http 서비스, $resource 서비스● ….

CRUD Apps 필수 기능 제공을 통한

(단일 페이지) 웹 어플리케이션 개발의 단순화

Page 7: 다시보는 Angular js

목차Structure of AngularJS ApplicationCode StyleAsync fileuploadMobile

Page 8: 다시보는 Angular js

Structure of AngularJSApplication

Page 9: 다시보는 Angular js

타입기반의 파일 구조- 파일로만 타입 분류 시

- 매우 간단한 TODO와 같은 어플리케이션용

- 기본적으로 구조가 없다고 볼 수 있음

- 폴더 분류 시- 타입별로 소스 찾기 편함- 많은 기능을 가지고 있을 시 불편함

● scripts/○ controllers/

○ LoginController.js○ RegistrationController.js○ ProductDetailController.js○ SearchResultsController.js

○ directives.js○ filters.js○ services/

○ CartService.js○ UserService.js○ ProductService.js

● views/● index.html

폴도로 타입 분류

● scripts/○ app.js○ controllers.js○ directives.js○ filters.js○ services.js

● views○ (route templates)

● index.html

파일로만 타입 분류

Page 10: 다시보는 Angular js

기능기반의 파일 구조- 모듈 중심으로 확장성 용이- 기능 중심으로 소스 찾기 편함

● cart/○ CartModel.js○ CartService.js

● common/○ directives.js○ filters.js

● product/○ search/

■ SearchResultsController.js

■ SearchResultsModel.js○ ProductDetailController.js○ ProductModel.js○ ProductService.js

● user/○ LoginController.js○ RegistrationController.js○ UserModel.js○ UserService.js

● app.js

Page 11: 다시보는 Angular js

/app /components /alert alert.directive.js alert.directive.spec.js alert.template.html /config main.config.js /constants api-url.constant.js /routes /customers /index customers-index.template.html customers-index.route.js customers-index.controller.js customers-index.e2e.js /helpers /currency currency-filter.js currency-filter.spec.js /unit /e2e /services /creditors creditors.js creditors.spec.js bootstrap.js main.jsindex.html

타입+기능 구조- 컴포넌트와 뷰에 대한 분리가 명확- 미래의 AngularJS 2.0 혹은 웹 컴포넌트 방식으로 확장 용이

출처 : https://github.com/gocardless/angularjs-style-guide

Page 12: 다시보는 Angular js

Code Style

Page 13: 다시보는 Angular js

angular .module('app', ['ngRoute']) .controller('SomeController', SomeController) .factory('someFactory', someFactory);

function SomeController() { }

function someFactory() { }

// storage.jsangular .module('app') .factory('storage', storage);

function storage() { }

출처 : https://github.com/johnpapa/angularjs-styleguide

// app.jsangular

.module('app', [ 'ngRoute', 'app.home', 'app.about' ]);

/* avoid */ /* recommended */

// storage.js(function() { 'use strict';

angular .module('app') .factory('storage', storage);

function storage() { }})();

/* avoid */ /* recommended */

하나의 파일엔 하나의 로직을즉각호출 패턴IIFE을 적극 활용

Page 14: 다시보는 Angular js

‘controller as’ Syntax 활용this 키워드를 사용

출처 : http://toddmotto.com/digging-into-angulars-controller-as-syntax/

var myClass = function () {

this.title = 'Class title';

}

var myInstance = new myClass();

app.controller('MainCtrl', function () {

this.title = 'Some title';

});

<div ng-controller="MainCtrl as main">

{{ main.title }}

</div>

MainCtrl 함수는 존재하지 않고 main 인스턴스만 접근할 수 있다.

Page 15: 다시보는 Angular js

출처 : https://github.com/johnpapa/angularjs-styleguide

// <div ng-controller="MainCtrl"></div>

app.controller('MainCtrl', function ($scope) {

$scope.title = 'Some title';

});

/* avoid */

‘controller as’ Syntax 활용 this를 별도 변수로 정의하여 사용

app.controller('MainCtrl', function () {

this.title = 'Some title';

});

/* recommended */

Page 16: 다시보는 Angular js

/* avoid */

function Customer() {

this.name = {};

this.sendMessage = function() { };

}

/* recommended */function Customer() {

/* jshint validthis: true */ var vm = this; vm.name = {}; vm.sendMessage = function() { };}

/* avoid */ /* recommended */

‘controller as’ Syntax 활용this 키워드를 사용

출처 : https://github.com/johnpapa/angularjs-styleguide

/* avoid */

function Customer() {

this.name = {};

this.sendMessage = function() { };

}

/* recommended */function Customer() {

/* jshint validthis: true */ var vm = this; vm.name = {}; vm.sendMessage = function() { };}

/* avoid */ /* recommended */

Page 17: 다시보는 Angular js

<div ng-controller="MainCtrl">

{{ title }}

<div ng-controller="SearchCtrl">

Scope title: {{ title }}

Parent title: {{ $parent.title }}

<div ng-controller="ResultCtrl">

{{ title }}

Parent title: {{ $parent.title }}

Parent parent title: {{ $parent.$parent.title

}}

</div>

</div>

</div>

<div ng-controller="MainCtrl as main">

{{ main.title }}

<div ng-controller="SearchCtrl as search">

Scope title: {{ search.title }}

Parent title: {{ main.title }}

<div ng-controller="ResultCtrl as result">

Scope title: {{ yet.title }}

Parent title: {{ reult.title }}

Parent parent title: {{ search.title }}

</div>

</div>

</div>

Main

Search

Result

‘controller as’ Syntax 활용중첩시 사용의 편리함

Page 18: 다시보는 Angular js

https://github.com/yeoman/generator-angular

Scaffolding Tool 활용

타입기반의 파일 구조 제공

https://github.com/gocardless/es6-angularjs

기능+타입의 파일 구조 제공 + ES6 Ready

Page 19: 다시보는 Angular js

Async FileUpload

Page 20: 다시보는 Angular js
Page 21: 다시보는 Angular js

참고 : http://webframeworks.kr/tutorials/angularjs/angularjs_fileupload/

Page 22: 다시보는 Angular js

Mobile

Page 23: 다시보는 Angular js

http://ionicframework.com/

Page 24: 다시보는 Angular js

Ionic Feature

Performance obsessed AngularJS & Ionic

Native focusedA powerful CLI

Beautifully designed

Page 25: 다시보는 Angular js

<thank-you>

[email protected]