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

ЭМНЕ ҮЧҮН БУЛ КУРСТУ ОКУУ КЕРЕК

Бул комплекстүү Angular 12 программалоо курсу теориялык үйрөнүү жана практикалык лабораториялардын жыйындысы болуп саналат, анда Angulara киришүү, андан кийин TypeScript, компоненттер, директивалар, кызматтар, HTTP Client, тестирлөө жана мүчүлүштүктөрдү оңдоо кирет.
Курс сиз дароо жумушуңузга колдонсоңуз болот, пайдалуу жана ишке ашуучу маалыматтарга бай. Негизги Angular 12 иштеп чыгуунун негиздерин үйрөнүңүз, мисалы, жооп берүүчү бир беттик браузер колдонмолору webсайттар жана гибриддик мобилдик тиркемелер.
Эскертүү: Биз ошондой эле Anguların башка версиялары боюнча тренинг өткөрө алабыз. Сураныч, суроо же кызыгууңузду каттоо үчүн биз менен байланышыңыз.

ЭМНЕ ҮЙРӨНӨСҮҢ
Бул курсту ийгиликтүү аяктагандан кийин, сиз:

• Typescript аркылуу бир беттик бурчтук тиркемелерди иштеп чыгуу
• Толук Angular өнүктүрүү чөйрөсүн орнотуу
• Компоненттерди, Директиваларды, Кызматтарды, Түтүктөрдү, Формаларды жана Ыңгайлаштырылган Валидаторлорду түзүңүз
• Observables аркылуу өркүндөтүлгөн тармактык маалыматтарды издөө тапшырмаларын аткарыңыз web Angular HT TP Client Колдонуучу кызматтарды колдонуу менен push-маалымат байланыштары WebSockets протоколу
• Маалыматтарды форматтоо үчүн бурчтуу түтүктөр менен иштөө
• Өркүндөтүлгөн бурчтук компонент роутер функцияларын колдонуңуз
• Камтылган куралдарды колдонуу менен бурчтук колдонмолорду сынап көрүңүз жана мүчүлүштүктөрдү оңдоо.

КУРС ТЕМАЛАРЫН

1-бөлүм. Angular менен таанышуу

• Angular деген эмне?
• Бурчтук алкактын борбордук өзгөчөлүктөрү ылайыктуу колдонуу учурлары
• Бурчтук тиркеменин курулуш блоктору. Бурчтуу тиркеменин негизги архитектурасы.
• Колдонмону иштеткен бурчтук тиркеменин анатомиясы
• Түпкү мобилдик колдонмолор үчүн бурчтук тиркемени түзүү жана жайылтуу
• Жыйынтык

2-бөлүм. TypeScriptге киришүү

• Angular TypeScript синтаксиси менен колдонуу үчүн программалоо тилдери
• Программалоочу редакторлор
• Түр системасы – Өзгөрмөлөрдү аныктоо
• Тип системасы – массивдерди аныктоо
• Негизги примитивдүү түрлөрү
• Функцияларды териңиз
• Type Inference
• Класстарды аныктоо
• Класс методдору
• Көрүнүүнү көзөмөлдөө
• Класстын конструкторлору
• Класстын конструкторлору – Кошумча форманын башталбаган талаалары
• Interfaces
• ES6 модулдары менен иштөө
• var vs let
• Жебе функциялары
• Arrow Function Compact Syntax Template Strings
• Класста генериктер
• Generics in Function
• Жыйынтык

3-глава. Компоненттер

• Компонент деген эмне?
• Example Component
• Angular CLI колдонуу менен компонентти түзүү
• Компонент классы
• @Component Decorator
• Компонентти анын модулунун компонентинин шаблонуна каттоо
• Example: HelloComponent шаблону
• Example: HelloComponent классы компонентти колдонуу
• Колдонмону иштетиңиз
• Компонент иерархиясы
• Колдонмонун түпкү компоненти
• The Bootstrap File
• Component Lifecycle Hooks Example Lifecycle Hooks
• CSS стилдери
• Жыйынтык

4-глава. Компоненттин шаблондору

• Шаблондор
• Үлгү жайгашкан жер
• Мурут {{ }} синтаксиси
• DOM элементинин касиеттерин орнотуу
• Элементтин текстин жөндөө
• Event Binding
• Expression Event Handler
• Демейки иштетүүнү болтурбоо
• Атрибуттар директивалары
• CSS класстарын өзгөртүү менен стилдерди колдонуңуз
• Example: ngClass
• Стильдерди түздөн-түз колдонуу
• Структуралык директивалар
• Шарттуу түрдө аткаруу шаблону
• Example: ngIf
• ngFor аркылуу цикл
• ngLocal Variables үчүн
• Коллекцияны башкаруу Example – бир нерсени жок кылуу
• ngSwitch Топтоо элементтери менен элементтерди алмаштыруу ngFor менен нерсеге көз салуу
• Үлгү шилтемеси өзгөрмөнүн корутундусу

5-глава. Компоненттер аралык байланыш

