Работа с React почти год и знакомство с библиотекой были для меня освежающим опытом, так как это была моя первая клиентская библиотека. Я пришел из C++ и работал с настольными приложениями в течение первых 3 лет своей карьеры, а затем прыгнул в удивительный мир самого Интернета. Не зная ни одной библиотеки JS, я запачкал руки непосредственно с ReactJS, и это было невероятное путешествие.

Работа в стартапе имеет свои преимущества, одно из них — работа в разных доменах и библиотеках, фреймворках. Смена времен (клиентов) дала мне возможность изучить новейшего игрока в городе (не считая его предшественника) Angular. К моменту, когда я начал с ним работать, фреймворк уже прошел 5 основных релизов. Наша команда решила выбрать последнюю для нашего клиента. Кто бы не хотел?

Теперь, прежде чем я начну писать об Angular, я хотел бы немного рассказать об истории трех основных игроков в городе. Vue, React и Angular. Все началось в 2009 году, когда AngularJS вошел в нашу жизнь и изменил наше отношение к веб-разработке. Принося с собой самое большое изменение игры, называемое двусторонней привязкой данных.

2013 год ознаменовался выходом React на Facebook. Он был представлен как библиотека представлений на основе компонентов, запустив феноменальную концепцию записи представления в отдельные компоненты и повторного использования его в разных частях путем встраивания в другие компоненты. В следующем году был представлен Vue, прогрессивный фреймворк. Он вводил новые функции по мере необходимости, делая кривую обучения действительно прогрессивной по своей природе. Angular2 был выпущен в 2016 году, полностью переписав своего предшественника. Он также представил компоненты как представление. Его можно охарактеризовать как самоуверенный фреймворк. Я чувствую, что это хорошо, так как мне не нужно думать, какое решение является лучшим, поскольку мы можем использовать то, что предложено основной командой Angular. На сегодняшний день у него огромное сообщество, насчитывающее около полумиллиона участников и около 800 встреч. С точки зрения производительности все трое великолепны, вы можете обратиться к следующему веб-сайту, чтобы проверить их индивидуальные характеристики. Что касается размера пакета, Angular возглавляет таблицу. Теперь, если вам интересно, почему я говорю о React или Vue в блоге Angular, причина этого в том, почему мы выбрали Angular в первую очередь. Я могу сказать, что это не было большинством, это стало окончательным выбором с небольшим отрывом. Важно понимать, что он выиграл не потому, что он лучше, мы выбрали его, потому что он лучше удовлетворял наши потребности. Поскольку мы работали с внутренней командой разработчиков нашего клиента, и поскольку это требует определенного кода, мы сочли это более разумным для нашего сотрудничества. Людям, как правило, нравятся одни и не нравятся другие, но я бы посоветовал запачкать руки всеми тремя. Все они великолепны, и люди, стоящие за ними, проделали большую тяжелую работу, чтобы добиться того, что они имеют.

Теперь, когда я объяснил, почему Angular, теперь с чего начать с Angular. Преимущество обширного сообщества в том, что у него есть несколько учебных пособий и огромное количество блогов, охватывающих темы от новичков до продвинутого уровня. Я начал свое обучение с одного из популярных сайтов Udemy. У него есть отличный курс по Angular, который обновлен до последней версии Angular6 (на момент написания этого блога). Репетитор хорош в своем деле, и его знания о его курсах находятся на одном уровне. Рассказав о плюсах теперь о минусах, по моему у него есть только один, что он не бесплатный, ну как говорится хороших вещей нет. Я понимаю, что вы наверняка хотели бы попробовать свои силы перед погружением, и лучшим способом был бы бесплатный Курс YouTube репетитора, который дает полное введение.

