다시보는 Angular js
-
Upload
jeado-ko -
Category
Technology
-
view
626 -
download
2
Transcript of 다시보는 Angular js
다시보는
AngularJS
http://webframeworks.kr/
https://plus.google.com/communities/109067040035659120428
AngularJS ?
Google이 만든 웹 어플리케이션을 위한 Structural Framework
● 양방향 데이터 바인딩● MVC 구조와 $scope(ViewModel aka VM)● 템플릿● 지시자Directive를 통한 컴포넌트 재사용● 의존성 주입Dependency Injection - Service, Factory, Provider● 단위unit 테스트와 종단간E2E 테스트● 단일페이지 웹 어플리케이션SPA를 위한 지원
- ngRoute, $http 서비스, $resource 서비스● ….
CRUD Apps 필수 기능 제공을 통한
(단일 페이지) 웹 어플리케이션 개발의 단순화
목차Structure of AngularJS ApplicationCode StyleAsync fileuploadMobile
Structure of AngularJSApplication
타입기반의 파일 구조- 파일로만 타입 분류 시
- 매우 간단한 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
파일로만 타입 분류
기능기반의 파일 구조- 모듈 중심으로 확장성 용이- 기능 중심으로 소스 찾기 편함
● 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
/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
Code Style
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을 적극 활용
‘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 인스턴스만 접근할 수 있다.
출처 : 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 */
/* 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 */
<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 활용중첩시 사용의 편리함
https://github.com/yeoman/generator-angular
Scaffolding Tool 활용
타입기반의 파일 구조 제공
https://github.com/gocardless/es6-angularjs
기능+타입의 파일 구조 제공 + ES6 Ready
Async FileUpload
참고 : http://webframeworks.kr/tutorials/angularjs/angularjs_fileupload/
Mobile
http://ionicframework.com/
Ionic Feature
Performance obsessed AngularJS & Ionic
Native focusedA powerful CLI
Beautifully designed
<thank-you>