Изображение на Aphinya Dechalert Озаглавен: Червено чудовище учене ъглово

19 неща, които трябва да се научите, за да станете ефективен ъглов разработчик

Изчерпателно ръководство за това как да станете професионалист в Angular

Приложението todo е еквивалент на приложението "Hello world" за разработка на преден план. Въпреки че обхваща CRUD аспекта на създаване на приложение, той често само надраска повърхността на това, което рамка или библиотека може да направи.

Ъгълът изглежда винаги се променя и актуализира - но в действителност има някои неща, които остават същите. Ето връщане на основните понятия, които трябва да научите, когато става въпрос за Angular, за да използвате правилно JavaScript рамката.

Има какво да научим, когато става въпрос за Angular и много от нас се забиват в кръга за начинаещи, просто защото не знаем къде да отидем или какво да търсим. Това е изчерпателно ръководство (и кратко обобщение на самия Angular), което ми се искаше, когато за първи път започнах с Angular 2+.

1. Модулна ъглова архитектура

На теория можете да поставите целия си Angular код на една страница и в една масивна функция, но това не се препоръчва, нито е ефикасен начин да структурирате кода си и побеждавате целта на съществуването на Angular.

Angular използва концепцията за модули активно като част от архитектурата на рамката. Това е позоваване на колекцията от код, който има една единствена причина за съществуването. Вашето приложение Angular по същество се състои от модули - някои са самостоятелни, а други споделяни.

Има няколко начина за структуриране на вашите модули в приложението ви и копаенето в различните архитектурни структури също може да ви помогне да определите как ще мащабирате приложението си, докато расте. Той може също да помогне за изолиране на вашия код и да предотврати появата на свързване на код.

Какво да Google:

  • Ъглови модели на архитектура
  • Мащабируема ъглова архитектура на приложение

Моето мнение по темата:

  • Какво означава Модулна архитектура в Ъгловата дори?

2. Еднопосочен поток на данни и неизменяемост

Назад в Angular 1, двупосочното подвързване превзе сърцата на много разработчици. По същество това беше една от първоначалните продажби на Angular. Въпреки това, с времето започна да създава проблеми по отношение на производителността, когато приложението започна да става по-сложно.

Оказва се, че всъщност нямате нужда от двупосочно обвързване навсякъде.

Двупосочното обвързване все още е възможно в Angular 2+, но само когато изрично се поиска от разработчика - по този начин принуждава човека зад кода да мисли за посоката и потока на своите данни. Той също така позволява на приложението да стане по-гъвкаво с данни, като определя как трябва да протичат данните.

Какво да Google:

  • Най-добри практики за ъглов поток на данни,
  • Еднопосочен поток в ъглов,
  • Предимства на един начин на обвързване

Моето мнение по темата:

  • Приказката за еднопосочния поток на данни в ъгъл

3. Директиви за атрибутите и структурите

Директива е разширение на HTML чрез персонализирани елементи. Директивите за атрибути ви позволяват да променяте свойствата на даден елемент. Структурните директиви променят оформлението чрез добавяне или премахване на елементи от DOM.

Например, ngSwitch и ngIf са структурни директиви, тъй като оценява параметрите и определя дали части от DOM трябва да съществуват или не.

Директивите за атрибутите са персонализирано поведение, прикрепено към елемента, компонента или други директиви.

Научаването как да използвате тези две директиви може да разшири възможностите на приложението ви и да намали количеството на дублирания код във вашия проект. Директивите за атрибути също могат да помогнат за централизиране на определени поведения, които се използват в различни части на приложението.

Какво да Google:

  • Ъглови директиви за атрибути,
  • Ъглови структурни директиви
  • Ъглови структурни модели на директива

4. Куки за жизнен цикъл на компонента

Всяко парче софтуер има свой жизнен цикъл, който определя как нещо се създава, рендерира и след това се премахва. Angular има компонентен жизнен цикъл, който върви нещо подобно:

създаване → рендериране → визуализация на деца → проверете при промяна на свойствата, свързани с данни → унищожаване → премахване от DOM

Имаме възможността да се закачаме за ключови моменти в рамките на този цикъл и да го насочваме към конкретни моменти във време или събитие. Това ни позволява да създаваме подходящи реакции и да конфигурираме поведение според различните фази на съществуването на компонента.

