LUMIFY WORK Angular 12 프로그래밍

이 과정을 공부하는 이유

이 포괄적인 Angular 12 프로그래밍 과정은 Angular 소개, TypeScript, 구성 요소, 지시문, 서비스, HTTP 클라이언트, 테스트 및 디버깅을 포함하는 이론 학습과 실습 랩의 조합입니다.
이 과정은 업무에 즉시 적용할 수 있는 유용하고 실행 가능한 정보로 가득 차 있습니다. 단일 페이지 브라우저 애플리케이션, 반응형 등 기본 Angular 12 개발의 기본 사항을 알아보세요. web사이트 및 하이브리드 모바일 애플리케이션.
메모: 다른 버전의 Angular에 대한 교육도 제공할 수 있습니다. 문의사항이 있거나 관심분야 등록을 원하시면 연락주시기 바랍니다.

배울 내용
이 과정을 성공적으로 마치면 다음을 수행 할 수 있습니다.

• Typescript를 사용하여 단일 페이지 Angular 애플리케이션 개발
• 완전한 Angular 개발 환경 설정
• 구성 요소, 지시어, 서비스, 파이프, 양식 및 사용자 정의 유효성 검사기 생성
• Observable을 사용하여 고급 네트워크 데이터 검색 작업 처리 REST에서 데이터 사용 web Angular HTTP TP 클라이언트를 사용하는 서비스는 다음을 사용하여 푸시 데이터 연결을 처리합니다. Web소켓 프로토콜
• Angular Pipe를 사용하여 데이터 형식 지정
• 고급 Angular Component Router 기능 사용
• 내장된 도구를 사용하여 Angular 애플리케이션을 테스트하고 디버그하세요.

코스 과목

1장. Angular 소개

• Angular란 무엇인가요?
• Angular 프레임워크의 핵심 기능 적절한 사용 사례
• Angular 애플리케이션의 구성 요소 Angular 애플리케이션의 기본 아키텍처 Angular 설치 및 사용
• 애플리케이션을 실행하는 Angular 애플리케이션 분석
• 네이티브 모바일 앱용 애플리케이션 Angular 구축 및 배포
• 요약

2장. TypeScript 소개

• Angular TypeScript 구문과 함께 사용하기 위한 프로그래밍 언어
• 프로그래밍 편집자
• 유형 시스템 – 변수 정의
• 유형 시스템 – 배열 정의
• 기본 기본 유형
• 함수 입력
• 유형 추론
• 클래스 정의
• 클래스 메서드
• 가시성 제어
• 클래스 생성자
• 클래스 생성자 - 초기화되지 않은 대체 형식 필드
• 인터페이스
• ES6 모듈 작업
• var 대 let
• 화살표 함수
• 화살표 함수 컴팩트 구문 템플릿 문자열
• 클래스의 제네릭
• 기능의 제네릭
• 요약

3장. 구성요소

• 구성 요소 란 무엇입니까?
• 전amp파일 구성 요소
• Angular CLI를 사용하여 구성 요소 생성
• 구성 요소 클래스
• @Component 데코레이터
• 모듈 구성 요소 템플릿에 구성 요소 등록
• Example: HelloComponent 템플릿
• Example: 컴포넌트를 사용하는 HelloComponent 클래스
• 응용 프로그램 실행
• 구성 요소 계층
• 애플리케이션 루트 구성 요소
• 부트스트랩 File
• 구성 요소 수명 주기 후크 Examp수명주기 후크
• CSS 스타일
• 요약

4장. 구성 요소 템플릿

• 템플릿
• 템플릿 위치
• Mustache {{ }} 구문
• DOM 요소 속성 설정
• 요소 본문 텍스트 설정
• 이벤트 바인딩
• 표현식 이벤트 핸들러
• 기본 처리 방지
• 속성 지시어
• CSS 클래스를 변경하여 스타일 적용
• Examp르:ngClass
• 스타일 직접 적용
• 구조적 지시문
• 조건부로 템플릿 실행
• Examp르:ngIf
• ngFor를 사용한 반복
• ngFor 지역 변수
• 컬렉션 Ex 조작ample – 항목 삭제
• ngSwitch 그룹화 요소를 사용하여 ngFor 교환 요소를 사용한 항목 추적
• 템플릿 참조 변수 요약

5장. 컴포넌트 간 통신

• 커뮤니케이션 기초
• 데이터 흐름 아키텍처
• 데이터 수신을 위한 하위 준비
• 상위로부터 데이터 보내기
• 속성 설정에 대한 추가 정보
• 구성 요소에서 이벤트 발생
• @Output() 예ample – 하위 구성 요소 @Output() Examp르 - 상위 구성 요소
• 완전 양방향 바인딩
• 상위에서 양방향 데이터 바인딩 설정
• 요약