Как уже упоминалось, материала очень много, поэтому я не хотел бы объяснять вам структуру. Но я хотел бы поделиться своими знаниями. Для начала важно иметь базовое представление о TypeScript. Angular широко использует его и может быть отражен в его документации. Это расширенный набор Javascript, и, наконец, он компилируется в простой файл javascript. TypeScript обеспечивает статическую проверку типов вашего JS-кода, что позволяет избежать ненужных ошибок во время выполнения. Лучшая часть TypeScript заключается в том, что он поддерживает новейшие функции JavaScript, в том числе из ES2016.
Другая библиотека, от которой сильно зависит Angular, — RxJS. Как указано в их документации, RxJS — это библиотека для реактивного программирования с использованием Observables, упрощающая создание асинхронного кода или кода на основе обратного вызова. Angular использует его для обработки всех своих асинхронных действий, и было бы очень полезно, если бы вы прошли через него один раз. Базового понимания достаточно, чтобы начать работу с Angular.

Я расскажу о некоторых основных функциях, которые важны для любого новичка. Я также предоставлю ссылки на блоги или учебные пособия, где вы можете узнать больше об этом.
Angular — это фреймворк на основе компонентов, который использует декораторы TypeScript для объявления компонентов. Компоненты — это в основном классы JS, которым предоставляются метаданные с помощью декоратора @Component(). Приложение Angular можно назвать деревом компонентов с родительско-дочерними отношениями между компонентами. Под капотом он использует представления, которые можно определить как наименьшую коллекцию элементов HTML, которые создаются и уничтожаются вместе. Связь между представлением и компонентом проста — одно представление для одного компонента и наоборот.

Фреймворки, основанные на компонентах, зависят от двух важных вещей:
— отправки данных дочерним компонентам.
— прослушивание исходящих от него событий.
Angular достигает этого с помощью декораторов @Input() и @Output(), тогда как название предполагает, что декоратор @Input должен отправлять данные в дочерние компоненты, а @Output — для передачи событий соответствующему родительскому компоненту.

Для отправки ввода он должен быть определен в квадратных скобках [], а для вывода (событий) — в скобках.

Другой важной особенностью компонента Angular являются его хуки жизненного цикла, которые позволяют нам выполнять определенную задачу в определенном событии жизненного цикла. Перехватчики жизненного цикла:
- ngOnInit: вызывается один раз при инициализации компонентов (только один раз).
- ngOnChanges: вызывается при изменении свойства @Input. Также вызывается при инициализации компонента перед ngOnInit.
- ngDoCheck — вызывается каждый раз, когда проверяются входные свойства компонента или директивы, и позволяет нам включать наши пользовательские проверки в отношении входных свойств.
- ngAfterContentChecked — вызывается после проверки содержимого
- ngAfterContentInit — вызывается после инициализации содержимого (только один раз)
— ngAfterViewChecked — вызывается после проверки представления
— ngAfterViewInit — вызывается после инициализации представления (только один раз) ).
- ngOnDestroy — вызывается перед уничтожением компонента, другими словами удалением из DOM.

Еще одна особенность — службы, которые можно использовать как одноэлементные классы для обработки всех ваших асинхронных действий, таких как выполнение вызовов API и создание подписки для связи между компонентами, которые не связаны напрямую друг с другом. Он также предоставляет нам абстракцию с использованием декоратора NgModule, а также добавляет функцию отложенной загрузки. Нам нужно зарегистрировать компонент, используя объявления в модуле. Его также можно экспортировать в другие модули, используя функцию экспорта модулей.

Последняя важная функция, о которой я хотел бы рассказать, — внедрение зависимостей. Без него не обходится ни одно приложение Angular, широко известное как DI. Давайте разделим оба слова и рассмотрим их одно за другим. Во-первых, что такое зависимость, предположительно есть 2 модуля, скажем, A и B. Когда модуль A требует запуска модуля B, мы говорим, что B является зависимостью A. Инжектор — это функция, которая при передаче токен возвращает зависимость (или список зависимостей. Токен может быть определен как что-то, что однозначно идентифицирует, что мы хотим внедрить. зависимость нашего кода. Подробное описание можно найти на https://codecraft.tv/courses/angular/dependency-injection-and-providers/overview/.