각도 JS

AngularJS
각도 JS
AngularJS logo.svg
개발자구글
초기 릴리즈2010년 10월 20일, 11년 전(2010-10-20)[1]
안정된 릴리스
1.8.2[2] / 2020년 10월 21일; 21개월 전 (2020년 10월 21일)
저장소AngularJS 저장소
기입처자바스크립트
플랫폼JavaScript 엔진
크기167 kB 생산
1.2 MB의 개발
유형웹 프레임워크
면허증.MIT 라이선스
웹 사이트angularjs.org Edit this on Wikidata

AngularJS는 단일 페이지 애플리케이션을 개발하기 위한 JavaScript 기반오픈 소스 프런트 엔드프레임워크였습니다.그것은 주로 구글과 개인과 기업의 커뮤니티에 의해 유지되었다.어플리케이션 프로그레시브 웹 어플리케이션에서 일반적으로 사용되는 컴포넌트와 함께 클라이언트 측 모델 뷰 컨트롤러(MVC) 및 모델 뷰 뷰 모델(MVVM) 아키텍처의 프레임워크를 제공함으로써 이러한 어플리케이션의 개발과 테스트를 모두 단순화하는 것을 목표로 하고 있습니다.

AngularJS는 MongoDB 데이터베이스, Express.js 웹 애플리케이션 서버 프레임워크, Angular로 구성된 MEAN 스택의 프런트 엔드로 사용되었습니다.JS 자체(또는 Angular) 및 Node.js 서버 런타임 환경.

2022년 1월 1일부로 Google은 Angular를 더 이상 업데이트하지 않습니다.보안, 브라우저 호환성 또는 jQuery [3][4][5]문제를 수정하는 JS.Angular 팀은 최적의 경로로 Angular(v2+)업그레이드할 것을 권장하지만 다른 [6]옵션도 몇 가지 제공했습니다.

개요

앵귤러JS 프레임워크는 Hypertext Markup Language(HTML) 페이지를 처음 읽음으로써 작동했습니다.HTML 페이지에는 추가 커스텀 HTML 속성이 포함되어 있습니다.Angular는 이러한 속성을 페이지의 입력 또는 출력 부분을 표준 JavaScript 변수로 표현되는 모델에 바인딩하기 위한 지시로 해석했습니다.이러한 JavaScript 변수의 값은 코드 내에서 수동으로 설정하거나 정적 또는 동적 JSON 리소스에서 가져올 수 있습니다.

AngularJS는 선언형 프로그래밍을 사용하여 사용자 인터페이스를 만들고 소프트웨어 구성요소를 연결해야 한다는 신념에 따라 구축되었으며, 필수 프로그래밍은 애플리케이션의 비즈니스 [7]로직을 정의하는 데 더 적합합니다.이 프레임워크는 모델 및 뷰의 자동 동기화를 가능하게 하는 양방향 데이터 바인딩을 통해 동적 콘텐츠를 표시하도록 기존 HTML을 수정 및 확장했습니다.그 결과, Angular는JS는 테스트 가능성과 성능을 개선하기 위해 명시적 문서 객체 모델(DOM) 조작을 강조하지 않았습니다.

AngularJS의 설계 목표는 다음과 같습니다.

  • 응용 프로그램 로직에서 DOM 조작을 분리합니다.이것의 어려움은 코드 구성 방식에 의해 크게 영향을 받습니다.
  • 응용 프로그램의 클라이언트 측과 서버 측을 분리합니다.이를 통해 개발 작업을 병행하여 진행할 수 있으며 양쪽을 재사용할 수 있습니다.
  • UI 설계부터 비즈니스 로직 작성, 테스트에 이르기까지 애플리케이션 구축 과정을 위한 구조를 제공합니다.

AngularJS는 프레젠테이션, 데이터 및 논리 컴포넌트를 분리하기 [8]위해 MVC 패턴을 구현했습니다.의존관계 주입을 사용하여 Angular는 뷰 의존형 컨트롤러와 같은 기존 서버측 서비스를 클라이언트측 웹 애플리케이션에 도입했습니다.그 결과, 서버의 부하를 큰폭으로 경감할 수 있습니다.

범위

AngularJS는 컴퓨터 과학의 기초와 유사한 방식으로 "scope"라는 용어를 사용했습니다.

컴퓨터 사이언스의 스코프란 프로그램에서 특정 바인딩이 유효한 경우를 말합니다.ECMA-262 사양에서는 스코프를 다음과 같이 정의하고 있습니다.클라이언트측 Web [9]스크립트에서 함수 오브젝트가 실행되는 사전 환경입니다.이것은 스코프[10]람다 미적분으로 정의되는 방식과 비슷합니다.