6장. 템플릿 기반 양식

• 템플릿 기반 양식
• 양식 모듈 가져오기
• 기본 접근 방식
• 양식 설정
• 사용자 입력 얻기
• ngForm 속성 생략
• 양식 초기화
• 양방향 데이터 바인딩
• 양식 검증
• 각도 유효성 검사기
• 클래스 추가 입력 유형을 사용하여 유효성 검사 상태 표시
• 체크박스
• (드롭다운) 필드 선택
• 선택(드롭다운) 날짜 필드에 대한 렌더링 옵션
• 라디오 버튼
• 요약

7장. 반응형 양식

• 반응형 양식 이상view
• 빌딩 블록
• ReactiveForms모듈 가져오기
• 양식 구성
• 템플릿 디자인
• 입력 값 얻기
• 입력 필드 초기화
• 양식 값 설정
• 입력 변경 사항 구독
• 확인
• 내장 유효성 검사기
• 유효성 검사 오류 표시
• 사용자 정의 유효성 검사기
• 사용자 정의 유효성 검사기 사용
• 사용자 정의 유효성 검사기에 구성 제공
• FormArray – 동적으로 입력 추가
• FormArray – 구성요소 클래스
• FormArray – 템플릿
• FormArray – 값
• 하위 FormGroups – 구성 요소 클래스
• 하위 양식 그룹 – HTML 템플릿
• 하위 양식 그룹을 사용하는 이유
• 요약

8장. 서비스와 의존성 주입

• 서비스란 무엇입니까?
• 기본 서비스 생성
• 서비스 클래스
• 의존성 주입이란?
• 서비스 인스턴스 주입
• 주입기
• 인젝터 계층
• 루트 인젝터에 서비스 등록
• 구성 요소의 인젝터에 서비스 등록
• 기능 모듈 인젝터로 서비스 등록
• 서비스를 어디에 등록하나요?
• 대체 구현 종속성 주입 및 @Host를 제공하는 다른 아티팩트의 종속성 주입
• 의존성 주입과 @Optional
• 요약

9장. HTTP 클라이언트

• Angular HTTP TP 클라이언트
• HTTP TP 클라이언트 사용 – 이상view
• HttpClientModule 가져오기
• HttpClient를 이용한 서비스
• GET 요청하기
• 관찰 가능한 객체는 무엇을 합니까?
• 구성 요소에서 서비스 사용
• PeopleService 클라이언트 구성 요소 오류 처리
• 오류 개체 사용자 정의
• POST 요청하기
• PUT 요청하기
• DELETE 요청하기

10장. 파이프와 데이터 포맷팅

• 파이프란 무엇입니까?
• 내장 파이프
• HTML 템플릿 체인 파이프에서 파이프 사용
• 국제화된 파이프(i18n) 로케일 데이터 로드
• 데이트 파이프
• 수관
• 통화 파이프
• 사용자 정의 파이프 생성
• 맞춤형 파이프 Example
• 사용자 정의 파이프 사용
• ngFor와 함께 파이프 사용
• 필터 파이프
• 파이프 카테고리: 순수 및 불순
• 요약
• 순수 파이프 Example
• 불순한 파이프 Example
• 요약

11장. 단일 페이지 애플리케이션 소개

• SPA(단일 페이지 애플리케이션)란 무엇입니까? Web 애플리케이션
• SPA 워크플로우
• 단일 페이지 애플리케이션 고급tagHTML5 기록 API
• SPA 챌린지
• Angular Summary를 사용하여 SPA 구현

12장. Angular 컴포넌트 라우터

• 구성요소 라우터
• View 항해
• 각도 라우터 API
• 라우터 지원 애플리케이션 생성
• 라우팅된 부품 호스팅
• 링크와 버튼을 사용한 탐색
• 프로그래밍 방식 탐색
• 경로 매개변수 전달
• 경로 매개변수를 사용하여 탐색
• 경로 매개변수 값 얻기
• 경로 매개변수를 동기적으로 검색
• 비동기식으로 경로 매개변수 검색
• 쿼리 매개변수
• 쿼리 매개변수 제공
• 쿼리 매개변수를 비동기식으로 검색
• 매뉴얼 문제 URL 항목 및 북마크
• 요약

13장. 고급 HTTP 클라이언트

