LUMIFY WORK Angular 12 Програмчлал

ЯАГААД ЭНЭ ХИЧЭЭЛИЙГ СУРАХ ВЭ

Энэхүү Angular 12 програмчлалын иж бүрэн сургалт нь Angular-ийн танилцуулга, дараа нь TypeScript, бүрэлдэхүүн хэсэг, заавар, үйлчилгээ, HTTP Client, туршилт, дибаг хийх зэрэг онолын сургалт, практик лабораторийн хослол юм.
Энэхүү сургалт нь танд хэрэгтэй бөгөөд хэрэгжсэн мэдээллээр дүүрэн бөгөөд та шууд ажилдаа ашиглаж болно. Angular 12-ийн үндсэн хөгжүүлэлтийн үндсийг мэдэж аваарай, тухайлбал нэг хуудас хөтөч програмууд, хариу үйлдэл үзүүлдэг webсайтууд, гар утасны эрлийз програмууд.
Анхаарна уу: Мөн бид Angular-ийн бусад хувилбарууд дээр сургалт явуулах боломжтой. Бидэнтэй холбогдож лавлагаа авах эсвэл сонирхсон зүйлээ бүртгүүлнэ үү.

ТА ЮУ СУРАХ ВЭ
Энэхүү сургалтыг амжилттай дүүргэсний дараа та дараахь зүйлийг хийх боломжтой болно.

• Typescript ашиглан нэг хуудас бүхий Angular програмуудыг хөгжүүл
• Angular хөгжүүлэлтийн бүрэн орчныг тохируулна уу
• Бүрэлдэхүүн хэсэг, заавар, үйлчилгээ, хоолой, маягт, захиалгат баталгаажуулагчийг бий болгох
• Observables ашиглан сүлжээний дата хайлт хийх дэвшилтэт даалгавруудыг гүйцэтгэх REST-аас өгөгдлийг ашиглах web Angular HT TP Client ашиглан үйлчилгээ WebСокетуудын протокол
• Өгөгдлийг форматлахын тулд Angular Pipes-тэй ажиллах
• Angular Component Router-ийн дэвшилтэт функцуудыг ашиглана уу
• Суурилуулсан хэрэгслийг ашиглан өнцгийн програмуудыг турших, дибаг хийх.

ХИЧЭЭЛИЙН СЭДЭВҮҮД

Бүлэг 1. Angular-ийн танилцуулга

• Angular гэж юу вэ?
• Өнцгийн хүрээний гол онцлогууд Тохиромжтой хэрэглээний тохиолдлууд
• Өнцгийн хэрэглээний барилгын блокууд Өнцгийн хэрэглээний үндсэн архитектур Өнцгийг суулгах, ашиглах
• Програмыг ажиллуулж буй өнцгийн хэрэглээний анатоми
• Төрөлхийн гар утасны аппликейшнд зориулсан өнцөгт програмыг бүтээх, байрлуулах
• Дүгнэлт

Бүлэг 2. TypeScript-ийн танилцуулга

• Angular TypeScript синтакстай ашиглах програмчлалын хэлүүд
• Програмчлалын редакторууд
• Төрөл систем - Хувьсагчдыг тодорхойлох
• Төрөл систем - Массивыг тодорхойлох
• Үндсэн командын төрлүүд
• Functions гэж бичнэ үү
• Дүгнэлт бичнэ үү
• Ангиудыг тодорхойлох
• Ангийн арга
• Харагдах байдлын хяналт
• Ангилал бүтээгчид
• Анги үүсгэгчид – Эхлээгүй талбарууд
• Интерфейсүүд
• ES6 модулиудтай ажиллах
• var vs let
• Сумны функцууд
• Arrow Function Compact Syntax Template Strings
• Анги дахь ерөнхий зүйл
• Функц дэх ерөнхий зүйлс
• Дүгнэлт

Бүлэг 3. Бүрэлдэхүүн хэсгүүд

• Бүрэлдэхүүн хэсэг гэж юу вэ?
• ХуучинampБүрэлдэхүүн хэсэг
• Angular CLI ашиглан бүрэлдэхүүн хэсэг үүсгэх
• Бүрэлдэхүүн хэсэг
• @Бүрэлдхүүнийг чимэглэгч
• Модулийн бүрэлдэхүүн хэсгийн загварт бүрэлдэхүүн хэсгийг бүртгэх
• Example: HelloComponent загвар
• Example: Бүрэлдэхүүн хэсэг ашиглах HelloComponent анги
• Програмыг ажиллуулна уу
• Бүрэлдэхүүн хэсгүүдийн шатлал
• Програмын эх бүрэлдэхүүн хэсэг
• Bootstrap File
• Бүрэлдэхүүн хэсгийн амьдралын мөчлөгийн дэгээ Example Lifecycle Hooks
• CSS загварууд
• Дүгнэлт

