Complete Angular Tutorial For Beginners

https://www.tektutorialshub.com/angular-tutorial/#introduction-to-angular

What is Angular

Angular는

모바일 및 데스크탑용 Single Page Application을 구축하기 위한 개발 플랫폼입니다. 

Typescript 및 HTML을 사용하여 앱을 빌드합니다. 

Angular 자체는 Typescript를 사용하여 작성되었습니다. 

이제 복잡하고 정교한 웹 또는 모바일 애플리케이션을 구축하는 데

필요한 모든 기능이 함께 제공됩니다. 

component , Directives , Forms , Pipes , HTTP Services , Dependency Injection 

등과 같은 기능이 함께 제공됩니다 

 

Angular Versions

Angular의 초기 버전은 Angular 2로 이름이 지정되었습니다.

나중에 Angular로 이름이 변경되었습니다 . 

그런 다음 Angular 팀은 Angular 버전의 새 버전을 정기적으로 릴리스하고

Angular 10.0.12에서 사용할 수 있는 마지막 안정 버전을 출시합니다.

 

Angular 9는 2020년 2월 6일에 출시되었습니다.

 Angular 9는 주요 릴리스입니다. 

이 릴리스는 기본적으로 ivy 컴파일러 및 런타임으로 전환됩니다. 

아이비는 더 작은 번들 크기, 더 빠르고 더 나은 테스트 디버깅, 향상된 유형 검사, 빌드 시간 등을 제공합니다.

 

Angular 10은 2020년 6월 24일에 출시됩니다. 이 링크 에서 기능 목록에 대해 알아볼 수 있습니다.

 

Version History

 

Angular VersionDateDescription

Angular 2	14.09.2016	Initial Version of Angular
Angular 4	23.03.2017	Version 4
Angular 5	11.11.2017	Version 5
Angular 6	03-05-2018	Version 6
Angular 7	18-10-2018	Version 7
Angular 8	25-08-2019	Version 8
Angular 9	06-02-2020	Version 9
Angular 10	24-06-2020	Version 10
Angular 10.0.12	24-08-2020	Version 10.0.12

You can read the latest versions at https://github.com/angular/angular/blob/master/CHANGELOG.md

 

Prerequisites 

 

Angular 튜토리얼은

Javascript, HTML 및 CSS에 대한 실무 지식이 필요합니다 . 또한 OOP의 개념이 필요합니다.

우리는 Typescript 를 언어로 사용할 것입니다. 

C# 또는 Java에 대한 지식이 있으면 매우 쉽게 찾을 수 있습니다.

 Typescript 튜토리얼 살펴보기

 

Introduction to Angular

이 Angular 입문서에서는 Angular를 엿볼 수 있습니다. 

Angular는 모바일 및 데스크톱 웹 애플리케이션을 구축하기 위한 UI 프레임워크입니다. 

Javascript를 사용하여 구축되었습니다. 

Angular를 사용하면 HTML, CSS 및 Typescript를 사용하여

놀라운 클라이언트 측 애플리케이션을 구축할 수 있습니다. 

Angular 프레임워크를 사용하기 전에 Angular 프레임워크가 어떻게 작동하는지 아는 것이 매우 중요합니다. 

다음 자습서 에서는 Angular를 소개 하고 Angulars 아키텍처에 대해 설명합니다 .

1. 앵귤러 소개
2. Angular 아키텍처 개요 및 개념

Getting Started With Angular Tutorial

Angular는 Angular 2 버전 이후로 많은 변화를 겪었습니다.

Angular 7 버전부터는 Angular에서 새 프로젝트를 설치하고 생성하는 것이 매우 간단해졌습니다. 

설치 및 Visual Studio 코드, NPM 패키지 관리자 및 Angular CLI에서 수행해야 하는 유일한 작업입니다. 

일단 필요한 종속성을 설치하고 새 프로젝트를 만드는 것은 간단한 명령(ng new)을 실행하는 것만큼 쉽습니다 . 

Angular CLI 는 다양한 라이브러리의 구성 및 초기화를 처리합니다.

 

다음 단계별 자습서는 Angular 응용 프로그램을 만드는 과정을 안내합니다.

