AngularJs

 

안녕하세요 ki입니다. 오늘의 Exp는 Angularjs입니다.

첫 프로젝트 당시 접하게 되어 당황했던 기억이 새록새록 납니다.

새롭게 배우게 된 기술과 지식이 많아 배운 점이 많은 프로젝트여서 몸으로 경험한 기억들과

참고했던 글들을 정리하려고 합니다.

제일 먼저 정리할 내용은 Angularjs입니다. 프로젝트는 3년 정도가 지났고 서비스 지원 종료 됐지만

다른 SPA를 위해 간단히 정리해 보겠습니다.

 

 

 

목차

• Angularjs란?
• Angularjs를 클라우드에 사용하는 이유?
• Angularjs와 Angular

 

 

Angularjs란?

2009년 구글에서 만든 자바스크립트 기반 오픈소스 프론트엔드 웹 어플리케이션 프레임워크입니다.

당시에 SPA 3 대장( React, Veu.Js , AnguralJs) 중에 하나였습니다.

특징 중 아래 3가지가 있습니다.

 

• MVC (Model - View - Controller) 구조
• 양방향 데이터 바인딩
• 디렉티브(Directive)

 

MVC (Model - View - Controller) 구조

MVC (Model - View - Controller) 구조

Model

도메인에 해당하는 정보를 나타내는 오브젝트 애플리케이션의 데이터와 행위를 포함

VIew

모델의 정보를 UI에서 보여주는 역할 하나의 모델을 다양한 뷰에서 사용할 수도 있고 여러 모델을 하나의 뷰에서 사용 가능

Controller

애플리케이션에서 사용자의 입력을 받아 Model에 변경된 상태를 반영 Controller는 직접 뷰를 변경하는 것이 아니라 로직을 통해 Model을 변경하고 결과가 View로 보이는 것

 

 

 

양방향 데이터 바인딩

AngularJS에 양방향 데이터 바인딩에는 $scope라는 중요한 개념이 존재

데이터는 $scope에 저장하고 {{}}라는 표현식으로 View와 이어준다.

 

 

 

디렉티브(Directive)

 

HTML Compiler에 의해 해석된 DOM Element

<my-example></my-example>

위에 태그로 표시 가능

 

 

 

 

 

 

Angularjs를 클라우드에 사용하는 이유?

 

클라우드 환경 구성시 선호하는 stack이 있었는데 그중 하나가 Angularjs였습니다.

• 웹 어플리케이션 개발 용이성
• 모듈화 및 유지보수성
• 양방향 데이터 바인딩
• 서버와의 통합 용이성

 

 

Angularjs와 Angular

Angularjs에 2.0 버전인 Angular를 2016년에 발표했습니다.

Angular는 자바스크립트 기반의 Angularjs와 달리 타입스크립트 기반으로 Angularjs에 진화버전으로 볼 수 있습니다.

 

	Angularjs	Angular
기반	javaScript	TypeScript
컴포넌트	scope/controller	Componet계층구조
구조	mvc구조	두 종류의 directive를 사용
모바일 지원	No	Yes

 

 

 

AngularJs를 사용했던 개발

 

저는 AngularJs를 이용해 로그인 검증에 이용할 스크립트를 작성했습니다. 

유효성 검증을 directive를 이용하면 쉽게 가능했고 directive로 어려운 검증들은 javascript와 정규식을 이용했습니다.

<input type="text" id="문자열" name="문자열" ng-model="문자열" ng-required="true" ng-minlength="최소숫자"
ng-maxlength="최대숫자" ng-pattern="문자열" ng-change="문자열" />

 

 

 

 

참고자료

 

SCB개발자이야기 https://devscb.tistory.com/61

Angular vs AngularJS: Angular와 AngularJS의 차이

 

ithub https://ithub.tistory.com/68

AngularJS 개념 및 기초잡기

 

islove8587님의 블로그 https://m.blog.naver.com/islove8587/220698353529

AngularJs Form Validate 사용하여 회원 가입 유효성 체크

 

outsider's Dev Story https://blog.outsider.ne.kr/1135

Angular.js 서비스에서 컨트롤러에 이벤트 발생시키기 :: Outsider's Dev Story

 

edykim https://edykim.com/ko/post/digging-into-angulars-controller-as-syntax/

Angular의 Controller As 문법 살펴보기

 

angularjs 공식문서 https://docs.angularjs.org/api/ng/function/angular.forEach

AngularJS

 

webisfree.com https://webisfree.com/2017-09-27/angularjs%EC%97%90%EC%84%9C-foreach%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%98%EB%B3%B5%EB%AC%B8-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0

AngularJS에서 forEach를 사용하는 반복문 알아보기

 

넥스트리소프트 https://www.nextree.co.kr/untitled-28p8890/

AngularJS: Scope와 데이터 바인딩[ $apply, $watch ]

 

Palpit's Techlog https://palpit.tistory.com/entry/AngularJS-5-MVC-%EB%AA%A8%EB%8D%B8-%EB%B7%B0-%EC%BB%A8%ED%8A%B8%EB%A1%A4%EB%9F%AC-AngularJS-%EA%B0%95%EC%A2%8C

[AngularJS] 5. MVC - 모델, 뷰, 컨트롤러 - AngularJS 강좌

 

acaroom https://acaroom.net/ko/blog/youngdeok/angularjs%EC%9D%98-%EC%9D%B4%ED%95%B4

Angular.js의 이해