"MVC" 아키텍처의 일부로서 스코프는 "모델"을 형성하며 스코프에 정의된 모든 변수는 "보기" 및 "컨트롤러"에서 액세스할 수 있습니다.스코프는 접착제 역할을 하며 "보기"와 "컨트롤러"를 바인딩합니다.

부트스트랩

Angular가 수행하는 작업JS 부트스트래퍼는 DOM이 로드된 후 다음 3단계로[11] 진행되었습니다.

  1. 새 인젝터 생성
  2. DOM을 장식하는 디렉티브 편집
  3. 모든 지시사항을 범위로 연결

AngularJS 디렉티브를 사용하면 개발자는 데이터 바인딩과 프레젠테이션 컴포넌트의 동작을 정의하는 커스텀 및 재사용 가능한HTML 유사 요소와 속성을 지정할 수 있습니다.가장 일반적으로 사용되는 지침의 일부는 다음과 같습니다.

ng-animate
모듈은 JavaScript, CSS3 트랜지션 및 CSS3 키프레임 애니메이션 후크를 기존 코어 및 커스텀 디렉티브 내에서 지원합니다.

HTML 사양에서는 Atribute를 사용할 수 없기 때문에는 프리픽스로도 사용할 수 있습니다.예를 들어, 와 는 모두 Angular에서 유효합니다.JS.

ng-app
Angular의 루트 요소를 선언합니다.JS 응용 프로그램. 이 응용 프로그램에서는 바인딩을 선언하고 동작을 정의하는 데 지시어를 사용할 수 있습니다.
ng-aria
일반적인 ARIA Atribute의 접근성 지원을 위한 모듈.
ng-bind
DOM 요소의 텍스트를 식 값으로 설정합니다.예를들면,<span ng-bind="name"></span>는 span 요소 내의 "name" 값을 표시합니다.응용 프로그램 범위에서 변수 '이름'이 변경되면 DOM에 즉시 반영됩니다.
ng-class
부울식 값에 따라 클래스를 조건부로 적용합니다.
ng-controller
HTML 식을 평가하는 JavaScript 컨트롤러 클래스를 지정합니다.
ng-if
조건이 참일 경우 다음 요소를 인스턴스화하는 기본 if 문 지시문.조건이 false일 경우 요소는 DOM에서 삭제됩니다.참일 경우 컴파일된 요소의 클론이 다시 삽입됩니다.
ng-init
요소가 초기화되었을 때 한 번 호출됩니다.
ng-model
와 유사하다ng-bind단, 뷰와 스코프 사이에 양방향 데이터 바인딩을 확립합니다.
ng-model-options
모델 업데이트 방법에 대한 튜닝을 제공합니다.
ng-repeat
컬렉션에서 항목당 한 번씩 요소를 인스턴스화합니다.
ng-show&ng-hide
부울식 값에 따라 요소를 조건부로 표시하거나 숨깁니다.표시 및 숨기기는 CSS 표시 스타일을 설정함으로써 이루어집니다.
ng-switch
선택 식 값에 따라 선택 항목 집합에서 템플릿 하나를 조건부로 인스턴스화합니다.
ng-view
지정된 컨트롤러에 의해 구동되는 템플릿을 렌더링하기 전에 JSON을 해결하는 루트를 처리하는[12] 기본 디렉티브.

양방향 데이터 바인딩

AngularJS 양방향 데이터 바인딩은 가장 주목할 만한 기능을 가지고 있으며, 이는 서버 백엔드의 템플릿 작업 부담을 크게 덜어줍니다.대신 템플릿은 모델에 정의된 범위에 포함된 데이터에 따라 일반 HTML로 렌더링되었습니다.$scopeAngular의 service가 컨트롤러를 통해 뷰에서 모델 섹션의 변경을 감지하고 HTML 식을 수정했습니다.마찬가지로 뷰에 대한 변경사항이 모델에 반영되었습니다.이로 인해 DOM을 적극적으로 조작할 필요가 없어졌고 웹 애플리케이션의 [13]부트스트래핑과 신속한 프로토타이핑을 장려했습니다.각진모델 값이 [14]변경되었을 때 청취자를 트리거한 Ember.js 및 Backbone.js와는 달리 JS는 현재 값을 더티 체크 프로세스에서 이전에 저장된 값과 비교하여 모델의 변화를 감지했습니다.