1. Angular 개발 환경 설치 및 설정 
2. Angular에서 새 프로젝트를 만드는 방법
3. Angular의 부트스트래핑

Component

Component는 Angular 애플리케이션의 주요 빌딩 블록입니다. 

Component는 View에 대한 정의와 View의 모양과 동작을 정의하는 data를 포함합니다. 

Angular Components는 자바 스크립트 클래스이며 

@component Decorator를 사용하여 정의됩니다. 

이 데코레이터는 Component에 표시할 View 및 Class에 관한 Meatdate를 제공합니다.

 

Component는 Data Binding이라는 프로세스를 사용하여 View에 data를 전달합니다. 

이것은 DOM Elements를 component propertie에 바인딩하여 수행됩니다. 

바인딩을 사용하여 component class property values을 사용자에게 표시하고,

element style을 변경하고, 사용자 이벤트에 응답할 수 있습니다.

1. Angular Components 소개
2. Angular의 데이터 바인딩
3. Angular의 Interpolation
4. Angular의 Property Binding
5. Angular의 이벤트 바인딩
6. Angular의 양방향 바인딩 및 ngModel
7. ngModelChange & Change 이벤트
8. Angular에 자식 컴포넌트 추가하기

Directives

 Angular directive은 DOM을 조작하는 데 도움이 됩니다 . 

지시문을 사용하여 DOM 요소의 모양, 동작 또는 레이아웃을 변경할 수 있습니다. 

HTML을 확장하는 데 도움이 됩니다. 

Angular 지시문 은 동작 방식에 따라 세 가지 범주로 분류됩니다. 

Component,  Structural and Attribute Directives 입니다.

 

ngFor 는Angular structural directive입니다.  

반복 가능한 목록(Collection)의 각 항목에 대해 HTML 템플릿의 일부를 한 번씩 반복합니다.

ngSwitch 는 DOM 요소를 추가/제거할 수 있습니다 . 

자바스크립트의 switch 문과 유사합니다. 

ngIf 는 DOM 요소를 추가/제거할 수 있습니다.

 

ngClass 지시문 은

Angular Attribute Directive 으로 HTML 요소에 CSS 클래스를 추가하거나 제거할 수 있습니다. 

ngStyle 지시문을 사용하면 expression을 사용하여 HTML 요소의 스타일을 수정할 수 있습니다

ngStyle 을 사용하면 HTML 요소의 스타일을 동적으로 변경할 수 있습니다.

1. Angular Directives
2. ngFor 
3. ngSwitch
4. ngIf
5. ngClass
6. ngStyle
7. ngFor Trackby
8. Custom Directive

 

Pipes

Angular pipes는 Data를 변환하는 데 사용됩니다. 

예를 들어, Date 파이프는 로케일 규칙에 따라 날짜 형식을 지정합니다. 

파이프 및 체인 파이프에 인수를 전달할 수 있습니다. 

Angular를 사용하면 Custom Pipe를 생성할 수도 있습니다.

1. Angular Pipes
2. Angular Custom Pipes
3. Date Pipe
4. Async Pipe
5. KeyValue Pipe
6. Using Pipes in Components & Services

Component Communication

1. Angular Component Communication
2. Passing data from Parent to child component 
3. Passing Data from Child to Parent Component

Component Life Cycle Hook

Life Cycle Hooks는 Angular가 지시문 및 구성 요소를 생성, 변경 및 파괴할 때

directives and components 에 대해 호출하는 메서드입니다. 

Life Cycle Hook를 사용하여 생성, 업데이트 및 삭제 중에

component의 동작을 미세 조정할 수 있습니다.

1. Component Life Cycle
2. OnInit & OnDestroy
3. Onchanges
4. DoCheck

 

Angular Forms

데이터 입력 양식data entry form은 매우 간단하거나 매우 복잡할 수 있습니다. 

양식에는 입력 필드가 없거나 텍스트 상자, 날짜, 숫자, 이메일, 암호, 확인란, 옵션 상자 등과

같은 다양한 필드가 있습니다.

이러한 필드는 여러 탭 또는 여러 페이지에 걸쳐 있을 수 있습니다. 