Например, може да се наложи да заредите някои данни, преди страницата да бъде визуализирана. Можете да направите това чрез ngOnInit (). Или може би трябва да прекъснете връзката с база данни. Това може да стане чрез ngOnDestroy ().

Какво да Google:

  • Ъглови куки за жизнен цикъл
  • Жизнен цикъл на компонента

5. Http и наблюдаеми услуги

Това всъщност не е специфична за ъглите, а по-скоро нещо от ES7. Ъгъл току-що се случи, за да го приложи като част от възможностите за поддръжка на рамката и разбирам, че това също се превежда добре на React, Vue и всяка свързана с JavaScript библиотека или рамка.

Наблюдаваните услуги са модели, които ви позволяват ефективно да се справяте с данните - ви позволяват да анализирате, променяте и поддържате данни в система, базирана на събития. Не можете наистина да избягате от Http и Observables, защото всичко е данни.

Какво да Google:

  • Наблюдавани от JavaScript модели
  • Ъглов HTTP и наблюдаеми
  • ES7 наблюдавана функция

6. Интелигентна / тъпа компонентна архитектура

Когато пишем нашите Angular приложения, ние сме склонни да влагаме всичко в компонента. Това обаче не е най-добрата практика. Идеята за интелигентни / тъпи компоненти в Angular е нещо, за което трябва да се говори повече, особено в начинаещи кръгове.

Дали даден компонент е умен / тъп, определя ролята му в голямата схема на приложението. Тъмните компоненти често са без гражданство с поведения, които са лесни за предвиждане и разбиране. Направете своя компонент тъп, когато е възможно.

Умните компоненти са по-трудни за разбиране, защото са включени входове и изходи. За да използвате правилно възможностите на Angular, погледнете в интелигентната / тъпа компонентна архитектура. Той ще ви даде модели и нагласи за това как да подходите към вашия код и отношенията му помежду си.

Какво да Google:

  • Умни / неми ъглови компоненти
  • Безпарни компоненти без гражданство
  • Презентационни компоненти
  • Интелигентни компоненти в Angular

7. Структура на приложението и най-добри практики

CLI може да ви отведе досега само когато става въпрос за структура и най-добри практики. Изграждането на Angular приложение (или всяко приложение като цяло) е като изграждането на къща. Има зададени процеси, които са оптимизирани от общността през годините, които ще доведат до най-ефективното и ефикасно приложение.

Ъгловата не е изключение.

Повечето оплаквания към Angular от тези, които се опитват да го научат, често се дължат на липса на структурни познания; синтаксисът е лесен за избиране и е категоричен и ясен. Структурните знания за приложението обаче изискват разбиране на контекста, изискванията и как всичко се вписва заедно на концептуално и практическо ниво. Научаването на различните потенциални структури за приложения за Angular и техните най-добри практики ще ви дадат перспектива как да изградите своето приложение.

Какво да Google:

  • Единични приложения за репо ъгъл
  • Ъглови библиотеки, ъглови пакети
  • Ъглови снопове
  • Ъглови микро приложения
  • Monorepo

8. Синтаксис, обвързващ шаблона

Обвързването е черешката на рамката на JavaScript. Това е и една от причините за съществуването на първо място. Обвързването на шаблона преодолява пространството между статичния HTML и JavaScript. Ъгловият синтаксис за обвързване на шаблони действа като фасилитатор между тези две технологии.

След като научите как и кога да ги използвате, превръщането на някога статична страница в нещо интерактивно става много по-лесно и по-малко досадно. Разгледайте различните сценарии за обвързване като свързване на собственост, събития, интерполация и двупосочно обвързване.

Какво да Google:

  • Ъглово свързване на свойството
  • Ъглово обвързване на събитието
  • Ъглово двупосочно свързване, ъглова интерполация
  • Ъглови преминаващи константи

9. Функционални модули и маршрутизация

Функционалните модули се подценяват, когато става въпрос за Angular. Това всъщност е наистина фантастичен начин за организиране и поставяне на ограда на множество бизнес изисквания. Той ограничава отговорностите и помага да се предотврати замърсяването на кода в дългосрочен план.

Има пет вида функционални модули (домейн, маршрутизация, маршрутизация, услуга и джаджа) и всеки се занимава с определен тип функционалност. Научаването да използвате функционални модули във връзка с маршрутизацията може да ви помогне да създадете дискретни набори от функционалности и да приложите добро и ясно разделяне на проблемите за вашето приложение.