$watch
더티 체크에 사용되는 각도법입니다.$scope에 할당된 변수 또는 표현식은 자동으로 다음과 같이 설정됩니다.$watchExpression(각진 표현).따라서 변수를 $scope에 할당하거나 ng-if, ng-show, ng-repeat 등의 지시어를 사용하면 자동으로 각도 범위 내의 시계가 생성됩니다.Angular는 $scope 객체에 $watchers의 단순한 배열을 유지합니다.
Angular에서 관찰자를 정의하는 다양한 방법JS.
  • $watch 속성을 $watch로 명시적으로 $watch합니다.
    $scope.$watch('person.username', validateUnique);
  • 템플릿에 보간 기능을 추가합니다(현재 $120에 워처가 작성됩니다).
  • ng-model 등의 디렉티브에 워처를 정의합니다.
    <input ng-model="person.username" />
$digest
angularjs에 의해 내부적으로 빈번한 간격으로 호출되는 각도 메서드입니다.$digest 메서드에서 angular는 스코프/자녀 스코프의 모든 $watch에 대해 반복됩니다.
$apply
는 내부적으로 $120을 호출하는 각도 메서드입니다.이 메서드는 각도가 수동으로 더티 체크를 시작하도록 지시할 때 사용됩니다(모든 $watch 실행).
$destroy
는 angularjs 단위의 메서드이자 이벤트입니다.$syslog() 메서드는 스코프와 스코프의 모든 자식을 더티 체크에서 삭제합니다.$controller 또는 $controller가 파괴될 때마다 $controller 이벤트가 angular에 의해 호출됩니다.

개발 이력

AngularJS는 2009년 Brat Tech[16] LLC의 Mishko[15] Hevery에 의해 메가바이트 단위로 가격이 책정된 온라인 JSON 스토리지 서비스의 배후 소프트웨어로 개발되었으며, 엔터프라이즈용 애플리케이션을 쉽게 만들 수 있습니다.이 벤처는 웹 도메인 "GetAngular.com"[16]에 위치해 있었고, 두 회사가 사업 아이디어를 포기하고 Angular를 오픈 소스 라이브러리로 출시하기로 결정하기 전에 소수의 구독자를 가지고 있었다.

1.6 릴리즈에서는 컴포넌트 기반 애플리케이션 [17]아키텍처의 개념을 포함하여 AngularJs의 많은 개념을 추가했습니다.[18]릴리스는 샌드박스를 우회하는 수많은 취약성이 발견되었음에도 불구하고 많은 개발자들이 추가적인 보안을 제공한다고 믿었던 샌드박스를 제거했습니다.현재(2020년 3월 기준) Angular의 안정적인 릴리스JS는 1.7.9입니다[19].

2018년 1월, Angular의 단계적 폐지 일정이 발표되었습니다.JS: 1.7.0 출시 후 Angular에서 진행 중인 개발JS는 2018년 6월 30일까지 계속됩니다.이후 2021년 12월 31일까지 장기 지원으로 [4][5]1.7이 지원되었다.

레거시 브라우저 지원

Angular 버전 1.3 이후JS는 Internet Explorer 8 이전 버전을 지원하지 않았습니다.AngularJS 1.2는 IE8을 지원하지만 팀은 지원하지 않습니다.[20][21]

Angular 및 AngularDart

Angular의 후속 버전JS는 단순히 [22]Angular라고 불립니다.Angular는 TypeScript 기반의 AngularJs와 호환되지 않습니다.Angular 4는 이미 v3.3.0으로 배포된 라우터 패키지의 버전이 [23]잘못 정렬되어 혼란을 피하기 위해 3을 건너뛰고 2016년 12월 13일에 발표되었습니다.

AngularDart는 C 스타일 구문사용하는 객체 지향 클래스 정의 단일 상속 프로그래밍 언어인 Dart에서 작동하며, Angular JS(JavaScript 사용) 및 Angular 2/ Angular 4(TypeScript 사용)와는 다릅니다.Angular 4는 2017년 3월에 출시되었으며 프레임워크 버전은 사용 중인 라우터의 버전 번호와 일치합니다.Angular 5는 2017년 [24]11월 1일에 발매되었습니다.Angular 5의 주요 개선 사항으로는 진보적인 웹 앱, 빌드 최적화 도구 및 재료 설계와 관련된 [25]개선 사항이 있습니다.앵귤러 6는 2018년 [26]5월 3일에, 앵귤러 7은 2018년 10월 18일에, 앵귤러 8은 2019년 5월 28일에 출시되었습니다.Angular는 Semantic Versioning 표준을 준수하며 각 메이저버전 번호는 잠재적인 변경을 나타냅니다.Angular는 각 메이저 버전에 대해 6개월의 적극적인 지원과 12개월의 장기 지원을 약속했습니다.메이저 릴리즈는 1~3개의 마이너릴리즈가 모든 [27]메이저릴리즈에 대해 1년에 한 번꼴로 실시합니다.