Бүлэг 4. Бүрэлдэхүүн хэсгүүдийн загварууд

• Загварууд
• Загварын байршил
• Сахал {{ }} синтакс
• DOM элементийн шинж чанарыг тохируулах
• Элементийн үндсэн текстийг тохируулах
• Үйл явдал холбох
• Илэрхийллийн үйл явдал зохицуулагч
• Өгөгдмөл зохицуулалтаас урьдчилан сэргийлэх
• Атрибутын удирдамж
• CSS ангиудыг өөрчлөх замаар хэв маягийг ашиглах
• Example: ngClass
• Загваруудыг шууд хэрэглэх
• Бүтцийн заавар
• Загварыг нөхцөлтэйгээр гүйцэтгэх
• Example: ngIf
• ngFor ашиглан давталт хийх
• ngОрон нутгийн хувьсагчдын хувьд
• Цуглуулгыг удирдах Example - Зүйлийг устгах
• ngSwitch бүлэглэх элементүүдтэй элементүүдийг солихын тулд ng-ээр зүйлийг хянах
• Загварын лавлагааны хувьсагчийн хураангуй

Бүлэг 5. Бүрэлдэхүүн хэсгүүд хоорондын харилцаа холбоо

• Харилцааны үндэс
• Өгөгдлийн урсгалын архитектур
• Хүүхдийг мэдээлэл хүлээн авахад бэлтгэх
• Эцэг эхээс өгөгдөл илгээх
• Properties тохируулах талаар дэлгэрэнгүй
• Бүрэлдэхүүн хэсгээс галлах үйл явдал
• @Output() Жишээ ньample – Хүүхдийн бүрэлдэхүүн хэсэг @Output() Жишээ ньample - Эцэг эхийн бүрэлдэхүүн хэсэг
• Бүрэн хоёр талын холболт
• Эцэг эхийн хоёр талын өгөгдөл холбох тохиргоог хийж байна
• Дүгнэлт

Бүлэг 6. Загвар хөтлөх маягтууд

• Загвар дээр суурилсан маягтууд
• Маягтын модулийг импортлох
• Үндсэн хандлага
• Маягтыг тохируулах
• Хэрэглэгчийн оролтыг авч байна
• ngForm атрибутыг орхиж байна
• Маягтыг эхлүүлнэ үү
• Хоёр талын өгөгдөл холбох
• Маягтын баталгаажуулалт
• Өнцгийн баталгаажуулагч
• Ангиудыг ашиглан баталгаажуулалтын төлөвийг харуулж байна Нэмэлт оролтын төрлүүд
• Шалгалтын нүднүүд
• (Доош унадаг) талбаруудыг сонгоно уу
• Огноог сонгох талбарт зориулсан дүрслэх сонголтууд
• Радио товчлуурууд
• Дүгнэлт

Бүлэг 7. Реактив хэлбэрүүд

• Реактив маягтууд дууссанview
• Барилгын блокууд
• ReactiveFormsModule импортлох
• Маягт бүтээх
• Загвар зохион бүтээх
• Оролтын утгуудыг авах
• Оролтын талбаруудыг эхлүүлж байна
• Маягтын утгыг тохируулах
• Оролтын өөрчлөлтүүдэд бүртгүүлж байна
• Баталгаажуулалт
• Баригдсан баталгаажуулагч
• Баталгаажуулалтын алдааг харуулж байна
• Тусгай баталгаажуулагч
• Custom Validator ашиглах
• Custom Validator-д тохиргоог нийлүүлж байна
• FormArray - Оролтыг динамикаар нэмнэ
• FormArray - Бүрэлдэхүүн хэсгийн анги
• FormArray - Загвар
• FormArray - Утга
• Дэд хэлбэрийн бүлгүүд - Бүрэлдэхүүн хэсгүүдийн ангилал
• Дэд маягтын бүлгүүд - HTML загвар
• Яагаад дэд маягтын бүлгүүдийг ашиглах хэрэгтэй вэ?
• Дүгнэлт

Бүлэг 8. Үйлчилгээ ба хараат байдлын тарилга