Какво да Google:

  • Ъглови модулни модули
  • Споделени структурни характеристики в Angular
  • Доставчици на модулни функции
  • Мързеливо зареждане с модули за маршрутизация и функции

10. Форми и валидиране (реактивни форми и валидатори)

Формите са неизбежна част от всяко предно развитие.

И с формулярите идва валидиране.

Има различни начини за конструиране на интелигентни, управлявани от данни форми, когато става въпрос за Angular. Най-популярната итерация на формите са реактивните форми. Има обаче и други опции, а именно задвижвани от шаблони и персонализирани валидатори.

Научаването как валидаторите работят съвместно с CSS ще ви помогне да ускорите работния си процес и да превърнете приложението ви в готово пространство за обработка на грешки.

Какво да Google:

  • Валидиране на ъгловата форма
  • Валидиране на шаблона
  • Реактивно потвърждаване на формата
  • Синхронизирайте и асинхронизирайте валидаторите в Angular
  • Вградени валидатори
  • Ъглови валидатори по избор
  • Удостоверяване на кръстосано поле

11. Програмиране на съдържанието

Angular има нещо, наречено проекция на съдържанието, което е способността ефективно да се предават данни от родителските и дъщерните компоненти. Въпреки че това може да звучи сложно, всъщност е действието да се поставят изгледи в изгледите, за да се генерира главен изглед.

Често разбираме проекция на съдържание на повърхностно ниво - когато гнездим детски изгледи вътре в родителски изглед. За да разширим разбирането си обаче, трябва да разберем и как се предават данни между различни гледни точки. Тук е полезно разбирането на проекцията на съдържанието.

Разбирането на проекцията на съдържанието може да ви помогне да определите потока на данните на приложението си и къде се случва неговата изменяемост.

Какво да Google:

  • Ъглова проекция на съдържание
  • Ъглова връзка родител-дете
  • Съотношения на данни с ъглов изглед

12. onНатиснете промяна на промяната

По подразбиране Angular използва стратегия за откриване на промяна по подразбиране. Това означава, че компонентите винаги ще бъдат проверявани. Въпреки че няма нищо лошо в използването на стандартната настройка, това може да бъде неефективен начин за откриване на промяна.

За малки приложения скоростта и производителността са добре. Въпреки това, след като приложението ви достигне определен размер, нещата могат да станат доста тромави, особено в по-старите браузъри.

onPush стратегията за откриване на промяна ще ускори приложението значително, тъй като зависи от конкретни задействания, а не от постоянна проверка, за да се види дали нещо се е случило.

Какво да Google:

  • Ъглово разпознаване при натискане

13. Маршрутна охрана, предварително зареждане, мързеливо зареждане

Ако имате някакъв вид вход, ще ви трябва охрана на маршрута. Идеята, че можете да защитите определени изгледи от неоторизирани изгледи, е задължително изискване в много приложения. Маршрутните предпазители действат като интерфейс между вашия рутер и искания маршрут. Именно този, който взема решение, определя дали до определен маршрут е разрешен достъп или не. Има много в света на охраната на маршрутите, които трябва да бъдат проучени - а именно маршрутни решения, базирани на неща като изтичане на маркер, удостоверяване на роли на потребители и маршрутни ценни книжа.

Предварителните зареждания и мързеливо зареждане също могат да подобрят практическата работа на потребителя, като ускорят времето за зареждане на приложението ви. Също така е добре да се отбележи, че предварителните зареждания и мързеливо зареждане са нещо повече от решаването дали ще заредите определен набор от изображения или не. Той може също да подобри вашите пакетни архитектури и да зареди различни части от приложението ви, които могат да съществуват в различни обхвати и домейни.

Какво да Google:

  • Ъглови предпазители,
  • Ъглови модели за автентификация
  • Ъглови модули за предварително зареждане и мързеливо зареждане
  • Ъглови защитени модели на маршрути

14. Тръби по поръчка

Форматирането на данни никога не е било по-лесно с ъглови тръби. Докато голяма част от предварително конфигурираните и извън тръбните кутии обхваща много неща, като дати, валута, проценти и символи, това не покрива всичко, което някога ще ви е необходимо.

Именно тук идват по поръчка тръби. Можете лесно да създадете свои собствени филтри и да трансформирате формати на данни по ваш вкус. Наистина е лесно да го направите и да го проверите.