양식에는 여러 필드에 상호 의존적인 복잡한 유효성 검사 논리가 포함될 수도 있습니다.

 

Angular Forms 모듈은 위의 모든 것과 더 많은 것을 처리하도록 설계되었습니다. 

Angular Forms는

이제 Forms 개발에 대한 Reactive Forms 접근 방식을 지원합니다. 

템플릿 기반 접근 방식의 이전 방식도 지원됩니다.

1. Angular Forms Tutorial: Fundamental & Concepts
2. Template Driven Forms in Angular
3. Set Value in Template Driven forms in Angular
4. Reactive Forms in Angular
5. FormBuilder in Reactive Forms
6. SetValue & PatchValue in Angular
7. StatusChanges in Angular Forms
8. ValueChanges in Angular Forms
9. FormControl
10. FormGroup
11. FormArray Example
12. Build Dynamic or Nested Forms using FormArray
13. SetValue & PatchValue in FormArray
14. Select Options Dropdown

Services & Dependency Injection

Services를 통해 재사용 가능한 코드를 생성하고 이를 필요로 하는 모든 구성 요소를 사용할 수 있습니다. 

Services는 종속성 주입 시스템dependency injection system을 사용하여

components and other services에 주입할 수 있습니다. 

 

dependencies은 Provider’s metadata를 사용하여 Module에서 선언됩니다. 

Angular는 Component Tree와 tree of injector & Providers를 생성합니다. 

이것을 계층적 패턴이라고 합니다. hierarchical pattern.

1. Services
2. Dependency injection
3. Injector, @Injectable & @Inject
4. Providers
5. Injection Token
6. Hierarchical Dependency Injection
7. Angular Singleton Service
8. ProvidedIn root, any & platform
9. @Self, @SkipSelf & @Optional Decorators
10. @Host Decorator in Angular
11. ViewProviders

 

Angular Forms Validation

One of the common tasks that is performed, while building a form is Validation. The Forms Validation is built into the Angular Forms Module. The Angular provides several Built-in validators out of the box. If those validators do not fit your needs, then you can create your own custom validator.

 

양식을 작성하는 동안 수행되는 일반적인 작업 중 하나는 유효성 검사입니다. 

Forms Validation은 Angular Forms Module에 내장되어 있습니다. 

Angular는 몇 가지 기본 제공 유효성 검사기를 즉시 제공합니다. 

이러한 유효성 검사기가 요구 사항에 맞지 않으면

고유한 사용자 지정 유효성 검사기를 만들 수 있습니다.

1. Validations in Reactive Forms in Angular
2. Custom Validator in Reactive Forms
3. Passing Parameter to Custom Validator in Reactive Forms
4. Inject Service into Custom Validator
5. Validation in Template Driven Forms
6. Custom Validator in Template Driven Forms
7. Angular Async Validator
8. Cross Field Validation
9. Adding Validators Using SetValidators

HTTP 

The newly designed HttpClient Module allows us to query the Remote API source

to get data into our Application.

It requires us to Subscribe to the returned response using RxJs observables.

 

새로 설계된 HttpClient Module을 사용하면

Remote API source를 쿼리하여 애플리케이션으로 데이터를 가져올 수 있습니다. 

RxJ 관찰 가능 항목을 사용하여 the returned response을 구독Subscribe해야 합니다.

1. Angular HTTP Client Tutorial
2. HTTP GET Example
3. HTTP POST Example
4. Passing URL Parameters (Query strings)
5. HTTP Headers Example
6. HTTP Interceptor

 

Angular Router

The Router module handles the navigation & Routing in Angular.

The Routing allows you to move from one part of the application to another part or one View to another View.  

 

라우터 모듈은 Angular에서 탐색 및 라우팅을 처리합니다. 

라우팅을 사용하면 응용 프로그램의 한 부분에서

다른 부분으로 또는 한 보기에서 다른 보기로 이동할 수 있습니다.  

1. Routing and Navigation in Angular
2. Location Strategies in Angular Router
3. Passing Parameters to Route
4. Child Routes / Nested Routes
5. Passing Optional (Query) Parameters to a route
6. Navigation between Routes
7. Angular Route Guards
8. CanActivate Guard
9. CanActivateChild Guard
10. CanDeactivate Guard
11. Angular Resolve Guard
12. Angular Pass data to route
13. RouterLinkActive
14. Router Events

