LUMIFY WORK Angular 15 프로그래밍 사용자 가이드

신청 및 WEB 개발
각도 15 프로그래밍
길이 5일
버전 15

내용물 숨다

이 과정을 공부하는 이유

이 집중적이고 포괄적인 Angular 15 교육 과정은 참가자에게 업무에 즉시 사용할 수 있는 기술을 제공합니다. 단일 페이지 브라우저 애플리케이션, 반응형 등 Angular 15 개발의 기본 사항을 배우게 됩니다. web사이트 및 하이브리드 모바일 애플리케이션.
이 과정은 Angular 소개, TypeScript, 구성 요소, 직접 입력, 서비스, HTTPClient, 테스트 및 디버깅을 포함하는 이론 학습과 실습이 결합된 과정입니다.
메모: 다른 버전의 Angular에 대한 교육도 제공할 수 있습니다. 문의사항이 있거나 관심분야 등록을 원하시면 연락주시기 바랍니다.

LUMIFY WORK의 각도

배울 내용

이 과정을 성공적으로 마치면 다음과 같은 지식을 얻게 됩니다.

Typescript를 사용하여 단일 페이지 Angular 애플리케이션 개발
완전한 Angular 개발 환경 설정
구성 요소, 지시문, 서비스, 파이프, 양식 및 사용자 정의 유효성 검사기 생성
Observable을 사용하여 고급 네트워크 데이터 검색 작업 처리
REST에서 데이터 사용 web Angular HTTP 클라이언트를 사용하는 서비스

다음을 사용하여 푸시 데이터 연결 이온을 처리합니다. Web소켓 프로토콜
Angular Pipe를 사용하여 데이터 형식 지정
고급 Angular Component Router 기능 사용
내장된 도구를 사용하여 Angular 애플리케이션 테스트 및 디버그
Angular CLI로 작업

제 강사는 저의 특정 상황과 관련된 시나리오를 실제 사례에 적용할 수 있어서 훌륭했습니다.
나는 도착한 순간부터 환영받는다는 느낌을 받았고, 교실 밖에서 그룹으로 앉아 우리의 상황과 목표에 대해 논의할 수 있는 능력은 매우 소중했습니다.
나는 많은 것을 배웠고 이 과정을 수강함으로써 나의 목표가 달성되는 것이 중요하다고 느꼈습니다.
Lumify Work 팀이 수고하셨습니다.아만다 니콜
IT 지원 서비스 관리자 – HEALTH WORLD LIMITED

코스 과목

각도 소개
• 각도란 무엇입니까?
• Angular 프레임워크의 핵심 기능
• 적절한 사용 사례
• Angular 애플리케이션의 구성 요소
• Angular 애플리케이션의 기본 아키텍처
• Angular 설치 및 사용
• Angular 애플리케이션 분석
• 애플리케이션 실행
• 애플리케이션 구축 및 배포
• 네이티브 모바일 앱을 위한 Angular
TypeScript 소개
• Angular와 함께 사용할 프로그래밍 언어
• TypeScript 구문
• 프로그래밍 편집자
• 유형 시스템 – 변수 정의
• 유형 시스템 – 배열 정의
• 기본 원시 유형
• 기능 이온을 입력하세요.
• 유형 추론
• 클래스 정의
• 수업방법
• 가시성 제어
• 클래스 생성자
• 클래스 생성자 – 대체 형식
• 초기화되지 않은 필드
• 인터페이스
• ES6 모듈 작업
• var 대 let
• 화살표 기능
• 화살표 함수 컴팩트 구문
• 템플릿 문자열
• 클래스의 제네릭
• 기능이 있는 제네릭

