Angular 7.0 – 새로운 아바타의 새로운 기능은 무엇입니까?

게시 됨: 2018-12-29

건물의 힘은 콘크리트 기둥에 있습니다. 웹 애플리케이션을 위한 프레임워크도 마찬가지입니다. 소프트웨어 프레임워크는 응용 프로그램을 설계, 구축 및 배포하는 표준 방법을 제공합니다. Java 플랫폼의 세계에서 Javascript 프레임워크 는 Angular가 중요해지기 전까지 가장 많이 사용되는 유행어였습니다.
이제 Angular의 몇 가지 두드러진 기능을 살펴보겠습니다 .

  • Angular는 현재 'Typescript'라고 불리는 것으로 변형된 오픈 소스 Javascript 프레임워크입니다.
  • (Javascript) JS 코드에 비해 코드 생성 및 개발이 빠릅니다.
  • 명령줄 프롬프트(CLI)에는 애플리케이션을 더 빠르게 빌드할 수 있는 명령이 있습니다.
  • 코드는 구성 요소를 사용하므로 잘 구성되어 생산성이 향상됩니다.
  • 지시문은 HTML에서 변수, if 문 및 루프를 처리하는 동적 함수입니다.
  • Angular는 크로스 플랫폼이므로 브라우저 및 운영 체제와 무관합니다.
  • Angular CLI는 단위 테스트에 유용한 테스트 도구와 함께 제공됩니다.

세계 최고의 대학에서 온라인으로 소프트웨어 엔지니어링 과정 을 배우십시오 . 이그 제 큐 티브 PG 프로그램, 고급 인증 프로그램 또는 석사 프로그램을 획득하여 경력을 빠르게 추적하십시오.

목차

AngularJS – Angular의 선구자

AngularJS는 2009년 Google에서 소개한 Angular 시리즈의 첫 번째 제품입니다. 클라이언트 측 또는 프론트 엔드 프레임워크입니다. 이것이 의미하는 바는 코드가 웹 서버가 아니라 사용자의 브라우저에서 실행된다는 것입니다. AngularJS는 순수하게 자바스크립트로 작성되었습니다. 이것은 응용 프로그램 논리를 분리하기 위해 개발되었지만 현재 아바타 7.0에서 Angular에 대해 상당히 성공적이고 포장된 방법이었습니다.
AngularJS가 다음 모바일 앱 개발에 적합한 선택입니까?

앵귤러 7.0 프레임워크

Angular의 구성 요소를 간략하게 이해해 보겠습니다.

  1. 모듈 : 기본적으로 애플리케이션의 핵심 화면을 논리적으로 분해합니다. 예를 들어 장바구니 페이지가 있는 경우 장바구니 모듈이 필요할 수 있습니다.
  2. Component : UI의 한 부분으로 객체지향 프로그래밍에서와 같이 '클래스'이다. 이것은 사용자 인터페이스(UI)의 기본 빌딩 블록입니다. 구성 요소 클래스에는 페이지의 핵심 논리가 포함되어 있습니다.
     구성 요소는 다음으로 구성됩니다.

    1. 템플릿 : 템플릿은 HTML로 작성되거나 HTML 파일일 수 있습니다. 변수와 같은 동적 속성을 가질 수 있으며 지시문과 함께 'if 조건'을 사용할 수 있습니다.
    2. 클래스 : 응용 프로그램의 코드입니다. 코드는 Typescript로 작성되었습니다. Typescript는 Javascript의 상위 집합입니다. Typescript는 정의된 유형으로 변수를 선언하는 '정적' 유형 언어입니다. 따라서 오류는 런타임에 포착되지 않고 프로그램 컴파일 시 포착됩니다. Angular 클래스는 Javascript로도 작성할 수 있습니다. 구성 요소에는 데이터 속성과 메서드가 있습니다.
    3. Metadata : 클래스가 Angular 구성 요소임을 식별하기 위해 Metadata를 사용합니다. 메타데이터는 데코레이터 선언을 사용하여 Typescript에 첨부할 수 있습니다.
       Angular의 간단한 구성 요소를 살펴보겠습니다.

       ''@angular/core''에서 {구성요소} 가져오기 ; 여기에서 구성 요소 패키지는 Angular 코어 라이브러리에서 가져옵니다.