앵귤러 유니버설

일반적인 Angular 어플리케이션은 브라우저에서 실행되며 Angular Universal은 Server-Side Rendering(SSR;[28] 서버측 렌더링)을 통해 정적 어플리케이션페이지를 생성합니다.

릴리스

버전 발매일 신기능
각도 JS 1.X 2010-10-01
각도 2 2016-09-01 모바일 지향
각도 3 Angular 3을 건너뛰었습니다.
각도 4 2017-03-01 고속 컴파일, 뛰어난 버그[29] 수정
각도 5 2017-11-01 빌드 옵티마이저, 컴파일러 개선[30]
각도 6 2018-05-01 CDK, CLI 워크스페이스, RxJs v6[31]
각도 7 2018-10-01 가상 스크롤, 드래그 앤 드롭[32]
각도 8 2019-05-01 CLI 빌더 API, 웹 워커[33] 지원
각도 9 2020-02-01 Ivy 컴파일러, TypeScript 3.7 지원[34]
각도 10 2020-06-01 TypeScript 3.9, TSLib v2.0, TSLint v6[35]
각도 11 2020-11-01 자동 글꼴 인라이닝, 재구성된 HMR, Webpack[36] 5
각도 12 2021-05-01 테일윈드 CSS, Nullish Coalescing, IE[37] 11 지원 폐지
각도 13 2021-11-01 검증자를 동적으로 활성화/비활성화하여 동적 컴포넌트를 쉽게 작성

라이브러리

AngularJS 재료

AngularJS[38][39] Material은 AngularJS에서 [40]Material Design을 구현UI 컴포넌트 라이브러리입니다.라이브러리는 잘 테스트되고 액세스할 수 있는 재사용 가능한 UI 구성 요소 세트를 제공했습니다.2022년 1월,[41] 도서관은 공식 웹사이트에 공지된 바와 같이 문을 닫았다.

크롬 확장

2012년 7월, Angular 팀은 Google Chrome 브라우저의 확장 버전인 [42]Batarang을 구축하여 Angular로 구축된 웹 애플리케이션의 디버깅 경험을 향상시켰습니다.이 확장은 성능 병목 현상을 쉽게 검출할 수 있도록 하는 것을 목적으로 했으며 애플리케이션 [43]디버깅을 위한 GUI를 제공했습니다.2014년 후반과 2015년 초 동안 확장 버전은 최근 Angular [44]릴리스(v1.2.x 이후)와 호환되지 않았습니다.이 확장에 대한 마지막 업데이트는 2017년 4월 4일입니다.

성능

AngularJS는 다이제스트 사이클의 패러다임을 제시합니다.이 사이클은 루프로 간주될 수 있으며, 이 기간 동안 Angular는JS는 모든 변수가 감시하는 모든 변수에 변화가 있는지 확인했습니다.$scopes.한다면$scope.myVar는 컨트롤러에 정의되어 있으며 이 변수는 감시용으로 마크되어 있으며 Angular는 각 루프 반복에서 myVar의 변경을 감시합니다.

이 접근방식은 잠재적으로 렌더링의 지연으로 이어질 수 있습니다.JS가 너무 많은 변수를 확인했습니다.$scope모든 사이클.Mishko Hebery는 어떤 [14]페이지에든 2000명 미만의 시청자를 유지할 것을 제안했다.

「 」를 참조해 주세요.