• Үйлчилгээ гэж юу вэ?
• Үндсэн үйлчилгээг бий болгох
• Үйлчилгээний ангилал
• Dependency Injection гэж юу вэ?
• Үйлчилгээний инстанцыг нэвтрүүлэх
• Тарилга хийдэг
• Инжекторын шатлал
• Үйлчилгээг Root Injector-д бүртгүүлэх
• Бүрэлдэхүүн хэсгийн инжектортой үйлчилгээг бүртгэх
• Онцлог модулийн инжектор бүхий үйлчилгээг бүртгүүлнэ үү
• Үйлчилгээг хаана бүртгүүлэх вэ?
• Бусад олдворууд дахь хараат байдлын тарилга нь өөр хэрэгжүүлэлтийн хараат тарилга болон @host-ыг хангадаг.
• Dependency Injection ба @Optional
• Дүгнэлт

Бүлэг 9. HTTP Client

• Angular HT TP Client
• HT TP Client-г ашиглах – Дуусахview
• HttpClientModule импортлож байна
• HttpClient ашиглан үйлчилгээ
• GET хүсэлт гаргаж байна
• Ажиглах боломжтой объект юу хийдэг вэ?
• Үйлчилгээг бүрэлдэхүүн хэсэг болгон ашиглах
• PeopleService Client Бүрэлдэхүүн хэсгийн алдааг зохицуулах
• Алдааны объектыг тохируулах
• POST хүсэлт гаргаж байна
• PUT хүсэлт гаргаж байна
• УСТГАХ хүсэлт гаргаж байна

Бүлэг 10. Дамжуулах хоолой ба өгөгдлийг форматлах

• Хоолой гэж юу вэ?
• Баригдсан хоолой
• HTML загварт хоолойнуудыг гинжлэх хоолойнуудыг ашиглах
• Олон улсын чанартай хоолойнууд (i18n) Орон нутгийн өгөгдлийг ачаалж байна
• Огноо хоолой
• Хоолойн дугаар
• Валютын хоолой
• Захиалгат хоолой үүсгэх
• Захиалгат хоолой Example
• Захиалгат хоолойнуудыг ашиглах
• ngFor-тэй Pipe ашиглах
• Шүүлтүүрийн хоолой
• Хоолойн ангилал: Цэвэр ба цэвэр бус
• Дүгнэлт
• Цэвэр хоолой Example
• Цэвэр бус хоолой Example
• Дүгнэлт

Бүлэг 11. Нэг хуудасны хэрэглээний танилцуулга

• Уламжлалт нэг хуудас програм (SPA) гэж юу вэ? Web Өргөдөл
• SPA ажлын урсгал
• Нэг хуудас програмын Advantages HTML5 History API
• SPA сорилтууд
• Өнцгийн хураангуйг ашиглан ДЦГ-ыг хэрэгжүүлэх

Бүлэг 12. Өнцгийн бүрэлдэхүүн хэсэг чиглүүлэгч

• Бүрэлдэхүүн хэсэг чиглүүлэгч
• View Навигац
• Angular Router API
• Чиглүүлэгчийг идэвхжүүлсэн програм үүсгэх
• Чиглүүлсэн бүрэлдэхүүн хэсгүүдийг байршуулах
• Холбоос болон товчлуур ашиглан навигаци хийх
• Програмчлалын навигаци
• Дамжуулах замын параметрүүд
• Маршрутын параметрүүдээр жолоодож байна
• Маршрутын параметрийн утгыг олж авах
• Чиглэлийн параметрийг синхроноор сэргээж байна
• Маршрутын параметрийг асинхроноор сэргээж байна
• Асуулгын параметрүүд
• Асуулгын параметрүүдийг нийлүүлж байна
• Асуулгын параметрүүдийг асинхроноор татаж авах
• Гарын авлагатай холбоотой асуудлууд URL оруулах болон Хавчуурга
• Дүгнэлт

Бүлэг 13. Нарийвчилсан HTTP клиент

• Хүсэлтийн сонголтууд
• HttpResponse объектыг буцааж байна
• Хүсэлтийн толгой хэсгийг тохируулах
• Ажиглагдах шинэ зүйлийг бий болгох
• Энгийн ажиглалтын хэлбэрийг бий болгох
• Ажиглах боломжтой бүтээгчийн арга Ажиглах боломжтой операторууд
• Газрын зураг ба шүүлтүүрийн операторууд
• flatMap() оператор
• Tap() оператор
• zip() комбинатор
• HT TP хариуг кэшлэх
• Дараалсан HT TP дуудлага хийх
• Зэрэгцээ дуудлага хийх
• catchError() ашиглан алдааны объектыг өөрчлөх
• Дамжуулах хоолой дахь алдаа
• Алдаа сэргээх
• Дүгнэлт

Бүлэг 14. Өнцгийн модулиуд

