AngularJS의 개발방식에 대하여

 2009년 구글 직원인 Miskio Heavery의 개인 프로젝트에 출발. 초기에 아이
디어에 대한 반응이 좋아서 현재는 구글이 공식 지원하는 프로젝트가 됨
Angular의 역사

 자바스크립트 코드량 감소
– MVC 제공
– 양방향 바인딩 제공
 재사용 가능한 UI 컴포넌트 작성가능
– Directive를 이용한 HTML 태그 확장
1) 예 : <map>, <graph>
 의존관계주입
 JQuery 지원
 구글의 지원
Angular.JS를 사용할 만한 이유

 SPA 형태의 웹 애플리케이션
– Angular에서는 라우팅이라는 것을 이용함
– CRUD에 해당하는 서버 로직을 SPA의 라우터를 받는 Controller로 이관
Angular의 철학

 $scope
– 변수이름 충돌 방지
– 계층적인 메모리 관리
– $rootScope의 자식
 Controller
– Controller는 스코프 객체를 초기화하는 역할을 함
– $scope <객체>를 이용하여 모델 값을 지정하거나, 함수를 추가할 수 있음
 Model
– $scope의 개체의 프로퍼티와 함수는 모델로 볼 수 있음
Angular의 중요개념

Angular의 TODO 표시예
<html ng-app>
<head>
<meta charset="utf-8">
<title>Hello World, AngularJS</title>
<script>
function TodoCtrl($scope) {
$scope.todos = [
{text:'learn angular', done:true},
{text:'Hello!', done:false},
{text:'build an angular app', done:false}];
$scope.remaining = function() {
var count = 0;
angular.forEach($scope.todos, function(todo) {
count += todo.done ? 0 : 1;
});
return count;
};
}
</script>
<body>
<h2>Todo</h2>
<div ng-controller="TodoCtrl">
<span>남은선택개수 ({{remaining()}}/{{todos.length}})</span>
</div>
</body>
</html>

 Angular는 Directive의 Dom 조작을 제외하고 선언형 프로그래밍을 권장함.
– 선언형 프로그래밍의 예 : 탬플릿
 선언형 프로그래밍과 명령형 프로그래밍의 차이
– 명령형 - ‘어떤 방법’으로 할 것인지에 대한 중점
1) JAVA, C++
– 선언형 - ‘무엇’을 할지에 대한에 대한 관심.
1) 가장 이상적인 선언형 언어의 예 : HTML (순서도 없으며, 방법도 없다)
Angular의 개발방식

Front-End의 View(Dom) 개발
Wireframe
App
Template (partial page)
Controller 관점

Angular로 구성하는 Front-End 중심의 아키텍쳐
WEB
(Angular의 SPA)
정적
웹 서버
RESTful
경량서버
HTTP
HTTP, JSON
Application
Server
NOSQL
DB
…
클라이언트의 역할
Logic ( View 생성관련)
서버의 역할
인증과 권한부여, 유효성검증, 데이터 저장과 동기화

 클로저
– 외부함수(포함하고 있는)의 변수에 접근할 수 있는 내부 함수를 일컫는 말.
– Non 블로킹 아키텍쳐의 핵심개념으로 사용됨
Angular를 위한 핵심적인 Javascript 문법
$(function() {
var selections = [];
$(".niners").click(function() { // 이 클로저는 selections 변수에 접근합니다.
selections.push(…); // 외부 함수의 selections 변수 갱신
});
});
var sequencer = function() {
var s = 0;
return function() { return ++s; }
};
Var seq=sequencer();
seq(); //1
Jquery
에서의
클로저

 변수선언
– var a=10,b=20, …과 같은 체이닝 형식의 초기화 가능, 초기값이 없다면 undefined가 됨.
 블록유효 범위가 없다.
{
var count = 10;
}
console.log(count); // 10, 블록이 닫히더라도 접근가능

 함수에 대한 반환을 가지는 객체생성을 통한 내부함수 호출
function car(color){
console.log('1:'+color);
function sonata(){ //직관적이지 않다.
console.log('2:'+'sonata');
}
return sonata;
}
var mycar=new car('red');
mycar();//내부함수 sonata를 호출한다

 익명함수에 대한 반환을 가지는 객체생성
– 객체안에서 익명함수를 반환할 수 있다.
var mycar=new car('red');
mycar();//내부함수 sonata를 호출한다
//alert(mycar);//함수 자체를 출력한다.
function bus(){
return function(){
console.log('3:'+'bus');
};
}
var imbus=bus();
imbus();

 모듈패턴
– Private을 구현
var animal = (function() {
var privateCounter = 0;
function sound(val) {
console.log('4:'+val);
}
return {
cat: function() {
sound('5:'+'cat');
return 'return cat';
}
}
})();
console.log('6:'+animal.cat());

 생성자 함수를 통한 new 생성
– 성능 및 메모리 낭비를 방지하는 객체생성 방법 (Literal 형태)
function MyObject(name, message) {
this.name = name.toString();
this.message = message.toString();
this.getName = function() {
return this.name;
};
this.getMessage = function() {
return this.message;
};
}
function MyObject(name, message) {
}
MyObject.prototype = {
getName: function() {
return this.name;
},
getMessage: function() {
}
};

 Prototype 방식의 객체 생성
function MyObject2(name, message) {
}
MyObject2.prototype.getName = function() {
return this.name;
};
MyObject2.prototype.getMessage = function() {
};
var m=new MyObject('MyObject','message');
console.log('61:'+m.getName());
var m2=new MyObject2('MyObject2','message');
console.log('62:'+m2.getName());

AngularJS의 개발방식에 대하여

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (18)

Semelhante a AngularJS의 개발방식에 대하여

Semelhante a AngularJS의 개발방식에 대하여 (20)

AngularJS의 개발방식에 대하여