레퍼런스

  1. ^ "Releases · angular/angular.js". GitHub. Retrieved April 9, 2021.
  2. ^ "Release 1.8.2". 21 October 2020. Retrieved 6 November 2020.
  3. ^ "AngularJS". docs.angularjs.org. Retrieved 2021-05-14.
  4. ^ a b "AngularJS". docs.angularjs.org. Retrieved April 9, 2021.
  5. ^ a b Darwin, Pete Bacon (27 July 2020). "Stable AngularJS and Long Term Support". Angular Blog. Retrieved April 9, 2021.
  6. ^ Techson, Mark (February 2, 2021). "Finding a Path Forward with AngularJs". Medium. Retrieved April 9, 2021.
  7. ^ "What Is Angular?". Retrieved 12 February 2013.
  8. ^ "AngularJS". docs.angularjs.org. Retrieved April 9, 2021.
  9. ^ "Annotated ECMAScript 5.1, Section 10.2 Lexical Environments". Retrieved 2015-01-03.
  10. ^ Barendregt, Henk; Barendsen, Erik (March 2000), Introduction to Lambda Calculus (PDF)
  11. ^ "Writing Directives". angularjs.org. November 28, 2012. Retrieved 2013-07-21.
  12. ^ "AngularJS". docs.angularjs.org. Retrieved April 9, 2021.
  13. ^ "5 Awesome AngularJS Features". Retrieved 13 February 2013.
  14. ^ a b Hevery, Misko. "Databinding in angularjs". Retrieved 2014-03-09.
  15. ^ "Hello World, <angular/> is here". Retrieved 2014-10-12.
  16. ^ a b "GetAngular". Angular / BRAT Tech. LLC. Archived from the original on 2010-04-13. Retrieved 2014-10-12.
  17. ^ "AngularJS: Developer Guide for v1.5.8: Components". Retrieved 2017-09-26.
  18. ^ "angular.js". GitHub. Retrieved 2017-09-26.
  19. ^ "Release v1.7.9 · angular/angular.js". GitHub. Retrieved April 9, 2021.
  20. ^ "Internet Explorer Compatibility". Angular JS 1.7.7 Developer Guide. Retrieved 12 Feb 2019. AngularJS 1.3 has dropped support for IE8. Read more about it on our blog. AngularJS 1.2 will continue to support IE8, but the core team does not plan to spend time addressing issues specific to IE8 or earlier.
  21. ^ Minar, Igor. "AngularJS 1.3: a new release approaches". AngularJS Blog. Archived from the original on 2014-10-13. Retrieved 2014-10-12.
  22. ^ "Introduction to Angular". Retrieved 2021-12-08.
  23. ^ "Ok... let me explain: it's going to be Angular 4.0". angularjs.blogspot.kr. Archived from the original on 2016-12-13. Retrieved 2016-12-14.
  24. ^ Fluin, Stephen (April 26, 2018). "Version 5.0.0 of Angular Now Available". Medium. Retrieved April 9, 2021.
  25. ^ Krill, Paul (September 18, 2017). "AngularJS 5 JavaScript framework delayed". InfoWorld. Retrieved April 9, 2021.
  26. ^ Fluin, Stephen (3 May 2018). "Version 6 of Angular Now Available – Angular Blog". Angular Blog. Retrieved 8 June 2018.
  27. ^ "Angular versioning and releases". angular.io. Retrieved 8 June 2018.
  28. ^ Pieszak, Mark (January 7, 2020). "Angular Universal & Server-side rendering Deep-Dive". Medium. Retrieved April 9, 2021.
  29. ^ "Angular 4: Top features you need to know". JAXenter. 2017-04-13. Retrieved 2022-02-24.
  30. ^ Fluin, Stephen (2018-04-26). "Version 5.0.0 of Angular Now Available". Medium. Retrieved 2022-02-24.
  31. ^ "Angular 6: Upgrading & Summary of New Features DigitalOcean". www.digitalocean.com. Retrieved 2022-02-24.
  32. ^ Fluin, Stephen (2018-10-18). "Version 7 of Angular — CLI Prompts, Virtual Scroll, Drag and Drop and more". Medium. Retrieved 2022-02-24.
  33. ^ "What's New In Angular 8.0 And How To Upgrade To Angular 8". www.c-sharpcorner.com. Retrieved 2022-02-24.
  34. ^ "What's new in Angular 9 Angular 9 New Features". Edureka. 2020-02-14. Retrieved 2022-02-24.
  35. ^ Krill, Paul (2020-09-08). "What's new in Angular 10.1". InfoWorld. Retrieved 2022-02-24.
  36. ^ Thompson (@marktechson), Mark (2020-12-04). "Version 11 of Angular Now Available". Medium. Retrieved 2022-02-24.
  37. ^ Thompson (@marktechson), Mark (2021-06-16). "Angular v12 is now available". Medium. Retrieved 2022-02-24.
  38. ^ "angular/material (GitHub)". GitHub. Retrieved 2020-12-24.
  39. ^ "AngularJS Material Documentation". Retrieved 2020-12-24.
  40. ^ Kotaru, V. Keerti (2016-08-25). Material Design Implementation with AngularJS: UI Component Framework. Apress. p. 4. ISBN 9781484221907.
  41. ^ "AngularJS Material". material.angularjs.org. Retrieved 2022-05-04.
  42. ^ "angular/angularjs-batarang (GitHub)". GitHub. Retrieved 2014-10-12.
  43. ^ Ford, Brian. "Introducing the AngularJS Batarang". AngularJS Blog. Archived from the original on 2014-10-13. Retrieved 2014-10-12.
  44. ^ "batarang Chrome extension for AngularJS appears broken".

추가 정보

외부 링크