• Яагаад өнцгийн модуль гэж?
• Модулийн ангийн анатоми
• @NgModule шинж чанарууд
• Онцлог модулиуд
• Example Модулийн бүтэц
• Домэйн модуль үүсгэх
• Чиглүүлсэн/Чилүүлэлтийн модулийн хос үүсгэх
• Үйлчилгээний модуль үүсгэх
• Нийтлэг модулиудыг бий болгох

Бүлэг 15. Нарийвчилсан чиглүүлэлт

• Чиглүүрийг идэвхжүүлсэн функцийн модуль
• Онцлог модулийг ашиглах
• Онцлог модулийг залхуу ачаалж байна
• Онцлог модулийн бүрэлдэхүүн хэсгүүдийн холбоос үүсгэх
• Залхуу ачаалах тухай дэлгэрэнгүй
• Урьдчилан ачаалах модулиудыг
• Өгөгдмөл маршрут
• Оруулагч тэмдэгт маршрутын зам
• руу дахин чиглүүлэх
• Хүүхдийн замууд
• Хүүхдийн замыг тодорхойлох
• Хүүхдийн маршрутын хувьд
• Хүүхдийн маршрутын холбоосууд
• Навигацийн харуулууд
• Хамгаалалтын хэрэгжилтийг бий болгох
• Маршрут дахь харуулуудыг ашиглах
• Дүгнэлт

Бүлэг 16. Нэгжийн туршилтын өнцгийн хэрэглээ

• Өнцгийн олдворуудыг шалгах нэгж
• Тестлэх хэрэгсэл
• Туршилтын ердийн алхамууд
• Туршилтын үр дүн
• Jasmine Test Suites
• Мэлрэг цэцгийн үзүүлэлтүүд (нэгжийн туршилтууд)
• Хүлээлт (баталгаа)
• Тохируулагчид
• ExampMatchers ашиглах
• Үл хөдлөх хөрөнгийг ашиглах
• Unit Test Suites-ийн тохиргоо болон задлах
• Example of beforeEach болон AfterEach функцууд
• Өнцгийн туршилтын модуль
• Example өнцгийн туршилтын модуль
• Үйлчилгээг туршиж байна
• Үйлчилгээний инстанцыг нэвтрүүлэх
• Синхрон аргыг турших
• Асинхрон аргыг турших
• Mock HT TP Client ашиглах
• Лаазалсан хариултыг нийлүүлж байна
• Бүрэлдэхүүн хэсгийг турших
• Бүрэлдэхүүн хэсгийн туршилтын модуль
• Бүрэлдэхүүн хэсэг үүсгэх
• 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. HT TP Client боловсруулах
• Лаборатори 11. Хоолойг ашиглах
• Лаборатори 12. Чиглүүлэгчийн лаборатори ашиглан нэг хуудасны үндсэн програм 13. Нэг хуудасны програм (SPA) бүтээх
• Лаборатори 14. Нарийвчилсан HT TP Client
• Лаборатори 15. Angular Bootstrap ашиглах
• Лаборатори 16. Залхуу модулийг ачаалж байна
• Лаборатори 17. Нарийвчилсан чиглүүлэлт
• Лаборатори 18. Нэгжийн туршилт
• Лаборатори 19. Өнцгийн программуудыг дибаг хийх

ХЭНД ЗОРИУЛСАН СУРГАЛТ ВЭ?
Энэхүү сургалт нь Angular 12 хөгжүүлэлтийн үндсийг сурч, бүтээхэд ашиглах шаардлагатай хэн бүхэнд зориулагдсан болно web програмуудыг шууд. Мөн бид энэхүү сургалтыг том бүлгүүдэд хүргэж, тохируулах боломжтой бөгөөд ингэснээр танай байгууллагын цаг, мөнгө, нөөцийг хэмнэнэ.

УРЬДЧИЛСАН ШААРДЛАГА
Web Энэхүү өнцгийн курсээс хамгийн их ашиг хүртэхийн тулд HTML, CSS болон JavaScript ашиглан хөгжүүлэлтийн туршлага шаардлагатай. DOM хөтөчийн талаархи мэдлэг нь бас хэрэгтэй. AngularJS эсвэл Angular-ийн аль нэг хувилбар дээр Angular-ийн өмнөх туршлагатай байх шаардлагагүй.
https://www.lumifywork.com/en-au/courses/angular-12-programming/

Баримт бичиг / нөөц

LUMIFY WORK Angular 12 Програмчлал [pdf] Хэрэглэгчийн гарын авлага Angular 12 програмчлал, өнцөг, 12 програмчлал, програмчлал

Лавлагаа

• Хэрэглэгчийн гарын авлага