구성 요소
• 구성요소란 무엇입니까?
• 전직amp파일 구성 요소
• Angular CLI를 사용하여 구성 요소 생성
• 컴포넌트 클래스
• @Component 데코레이터
• 모듈에 구성 요소 등록
• 구성 요소 템플릿
• 전ample: HelloComponent 템플릿
• 전ample: HelloComponent 클래스
• 컴포넌트 사용
• 애플리케이션 실행
• 구성 요소 계층
• 애플리케이션 루트 구성 요소
• 부트스트랩 File
• 구성요소 수명주기 후크
• 전amp수명주기 후크
• CSS 스타일
구성요소 템플릿
• 템플릿
• 템플릿 위치
• Mustache {{ }} 구문
• DOM 요소 속성 설정
• 요소 본문 텍스트 설정
• 이벤트 바인딩
• 표현식 이벤트 핸들러
• 기본 처리 방지
• 속성 지시어
• CSS 클래스를 변경하여 스타일 적용
• 전amp르:ngClass
• 스타일 직접 적용
• 구조적 지시어
• 조건부 템플릿 실행
• 전amp르:ngIf
• ngFor를 사용한 반복
• ngFor 지역 변수
• 컬렉션 조작
• 전ample – 항목 삭제
• ngFor를 이용한 품목 추적
• ngSwitch로 요소 교체
• 그룹화 요소
• 템플릿 참조 변수

구성요소 간 통신
• 커뮤니케이션 기초
• 데이터 흐름 아키텍처
• 자녀가 데이터를 수신할 수 있도록 준비
• 부모로부터 데이터 보내기
• 속성 설정에 대한 추가 정보
• 구성요소에서 이벤트 발생
• @Output() Example – 하위 구성 요소
• @Output() Examp르 - 상위 구성 요소
• 완전 양방향 바인딩
• 상위에서 양방향 데이터 바인딩 설정
템플릿 기반 양식
• 템플릿 기반 양식
• 양식 모듈 가져오기
• 기본 접근 방식
• 양식 설정
• 사용자 입력 받기
• ngForm 속성 생략
• 양식 초기화
• 양방향 데이터 바인딩
• 양식 검증
• 각도 유효성 검사기
• 클래스를 사용하여 유효성 검사 상태 표시
• 추가 입력 유형
• 체크박스
• 필드 선택(드롭다운)
• 선택을 위한 렌더링 옵션(드롭다운)
• 날짜 필드
• 라디오 버튼

반응형
• 반응형 양식 이상view
• 빌딩 블록
• Reactive FormsModule 가져오기
• 양식 구성
• 템플릿 디자인
• 입력 값 얻기
• 입력 필드 초기화
• 양식 값 설정
• 입력 변경 사항 구독
• 검증
• 내장 유효성 검사기
• 유효성 검사 오류 표시
• 맞춤형 검증기
• 사용자 정의 유효성 검사기 사용
• 사용자 정의 유효성 검사기에 구성 제공
• FormArray – 동적으로 입력 추가
• FormArray – 구성요소 클래스
• FormArray – 템플릿
• FormArray – 값
• 하위 FormGroups – 구성 요소 클래스
• 하위 FormGroups – HTML 템플릿
• 하위 FormGroup을 사용하는 이유
서비스 및 종속성 주입
• 서비스란 무엇입니까?
• 기본 서비스 생성
• 서비스 클래스
• 의존성 주입이란 무엇입니까?
• 서비스 인스턴스 주입
• 주사기
• 인젝터 계층 구조
• 루트 인젝터에 서비스 등록
• 구성 요소의 인젝터에 서비스 등록
• 기능 모듈 인젝터로 서비스 등록
• 서비스 등록 장소는 어디입니까?
• 다른 아티팩트에 종속성 주입
• 대체 구현 제공
• 종속성 주입 및 @Host
• 종속성 주입 및 @Optional

HTTP 클라이언트
• Angular HTTP 클라이언트
• HTTP 클라이언트 사용 – 이상view
• HttpClientModule 가져오기
• HttpClient를 이용한 서비스
• GET 요청 만들기
• 관찰 가능한 객체는 무엇을 하는가?
• 컴포넌트에서 서비스 사용
• PeopleService 클라이언트 구성요소
• 오류 처리
• 오류 개체 사용자 정의
• POST 요청하기
• PUT 요청하기
• DELETE 요청하기
파이프 및 데이터 형식화
• 파이프란 무엇입니까?
• 내장 파이프
• HTML 템플릿에서 파이프 사용
• 체인 파이프
• 국제화 파이프(i18n)
• 로케일 데이터 로드
• 날짜 파이프
• 파이프 수
• 통화 파이프
• 맞춤형 파이프 생성
• 맞춤형 파이프 Example
• 맞춤형 파이프 사용
• ngFor와 함께 파이프 사용
• 필터 파이프
• 파이프 카테고리: 순수 및 불순
• 순수 파이프 Example
• 불순한 파이프 Example