Какво да Google:

  • Ъглови тръби по поръчка

15. @viewChild и @ContentChild Decorators

viewChild и contentChild са начини, по които вашият компонент може да разговаря един с друг. Смисълът на Angular е, че имате множество компоненти, които са съставени заедно като пъзел, но този пъзел наистина не може да направи много, ако парчетата са изолирани едно от друго.

Точно тук влизат viewChild и contentChild. Научаването да използвате тези два декоратора ви дава възможност за достъп до свързани компоненти. Това прави възможно задачата за споделяне на данни по-лесна и възможен пренос на данни и събития, задействани от свързани компоненти.

Какво да Google:

  • Ъглови декоратори
  • viewchild и contentchild в Angular
  • Ъглово споделяне на данни за компонент

16. Динамични компоненти и ng-шаблон

Компонентите са градивните елементи на Angular. Не всички компоненти обаче са фиксирани и трябва да бъдат създадени в движение, а не предварително компилирани.

Динамичните компоненти позволяват на приложението да създава определени компоненти в движение. Статичните компоненти предполагат, че нещата няма да се променят. Предвидимо е с очаквани входове и изходи.

Динамичните компоненти обаче се предоставят при необходимост. Те стават доста удобни при създаването на приложение, което може да слуша външни източници и техните актуализации или е реакция на действия, които са се случили на страницата.

Какво да Google:

  • Динамични компоненти в ъглови
  • Динамични компоненти ng-шаблони

17. @Host @Hostbinding и exportAs

@Host, @Hostbinding и exportAs са декоратори на ъглови директиви, които разширяват параметрите, към които е прикрепен. Също така ви дава възможност да създавате кратки шаблони, които да експортирате за консумация в рамките на приложението.

Ако горното звучи объркващо, трябва да започнете с търсене на ъглови директиви и тяхното предназначение за съществуващи. @Host, @Hostbinding и exportAs са характеристики на директивите, които помагат да се направи това, което е.

Какво да Google:

  • Модели на ъглови директиви,
  • @Host, @Hostbinding и exportAs в Angular

18. Управление на държавата с RxJs

Състоянието на вашето приложение в крайна сметка определя данните, които се показват на вашия потребител. Ако състоянието ви е сбъркано със спагети, има вероятност цялата ви структура на данни да се превърне в люспест и да се разпадне срещу всякакви промени.

Когато започнете да разбирате как работят държавите в Angular, ще разберете как и защо вашите данни се държат така, както е.

Докато Angular има собствена система за управление на държавата, RxJs е фантастичен метод за централизиране на държави и свързаните с тях данни. Данните могат да се изгубят във веригата на отношенията родител-дете. RxJs отделя това чрез създаване на централизиран магазин.

Какво да Google:

  • Ъглови RxJs
  • Принципи Flux / Redux
  • Принципи на ъгловото управление на държавата

19. Инжектиране на зависимости и зони

Инжектирането на зависимост е масово понятие, така че ако не сте много добре запознати с идеята, това е едно от нещата, които наистина трябва да потърсите. Има множество начини за чисто създаване на инжекции в зависимост от Angular, постигнати най-вече чрез конструктора. Това е начин да импортирате само нещата, които са ви необходими и следователно да увеличите ефективността на приложението си, а не да зареждате всичко под слънцето.

Подобно на инжектирането на зависимости, зоните също са идея, която също не е изключителна за Angular. Това е начин приложението да открие асинхронни задачи от началото до края. Това е важно, тъй като тези задачи за асинхронизация имат силата да променят вътрешните състояния на приложението и следователно изгледа. Зоните улесняват процеса на откриване на промяна.

Какво да Google:

  • Ъглови зони
  • Инжекции в зависимост
  • Ъглова DI

Заключителни думи

Ъгловата е масивна тема. Докато изграждането на ъглови приложения може да помогне на процеса на обучение, понякога просто не знаете какво не знаете. Трудно е да разбереш неизвестното, когато започваш и да се надяваме, че това кратко ръководство ви даде известно просветление отвъд обичайните ви ъглови уроци, заедно с по-голям и цялостен поглед върху Angular като цяло.

Нека останем свързани и се присъединете към страхотния ми списък за бюлетин от уебсайтове. Благодаря ви за четенето.❤

Aphinya