Angular Module

The Angular Modules help us to organize our code into manageable parts or block.

Each block implements a specific feature.

The Components, Templates, Directives, Pipes, and Services,

which implements that feature become part of the module.

The following tutorial explains,

how best you can create an Angular Module,

The folder structure that you can use, etc.

We can also load the Modules lazily or Preload thus improving the performance of the Application.

 

Angular 모듈은 코드를 관리 가능한 부분이나 블록으로 구성하는 데 도움이 됩니다. 

각 블록은 특정 기능을 구현합니다. 

해당  기능을 구현하는 Components , Templates,  Directives ,  Pipes 및  Services 는 모듈의 일부가 됩니다. 

다음 튜토리얼에서는 Angular 모듈을 가장 잘 만드는 방법, 사용할 수 있는 폴더 구조 등을 설명합니다.

모듈을 지연 로드하거나 미리 로드하여 애플리케이션의 성능을 향상시킬 수도 있습니다.

1. Introduction to Angular Modules
2. Routing Between Angular Modules
3. Angular folder structure: Best Practices
4. Lazy Loading in Angular
5. Preloading Strategy
6. CanLoad Guard

Advanced Components

The Components in Angular are very powerful feature.

The following tutorials take you through some of the important features of the Angular Component.

 

Angular의 구성 요소는 매우 강력한 기능입니다. 

다음 자습서에서는 Angular 구성 요소의 몇 가지 중요한 기능을 안내합니다.

1. Ng-Content & Content Projection in Angular
2. Angular @input, @output & EventEmitter
3. Template Reference Variable in Angular
4. ng-container in Angular
5. ng-template & TemplateRef in angular
6. ngtemplateoutlet in angular
7. HostBinding & HostListener
8. ViewChild, ViewChildren & QueryList
9. ElementRef
10. Renderer2
11. ContentChild & ContentChildren
12. AfterViewInit, AfterViewChecked, AfterContentInit & AfterContentChecked
13. Angular Decorators

Observable in Angular

The Angular uses the Observable Pattern extensively.

The following tutorials gives you an introduction to observable and

how to use it in an Angular Application.

 

Angular는 Observable Pattern을 광범위하게 사용합니다. 

다음 튜토리얼에서는 옵저버블에 대한 소개와

Angular 애플리케이션에서 이를 사용하는 방법을 제공합니다.

1. Angular Observable Tutorial
2. Create Observable from a string, array. object, collection
3. Observable from events using fromEvent
4. Observable pipe
5. Map Operator
6. Filter Operator
7. Tap Operator
8. SwitchMap
9. MergeMap
10. ConcatMap
11. ExhaustMap
12. take, takeUntil, takeWhile, takeLast
13. First, last & Single
14. Skip, SkipWhile, SkipUntil & SkipLast
15. Scan & Reduce
16. DebounceTime & Debounce
17. Delay & DelayWhen
18. ThrowError
19. CatchError
20. ReTry & ReTryWhen
21. Unsubscribe from an observable
22. Subjects in Angular
23. ReplaySubject, BehaviorSubject & AsyncSubject
24. Angular Subject Example

Styling the Application

The Angular uses several different ways to style the Application.

You can style the app globally and then override it locally in the component very easily.

The component styles have local scope,

which is achieved using the various View Encapsulation strategies.

Learn all these in the section

 

Angular는 애플리케이션의 스타일을 지정하기 위해 여러 가지 다른 방법을 사용합니다. 

앱의 스타일을 전역적으로 적용한 다음 구성 요소에서 로컬로 매우 쉽게 재정의할 수 있습니다. 

구성 요소 스타일에는 다양한 뷰 캡슐화 전략을 사용하여 달성되는 로컬 범위가 있습니다. 

섹션에서 이 모든 것을 배우십시오.

1. Angular Global Styles
2. View Encapsulation
3. Style binding in Angular
4. Class Binding in Angular
5. Component Styles
6. How to Install & Use Angular FontAwesome
7. How to Add Bootstrap to Angular

Others

1. Location Service

Configuration