• 요청 옵션
• HttpResponse 객체 반환
• 요청 헤더 설정
• 새로운 관찰 가능 항목 생성
• 간단한 Observable 만들기
• 관찰 가능한 생성자 메서드 관찰 가능한 연산자
• 맵 및 필터 연산자
• flatMap() 연산자
• tap() 연산자
• zip() 결합자
• HTTP 응답 캐싱
• 순차적 HTTP 호출하기
• 병렬 호출하기
• catchError()를 사용하여 오류 객체 사용자 정의
• 파이프라인 오류
• 오류 복구
• 요약

14장. 각도 모듈

• 왜 Angular 모듈인가?
• 모듈 클래스 분석
• @NgModule 속성
• 기능 모듈
• Examp파일 모듈 구조
• 도메인 모듈 생성
• 라우팅/라우팅 모듈 쌍 생성
• 서비스 모듈 생성
• 공통 모듈 생성

15장. 고급 라우팅

• 라우팅 지원 기능 모듈
• 기능 모듈 사용
• 기능 모듈 지연 로딩
• 기능 모듈 구성요소에 대한 링크 생성
• 지연 로딩에 대한 추가 정보
• 모듈 사전 로드
• 기본 경로
• 와일드카드 경로 경로
• 다음으로 리디렉션
• 하위 경로
• 하위 경로 정의
• 하위 경로의 경우
• 하위 경로에 대한 링크
• 내비게이션 가드
• 가드 구현 생성
• 경로에서 가드 사용
• 요약

16장. 각도 애플리케이션 단위 테스트

• 단위 테스트 각도 아티팩트
• 테스트 도구
• 일반적인 테스트 단계
• 테스트 결과
• 재스민 테스트 스위트
• Jasmine 사양(단위 테스트)
• 기대(어설션)
• 매처
• ExampMatcher 사용에 대한 내용
• not 속성 사용
• 단위 테스트 스위트의 설정 및 해제
• ExampbeforeEach 및 afterEach 함수의 파일
• 각도 테스트 모듈
• Examp르 각도 테스트 모듈
• 서비스 테스트
• 서비스 인스턴스 주입
• 동기식 방법 테스트
• 비동기식 메서드 테스트
• 모의 HTTP TP 클라이언트 사용
• 미리 준비된 답변 제공
• 구성 요소 테스트
• 구성 요소 테스트 모듈
• 구성요소 인스턴스 생성
• ComponentFixture 클래스
• 기본 구성요소 테스트
• DebugElement 클래스
• 사용자 상호 작용 시뮬레이션
• 요약

17장. 디버깅

• 위에view 각도 디버깅의
• View디버거에서 TypeScript 코드 작성
• 디버거 키워드 사용
• 디버그 로깅
• Angular DevTools란 무엇입니까?
• Angular DevTools 사용
• Angular DevTools – 구성 요소 구조
• Angular DevTools – 변경 감지 실행
• 구문 오류 잡기
• 요약

실험실 실습

• 실습 1. Angular 소개
• 실습 2. TypeScript 소개
• 실습 3. 구성 요소 소개
• 실습 4. 구성 요소 템플릿
• 랩 5. 사진 갤러리 구성 요소 만들기
• 실습 6. 템플릿 기반 양식
• 실습 7. 편집 양식 만들기
• 실습 8. 반응형
• 실습 9. 서비스 개발
• 랩 10. HTTP TP 클라이언트 개발
• 실습 11. 파이프 사용
• 랩 12. 라우터를 사용한 기본 단일 페이지 애플리케이션 랩 13. 단일 페이지 애플리케이션(SPA) 구축
• 실습 14. 고급 HTTP TP 클라이언트
• 실습 15. Angular Bootstrap 사용
• 실습 16. 지연 모듈 로딩
• 실습 17. 고급 라우팅
• 실습 18. 단위 테스트
• 실습 19. Angular 애플리케이션 디버깅

누구를 위한 강좌인가요?
이 과정은 Angular 12 개발의 기본 사항을 배우고 이를 제작에 적용해야 하는 모든 사람을 대상으로 합니다. web 바로 신청하세요. 또한 대규모 그룹을 위해 이 교육 과정을 제공하고 맞춤화하여 조직의 시간, 비용 및 자원을 절약할 수 있습니다.

전제 조건
Web 이 Angular 과정을 최대한 활용하려면 HTML, CSS 및 JavaScript를 사용한 개발 경험이 필요합니다. 브라우저 DOM에 대한 지식도 유용합니다. AngularJS 또는 모든 버전의 Angular에 대한 사전 Angular 경험은 필요하지 않습니다.
https://www.lumifywork.com/en-au/courses/angular-12-programming/

문서 / 리소스

LUMIFY WORK Angular 12 프로그래밍 [PDF 파일] 사용자 가이드 Angular 12 프로그래밍, Angular, 12 프로그래밍, 프로그래밍

참고문헌

• 사용자 설명서