@component({ (데코레이터 선언)
선택기 : 'myapplication' …(.이것은 컴포넌트를 삽입하는 데 사용하는 사용자 정의 HTML 태그입니다. )
템플릿: '<h1> Hello {(name)}</h1> (이름은 변수)
})
export class AppComponent{ (이것은 컴포넌트 클래스이고 'name'은 클래스의 속성입니다)
이름 = '각도 프레임워크';
}
<본체>
<myapplication>여기에 샘플 앱 구성 요소 로드..</myapplication>
</바디>
    4. 데이터 바인딩 : 구성 요소와 뷰 간의 통신을 허용하는 프로세스입니다. 따라서 데이터는 구성 요소에서 보기로 또는 그 반대로 전달됩니다. 네 가지 유형의 데이터 바인딩이 있습니다. 보간 및 속성 바인딩에서 데이터는 구성 요소에서 뷰로 전송되고 이벤트 바인딩에서는 데이터가 뷰 또는 템플릿에서 구성 요소로 전송됩니다. 양방향 바인딩에서 데이터는 양방향으로 이동합니다.
    5. 서비스 : 재사용 가능한 코드, 즉 여러 구성 요소에서 액세스할 수 있는 코드를 위해 작성된 클래스입니다. 이러한 클래스는 구성 요소 간에 데이터와 기능을 보냅니다. 서비스 클래스는 데이터베이스 또는 js/JSON 파일에서 데이터를 가져올 수도 있습니다. Service 클래스를 사용하면 코드가 조직화되고 단편화되어 보입니다.
    6. 지시문 : HTML의 기능을 확장하기 위해 HTML 속성을 사용자 정의하는 것은 지시문입니다. ngIf, ngFor, ngModel은 지시문입니다. ngModel은 입력, 텍스트 영역 또는 선택과 같은 다른 지시문에 필요한 뷰를 모델에 바인딩하는 역할을 합니다.
       다음은 ngmodel이 작동하는 방식을 보여주는 코드입니다.

       <div ng-app="" ng-init="firstName='존'">
<p>입력란에 이름 입력:</p>
<p>이름: <input type="text" ng-model="firstName"></p>
<p>작성: {{ firstName }}</p>
</div>

      따라서 firstName은 'John'으로 초기화되었으며 텍스트 상자에 새 값을 입력하면 firstName은 입력된 새 이름을 유지합니다.

    7. DI(종속성 주입) : 클래스는 특정 기능을 수행하기 위해 개체가 필요합니다. 클래스에서 매번 객체를 생성하는 대신 클래스는 외부 소스에서 객체(종속성)를 받습니다. DI 프레임워크에서 따라야 할 단계는 다음과 같습니다.
      1. 예를 들어 서비스 클래스를 만듭니다. 직원 데이터
      2. 이 서비스 클래스를 인젝터에 등록하십시오. 인젝터는 모든 종속성 클래스를 보유하는 컨테이너입니다.
      3. Employeedata 클래스를 필요로 하는 클래스의 종속성으로 선언하십시오. 직원 목록 클래스
소프트웨어 개발자는 무엇을 하나요?

Angular의 버전

AngularJS 이후에 AngularJS를 완전히 재작성한 Angular 2가 출시되었습니다. 구성 요소는 Angular 2에서 추가되었습니다. Angular 2는 이전 버전과 호환되지 않았습니다. Angular는 많은 패키지로 구성되어 있으며 Angular 3의 라우터 패키지는 동기화되지 않았습니다. 따라서 Angular 팀은 Angular 2에 대한 이전 버전과의 호환성이 있는 모든 수정 및 기능과 함께 릴리스된 Angular 4로 이동했습니다. 이후 Angular 5, Angular 6이 릴리스되었으며 최신 버전은 현재 Angular 7 입니다.