• Коммуникациянын негиздери
• Берилиштер агымынын архитектурасы
• Баланы маалыматтарды кабыл алууга даярдоо
• Ата-энеден дайындарды жөнөтүү
• Профильдерди орнотуу жөнүндө көбүрөөк
• Компоненттен күйүү окуясы
• @Output() Мисample – Child Component @Output() Мисample – Ата-эне компоненти
• Толук эки тараптуу байланыш
• Ата-энеде эки тараптуу маалымат байланышын орнотуу
• Жыйынтык

6-глава. Калыпка негизделген формалар

• Калыпка негизделген формалар
• Формалар модулун импорттоо
• Негизги мамиле
• Форманы орнотуу
• Колдонуучунун киргизүүсү алынууда
• ngForm атрибуту алынып салынууда
• Форманы инициализациялаңыз
• Эки тараптуу маалымат байланышы
• Форманы текшерүү
• Бурчтук текшерүүчүлөр
• Класстарды колдонуу менен текшерүү абалын көрсөтүү Кошумча киргизүү түрлөрү
• Белгилөө кутучалары
• (Төмөн түшүүчү) талааларды тандаңыз
• Тандоо (Төмөн түшүүчү) Дата талаалары үчүн көрсөтүү параметрлери
• Радио баскычтары
• Жыйынтык

7-глава. Реактивдүү формалар

• Reactive Forms Overview
• The Building Blocks
• ReactiveFormsModule импорттоо
• Форма куруу
• Шаблонду долбоорлоо
• Киргизилген маанилерди алуу
• Киргизүү талааларын инициализациялоо
• Форма баалуулуктарын орнотуу
• Киргизүү өзгөрүүлөрүнө жазылуу
• Валидация
• Камтылган текшерүүчүлөр
• Текшерүү катасы көрсөтүлүүдө
• Ыңгайлаштырылган текшерүүчү
• Ыңгайлаштырылган текшерүүчү колдонуу
• Ыңгайлаштырылган текшерүүчүгө конфигурацияны берүү
• FormArray - Киргизүүлөрдү динамикалык кошуу
• FormArray – Компонент классы
• FormArray – шаблон
• FormArray – Маанилер
• Sub FormGroups – Компонент классы
• Sub FormGroups – HTML шаблону
• Эмне үчүн Sub FormGroups колдонуңуз
• Жыйынтык

8-глава. Кызматтар жана көз карандылык инъекциясы

• Кызмат деген эмне?
• Негизги кызматты түзүү
• Кызмат классы
• Көз карандылык инъекциясы деген эмне?
• Кызмат инстанциясын киргизүү
• Инжекторлор
• Инжектор иерархиясы
• Кызматты Root Injector менен каттоо
• Компоненттин инжектору менен кызматты каттоо
• Функция модулунун инжектору менен кызматты каттаңыз
• Кызматты кайдан каттоо керек?
• Башка артефакттарга көз карандылык инъекциясы, альтернативалуу ишке ашыруу Көз карандылык инъекциясы жана @Host
• Көз карандылык инъекциясы жана @Optional
• Жыйынтык

9-бөлүм. HTTP Client

• Angular HT TP кардары
• T he HT TP Client колдонуу – Бүттүview
• HttpClientModule импорттоо
• HttpClient колдонуу кызматы
• GET өтүнүчүн жасоо
• Байкоочу объект эмне кылат?
• Кызматты компонентте колдонуу
• PeopleService Кардар компонентинин катасын иштетүү
• Ката объектин ыңгайлаштыруу
• POST өтүнүчүн жасоо
• PUT өтүнүчүн жасоо
• ӨЧҮРҮҮ өтүнүчүн жасоо

10-глава. Түтүктөрдү жана маалыматтарды форматтоо

• Түтүктөр деген эмне?
• Камтылган түтүктөр
• HTML Template Chaining түтүктөрүндө түтүктөрдү колдонуу
• Эл аралык түтүкчөлөр (i18n) Locale Data Loading
• Дата Pipe
• Сан түтүк
• Валюта түтүгү
• Ыңгайлаштырылган түтүктү түзүү
• Custom Pipe Example
• Ыңгайлаштырылган түтүктөрдү колдонуу
• ngFor менен түтүктү колдонуу
• Фильтр түтүгү
• Түтүк категориясы: Таза жана таза эмес
• Жыйынтык
• Pure Pipe Example
• Таза эмес түтүк Example
• Жыйынтык

11-глава. Бир беттик тиркемелерге киришүү

• Бир беттик колдонмо (SPA) салттуу деген эмне Web Колдонмо
• SPA Workflow
• Single Page Application Advantages HTML5 History API
• SPA чакырыктары
• SPAнын бурчтук кыскача баяндамасын колдонуу

12-глава. Бурчтук компоненттүү роутер