The apps usually need some sort of Run-time configuration information like URL endpoint etc,

which it needs to load at startup.

Also, different environments like development, production &

testing require different environments, etc.

 

앱에는 일반적으로 시작 시 로드해야 하는 URL 끝점 등과 같은 일종의 런타임 구성 정보가 필요합니다. 

또한 개발, 생산 및 테스트와 같은 다양한 환경에는 다른 환경 등이 필요합니다.

1. How to use APP_INITIALIZER
2. Run time configuration
3. Environment Variables

Handling Errors

In the following Angular tutorials, we look at how Angular handles the error.

We handle errors by setting up a Global Error handler or custom error handler.

Also,.whenever the error occurs in an HTTP operation,

the Angular wraps it in an httpErrorResponse Object.

Learn how to handle the HTTP Errors also.

 

다음 Angular 자습서에서는 Angular가 오류를 처리하는 방법을 살펴봅니다. 

글로벌 오류 처리기 또는 사용자 지정 오류 처리기를 설정하여 오류를 처리합니다. 

또한 HTTP 작업에서 오류가 발생할 때마다

Angular는 이를  httpErrorResponse Object로 래핑합니다. 

HTTP 오류를 처리하는 방법도 배우십시오.

1. Error Handling in Angular
2. HTTP Error Handling

Angular CLI

Learn how to use Angular CLI to speed up the development of Angular Application

 

Angular CLI를 사용하여 Angular 애플리케이션 개발 속도를 높일수 잇습니다.

 

1. Angular CLI Tutorial
2. Upgrading Angular App to the latest version
3. Multiple App in One Project

SEO & Angular

You Website is useless if it is not found by the Search Engines.

There are many things you must consider to make App SEO friendly.

You need to set up Title & Meta Tags for each page.

Ensure that the search engines can crawl and read your page.

Set the correct Canonical URL for each page etc.

Also, ensure that the app loads quickly, etc.

The Following Angular Tutorials guides you through some of the important SEO features.

 

귀하의 웹사이트는 검색 엔진에서 찾지 못하면 쓸모가 없습니다. 

앱 SEO를 친화적으로 만들기 위해 고려해야 할 사항이 많이 있습니다. 

각 페이지에 대한 제목 및 메타 태그를 설정해야 합니다. 

검색 엔진이 페이지를 크롤링하고 읽을 수 있는지 확인하십시오. 

각 페이지 등에 올바른 표준 URL을 설정하십시오.

또한 앱이 빠르게 로드되는지 확인하십시오.

다음 Angular 자습서는 중요한 SEO 기능 중 일부를 안내합니다.

1. Title Service Example
2. Dynamic Title based on Route
3. Meta Service
4. Dynamic Meta Tags
5. Canonical URL
6. Lazy Load Images in Angular

Angular Universal

The following Angular Universal Tutorial explains

how to achieve Server Side Rendering using Angular Universal.

The rendering the App on the server side makes it load quickly and

also ensures that the search engines can crawl the content

 

다음 Angular Universal Tutorial은

Angular Universal을 사용하여 서버 측 렌더링을 달성하는 방법을 설명합니다. 

서버 측에서 앱을 렌더링하면 앱이 빠르게 로드되고 검색 엔진이 콘텐츠를 크롤링할 수 있습니다.

1. Server-Side Rendering Angular Universal Tutorial

Building & Hosting

1. Requested URL Not found on this server

Angular Resources

1. Angular Examples & Projects
2. The Angular Learning Resources

Angular how-to guides

1. How to get the current Route
2. ExpressionChangedAfterItHasBeenCheckedError in Angular
3. Angular CLI Check Version
4. Property ‘value’ does not exist on type ‘EventTarget’ Error in Angular

Module Loaders

The Angular application can use either SystemJs or Webpack module loader.

We will demonstrate how to make use of both the Loader by building a small application.

 

Angular 애플리케이션은 SystemJ 또는 Webpack 모듈 로더를 사용할 수 있습니다. 

우리는 작은 응용 프로그램을 빌드하여 두 로더를 모두 사용하는 방법을 보여줍니다.

1. Create Angular Application using SystemJS
2. Create Angular Application using Webpack