Angular 7.0의 새로운 기능은 무엇입니까?

  1. CLI 프롬프트 : Angular 명령줄 프롬프트의 변경 사항은 CLI가 사용자에게 일반 명령을 실행하는 동안 기능을 선택하라는 메시지를 표시한다는 것입니다. Angular 라우팅 또는 스타일시트 형식 등의 기능을 사용자가 선택할 수 있습니다. Angular의 이전 버전에서는 프롬프트의 옵션을 기억하고 입력해야 했습니다.
  2. 애플리케이션 성능 :
    1. 일반적인 오류:
       이 버전에서 Angular 팀은 'reflect-metadata' 폴리필이 실제로 개발에서만 필요한 프로덕션에 포함된 것과 같이 개발자가 범하는 몇 가지 일반적인 실수를 분석하고 제거했습니다.
    2. 번들 예산:
       애플리케이션의 성능을 향상시키기 위해 기본 번들 예산은 angular.JSON에 정의되어 있습니다. 이제 애플리케이션 번들 크기가 5MB 제한을 초과하고 초기 번들이 2MB를 초과하면 개발자에게 경고가 표시됩니다. 이 값은 필요에 따라 JSON 파일에서 수정할 수 있습니다.
  3. Angular Material 및 CDK: Angular 구성 요소 개발 키트(CDK)는 Angular Material(라이브러리용 UI)에서 생성되었습니다. CDK에 추가된 두 가지 새로운 기능은
    1. 가상 스크롤:
       화면에 보이는 부분만 로드하기 위해 <cdk-virtual-scroll-viewport> 패키지는 스크롤 이벤트에 반응하는 지시문에 대한 도우미를 제공합니다. 따라서 화면에 들어갈 수 있는 항목만 렌더링됩니다. 사용자가 목록을 스크롤하면 DOM은 디스플레이 크기에 따라 동적으로 요소를 로드 및 언로드합니다.
    2. 드래그 앤 드롭 지원:
       @angular/cdk/drag-drop 모듈은 요소의 자유로운 끌어서 놓기 기능, 목록의 항목 재정렬, 목록의 항목 이동 등을 돕습니다. 이것은 cdkDropList 및 cdkDrag 지시문을 사용하여 수행됩니다.
  4. Angular 7.0은 Typescript 3.1, RxJS 6.3 및 Node 10을 지원하도록 종속성을 업데이트했습니다 .
  5. 선택의 향상된 접근성: 기본 '선택'은 성능, 접근성 및 사용성 이점이 있으므로 'mat-form-field' 내부의 기본 선택 요소를 사용하는 것은 Angular 7.0의 새로운 기능입니다.
  6. Angular 요소: 작은 변경이지만 Angular 7의 새로운 기능
     " Angular Elements는 이제 사용자 정의 요소에 대한 웹 표준을 사용하여 콘텐츠 프로젝션을 지원합니다 ." — 이것은 Angular의 Stephen Fluin이 말한 것입니다.
  7. 파트너와 협력: Angular 팀은 최근에 시작된 커뮤니티 프로젝트 중 하나가 Angular 콘솔인 커뮤니티 프로젝트와 협력하기 위해 노력하고 있습니다. Angular 콘솔은 Angular CLI용 사용자 인터페이스입니다. 프롬프트보다 훨씬 쉽기 때문에 초보자와 전문가에게 좋습니다. Windows 및 Mac OS용 UI 버전이 다릅니다 .
Java의 MVC 아키텍처에 대한 초보자 가이드

Angular 7.0의 대부분의 변경 사항은 성능 향상 및 버그 수정에 있습니다. 따라서 현재까지 가장 안전한 버전이며 이전 버전에서 마이그레이션하는 것이 간단합니다. Ivy는 Angular 팀이 작업 중인 새로운 다가오는 렌더링 엔진입니다. 그때까지 기다리며 지켜보자. 계속 배우십시오 !

풀 스택 소프트웨어 개발에 대해 자세히 알아보려면 upGrad & IIIT-B의 소프트웨어 개발 이그 제 큐 티브 PG 프로그램 - 전체 스택 개발 전문화 작업 전문가를 위해 설계되었으며 500 시간 이상의 엄격한 교육을 제공합니다. 프로젝트 및 과제, IIIT-B 동문 자격, 실질적인 실습 캡스톤 프로젝트 및 최고의 기업과의 취업 지원.

풀 스택 개발자 되기

upGrad 소프트웨어 공학 직무연계PG 자격증 신청