단일 페이지 애플리케이션 소개
• 단일 페이지 애플리케이션(SPA)이란 무엇입니까?
• 전통적인 Web 애플리케이션
• SPA 워크플로우
• 단일 페이지 신청 고급tages
• HTML5 기록 API
• SPA 챌린지
• Angular를 사용하여 SPA 구현
Angular 구성요소 라우터
• 구성요소 라우터
• View 항해
• Angular 라우터 API
• 라우터 지원 애플리케이션 생성
• 라우팅된 부품 호스팅
• 링크와 버튼을 이용한 탐색
• 프로그래밍 방식 탐색
• 경로 매개변수 전달
• 경로 매개변수를 이용한 탐색
• 경로 매개변수 값 얻기
• 경로 매개변수를 동기적으로 검색
• 비동기식으로 경로 매개변수 검색
• 쿼리 매개변수
• 쿼리 매개변수 제공
• 쿼리 매개변수를 비동기식으로 검색
• 매뉴얼의 문제 URL 항목 및 북마크

고급 HTTP 클라이언트
• 요청 옵션
• HttpResponse 객체 반환
• 요청 헤더 설정
• 새로운 Observable 생성
• 간단한 Observable 생성
• 관찰 가능한 생성자 방법
• 관찰 가능한 연산자
• 맵 및 필터 연산자
• flatMap() 연산자
• tap() 연산자
• zip() 결합자
• HTTP 응답 캐싱
• 순차적 HTTP 호출하기
• 병렬 호출하기
• catchError()를 사용하여 오류 객체 사용자 정의
• 파이프라인 오류
• 오류 복구
각도 모듈
• 왜 Angular 모듈인가?
• 모듈 클래스 분석
• @NgModule 속성
• 기능 모듈
• 전amp파일 모듈 구조
• 도메인 모듈 생성
• 라우팅/라우팅 모듈 쌍 생성
• 서비스 모듈 생성
• 공통 모듈 생성
• 한 모듈을 다른 모듈에서 사용

고급 라우팅
• 라우팅 지원 기능 모듈
• 기능 모듈 사용
• 기능 모듈 지연 로딩
• 기능 모듈 구성요소에 대한 링크 생성
• 지연 로딩에 대한 추가 정보
• 모듈 사전 로드
• routerLinkActive 바인딩
• 기본 경로
• 와일드카드 경로 경로
• 리디렉션 대상
• 하위 경로
• 하위 경로에 대한 하위 경로 정의
• 하위 경로에 대한 링크
• 내비게이션 가드
• 가드 구현 생성
• 경로에서 가드 사용
단위 테스트 각도 애플리케이션
• 각도 아티팩트 단위 테스트
• 테스트 도구
• 일반적인 테스트 단계
• 시험 결과
• 재스민 테스트 스위트
• Jasmine 사양(단위 테스트)
• 기대사항(Asert 이온)
• 매처
• 전ampMatcher 사용에 대한 내용
• not 속성 사용
• 단위 테스트 스위트의 설정 및 해제
• 전ampbeforeEach 및 afterEach 함수의 파일
• 각도 테스트 모듈
• 전amp르 각도 테스트 모듈
• 서비스 테스트
• 서비스 인스턴스 주입
• 동기식 방법 테스트
• 비동기식 방법 테스트
• 모의 HTTP 클라이언트 사용
• 미리 준비된 답변 제공
• 구성 요소 테스트
• 구성 요소 테스트 모듈
• 구성요소 인스턴스 생성
• ComponentFixture 클래스
• 기본 구성 요소 테스트
• DebugElement 클래스
• 사용자 상호작용 시뮬레이션

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

누구를 위한 강좌인가요?

이 과정은 Angular 15 개발의 기본 사항을 배우고 이를 제작에 즉시 적용해야 하는 모든 사람을 대상으로 합니다. web 응용 프로그램.
또한 대규모 그룹을 위해 이 교육 과정을 제공하고 맞춤화하여 조직의 시간, 비용 및 자원을 절약할 수 있습니다. 자세한 내용은 이메일을 통해 문의해 주세요. ph.training@lumifywork.com