• Компоненттик роутер
• View Навигация
• Angular Router API
• Роутер иштетилген тиркемени түзүү
• Багытталган компоненттерди жайгаштыруу
• Шилтемелерди жана баскычтарды колдонуу менен навигация
• Программалык навигация
• Өтүү маршрутунун параметрлери
• Маршрут параметрлери менен навигация
• Маршруттун параметринин маанилерин алуу
• Маршруттун параметрин синхрондуу түрдө алуу
• Маршруттун параметрин асинхрондук түрдө алуу
• Суроо параметрлери
• Суроо параметрлерин берүү
• Суроо параметрлерин асинхрондук түрдө алуу
• Кол менен көйгөйлөр URL кирүү жана Bookmarking
• Жыйынтык

13-бөлүм. Өркүндөтүлгөн HTTP Client

• Сурам опциялары
• HttpResponse объектисин кайтаруу
• Сурамдын баштарын орнотуу
• Жаңы байкоолорду түзүү
• Жөнөкөй байкоону түзүү
• Байкоочу конструктор методу Байкоочу операторлор
• Карта жана чыпка операторлору
• flatMap() оператору
• tap() оператору
• zip() Combinator
• HT TP жоопту кэштөө
• Кезектеги HT TP чалууларын жасоо
• Параллель чалууларды жасоо
• catchError() менен Ката объектисин ыңгайлаштыруу
• Түтүктөгү ката
• Ката калыбына келтирүү
• Жыйынтык

14-глава. Бурчтук модулдар

• Эмне үчүн бурчтук модулдар?
• Модул классынын анатомиясы
• @NgModule касиеттери
• Функция модулдары
• Example Module Structure
• Домен модулун түзүү
• Багытталган/Багыттоо модулунун жуптарын түзүңүз
• Кызмат модулун түзүү
• Жалпы модулдарды түзүү

15-глава. Өркүндөтүлгөн маршруттоо

• Багыттоо иштетилген өзгөчөлүк модулу
• Функция модулун колдонуу
• Функция модулун жалкоо жүктөө
• Функциянын модулунун компоненттери үчүн шилтемелерди түзүү
• Lazy Loading жөнүндө көбүрөөк
• Алдын ала жүктөө модулдары
• Демейки Маршрут
• Wildcard Маршрут жолу
• багыттоо
• Балдар маршруттары
• Балдардын маршруттарын аныктоо
• Балдар маршруттары үчүн
• Балдар маршруттары үчүн шилтемелер
• Навигация сакчылары
• Guard ишке ашыруу түзүү
• Маршрутта күзөтчүлөрдү колдонуу
• Жыйынтык

16-глава. Бурчтук колдонмолорду тестирлөө

• Бурчтук артефакттарды сыноо
• Testing Tools
• Типтүү тестирлөө кадамдары
• Сыноонун натыйжалары
• Jasmine Test Suites
• Жасминдин мүнөздөмөлөрү (бирдик сыноолору)
• Күтүүлөр (тастыктамалар)
• Матчтар
• Examples of Use Matchers
• Менчик эмес колдонуу
• Unit Test Suites'те орнотуу жана бузуу
• Example of beforeEach and afterEach Functions
• Бурчтук сыноо модулу
• Exampбурчтук тест модулу
• Кызматты сыноо
• Кызмат инстанциясын киргизүү
• Синхрондук методду сынап көрүңүз
• Асинхрондук методду сынап көрүңүз
• Mock HT TP Client колдонуу
• Консерваланган жооп берүү
• Компонентти сыноо
• Компоненттик тест модулу
• Компоненттин инстанциясын түзүү
• ComponentFixture классы
• Негизги компонент тесттери
• DebugElement классы
• Колдонуучунун өз ара аракеттенүүсүн симуляциялоо
• Жыйынтык

17-глава. Мүчүлүштүктөрдү оңдоо

• Бүттүview бурчтук мүчүлүштүктөрдү оңдоо
• ViewМүчүлүштүктөрдү оңдоочуга TypeScript кодун киргизүү
• Мүчүлүштүктөрдү оңдоочу ачкыч сөздү колдонуу
• Мүчүлүштүктөрдү оңдоо журналы
• Angular DevTools деген эмне?
• Angular DevTools колдонуу
• Бурчтук DevTools - Компоненттик структура
• Angular DevTools – Өзгөртүү аныктоо аткарылышын
• Синтаксис каталарын кармоо
• Жыйынтык

Лабораториялык көнүгүүлөр

• Лаборатория 1. Бурчтукка киришүү
• Лаборатория 2. TypeScriptге киришүү
• Лаборатория 3. Компоненттерге киришүү
• Лаборатория 4. Компоненттин шаблону
• Лаборатория 5. Сүрөт галереясынын компонентин түзүү
• Лаборатория 6. Шаблонго негизделген форма
• Лаборатория 7. Түзөтүү формасын түзүңүз
• Лаборатория 8. Реактивдүү форма
• Лаборатория 9. Кызматты иштеп чыгуу
• Лаборатория 10. HT TP кардарын иштеп чыгуу
• Лаборатория 11. Түтүктөрдү колдонуу
• Лаборатория 12. Роутер лабораториясын колдонуу менен негизги бир беттик тиркеме
• Лаборатория 14. Advanced 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] Колдонуучунун колдонмосу Бурчтук 12 программалоо, бурчтук, 12 программалоо, программалоо

Шилтемелер

• User Manual