Angular - одна из самых популярных интерфейсных фреймворков с открытым исходным кодом на рынке. Он используется для создания клиентских веб-приложений и специально разработан для SPA (одностраничных приложений). Выпущенный Google в 2016 году фреймворк на основе TypeScript был переписан на AngularJS. Как только вы начнете изучать Angular, вы поймете, что это не так просто, как изучение ReactJS или VueJS, некоторых из основных конкурентов Angular. В этой статье я расскажу, как я выучил основы Angular 8 за 24 часа в 3 простых шага.

Прежде чем мы начнем, важно иметь некоторое представление о том, как развивалась Angular. Это может показаться запутанным, но до того, как Angular стал Angular, Angular был AngularJS. На данный момент имейте в виду, что Angular полностью отличается от AngularJS. Если вам не интересно понимать разницу, я предлагаю пропустить следующий раздел.

Различия между AngularJS и Angular

AngularJS был выпущен на 6 лет раньше Angular в 2010 году компанией Google. В то время он сразу стал популярным. Однако запуск других фреймворков выявил его недостатки и отвлек внимание. ReactJS и VueJS появились на рынке и ясно дали понять, что хотят конкурировать за лучшую платформу производительности. Именно тогда команда Google осознала и решила, что пришло время полностью переписать Angular. Релиз Angular 2 выявил кардинальные изменения. Язык, Архитектура и Привязка данных были ключевыми.

Язык: JavaScripts против TypeScript

Первым решением команды Angular было перейти с JavaScript на TypeScript, чтобы избежать ошибок JavaScript. Кроме того, способ представления более организованного и удобного в обслуживании кода. Статическая типизация TypeScript повышает производительность, позволяет избежать ошибок во время выполнения и переносится в JavaScript.

Архитектура: MVC против компонентной архитектуры.

Архитектура AngularJS поддерживает архитектуру MVC (Model View Controller). Логика, вывод и просмотр происходят в отдельных файлах. С другой стороны, Angular полагается на компоненты, директивы с предопределенными шаблонами. Такая современная структура позволяет нам масштабировать и поддерживать большие приложения.

Привязка данных. Двусторонний алгоритм привязки данных.

Двусторонняя привязка данных AngularJS - это уникальный способ, который немедленно передает в представление любые изменения данных, которые могут повлиять на модель, а изменения, внесенные пользователями в представлениях, немедленно отражают модель. Более совершенный алгоритм Angular делает его в пять раз быстрее, чем AngularJS для привязки данных и компонентной архитектуры.

КАК Я ИЗУЧИЛ 8 УГЛОВЫХ ОСНОВ ЗА 24 ЧАСА ЗА 3 ШАГА

Прежде чем мы двинемся дальше, чтобы я мог объяснить, как я изучил основы Angular 8 за 24 часа в 3 простых шага, важно подчеркнуть, что изучение Angular требует большего (гораздо большего!). Angular известен своей сложностью и длительностью обучения. Однако разработчики Angular утверждают, что этот процесс того стоит, поскольку это очень надежный фреймворк. Цель этого поста - изложить некоторые идеи о том, как можно разбить Angular, чтобы быстро понять его, если вам придется приступить к проекту без опыта. Теперь мы готовы двигаться дальше.

# 1 ПОЗНАКОМЬТЕСЬ С УГЛОВОЙ СТРУКТУРОЙ

Когда вам нужно изучить новую структуру за короткий промежуток времени, самое важное - ознакомиться со структурой проекта. Это может показаться бесполезным, но позже вы поблагодарите себя за это. Это сэкономит вам время, которое в противном случае вы бы потратили на поиск нерелевантных вопросов в Интернете.

Angular использует шаблон, который можно легко запросить через его интерфейс командной строки. С помощью инструментов Angular CLI вы можете быстро создавать проекты, настраивать, добавлять и тестировать компоненты, а также развертывать их. Интересно, что у AngularJS нет своего интерфейса командной строки.

Через интерфейс командной строки перейдите в каталог, в котором вы планируете запустить проект Angular, и выполните команду ng new [имя-проекта]. Во время его работы вам будет предоставлена ​​возможность добавить маршрутизацию и выбрать формат таблицы стилей (CSS, SASS, LESS). Эти варианты будут зависеть от типа проекта, который вы планируете начать. Если вы не собираетесь использовать маршрутизацию, вы можете пропустить этот параметр. Что касается таблиц стилей, наиболее распространенным является CSS. После этого CLI завершит выполнение команд и автоматически сгенерирует полный проект.

После этого вы можете перейти в каталог проектов и запустить ng serve, что эквивалентно npm start для React. Интерфейс командной строки скомпилирует проект и запустит сервер по адресу http: // localhost: 4200.

Структура проекта:

На этом этапе вы можете открыть свой проект в редакторе кода. Там вы заметите, что интерфейс командной строки Angular генерирует проект, состоящий из папок и файлов. У каждой папки и файла свое предназначение. Чтобы упростить задачу, давайте разберемся с ними.

PS: 🗂 относится к папке, а 📝 - к файлу.

🗂 e2e /
Папка сквозного тестирования, расположенная на верхнем уровне структуры проекта. Он содержит исходные файлы для выполнения сквозных тестов для приложения корневого уровня (AppComponent).

ng e2e:
Когда вы запускаете команду ng e2e в интерфейсе командной строки, приложение будет построено в режиме наблюдения и запустится средство запуска тестов Protractor. Как только это будет сделано, вы увидите вывод в терминале, и откроется браузер Chrome, протестируйте все сценарии, объявленные в файле e2e, и быстро закройте.

🗂src

🗂app /

Он содержит файлы компонентов, в которых определены логика и данные вашего приложения.

📝 App.component.css

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

📝App.component.html

Шаблон, созданный для определения корня HTML компонента AppComponent.

📝App.component.spec.ts

Файл, отвечающий за выполнение модульных тестов для корневого AppComponent.

тест ng:

Когда вы запускаете команду ng test в интерфейсе командной строки, приложение будет построено в режиме просмотра и запустится средство запуска тестов Karma. Результаты теста отображаются в терминале, а Jasmine HTML Reporter будет показан в браузере Chrome, который откроется.

📝App.component.ts

Определяет логику для корневого компонента приложения (AppComponent). Если вы добавите дополнительные компоненты, app.component.html станет корнем иерархии представлений.

📝App.module.ts

Определяет корневой модуль (AppModule), который сообщает Angular, как собрать приложение. Он объявляет AppComponent по умолчанию, но может объявлять больше компонентов по мере их добавления в проект.

🗂Активы /

Папка, автоматически созданная для хранения изображений и других файлов ресурсов, которые вы хотите скопировать в свой проект.

🗂 среды /

Содержит параметры конфигурации сборки (информацию о конфигурации JSON) для определенных целевых сред. Он отвечает за указание системе сборки, какие файлы следует изменить при запуске ng build или ng serve.

📝Index.html - основная HTML-страница, на которой отображаются просмотры и обслуживаются, когда пользователи посещают вашу страницу.

📝main.ts - main.ts - это основная точка входа в приложение Angular. Он использует JIT-компилятор для компиляции приложения и загружает корневой модуль приложения (AppModule) для запуска в браузере.

📝polyfills.css - предоставляет скрипты полифиллов для поддержки браузером.

📝styles.css - все указанные здесь стили будут доступны во всем мире. Расширение файла отражает препроцессор стиля, который вы настроили для проекта (в данном случае CSS).

# 2: ПОНИМАЙТЕ УГЛОВЫЕ СТРОИТЕЛЬНЫЕ БЛОКИ

Каждый фреймворк различается по составу строительных блоков. Важно изучить некоторые из них с предвкушением, чтобы вы могли создать корреляцию с другими фреймворками, которые вы использовали или раскрывали ранее, что у них общего и в чем их различия. Ключевые строительные блоки Angular - это модули, компоненты и шаблоны. Начнем с модулей.

Модули

По сути, модуль описывается как блок кода со связанными функциями. Имея это в виду, приложения Angular известны своей модульностью. Вы можете легко идентифицировать его по классу NgModules (или декоратору @NgModule). Это помогает организовать сложные отношения между представлениями (классами, которые могут содержать представления: компоненты, директивы и каналы) с поставщиками данных. Это позволяет определить все отношения в одном файле. В каждом приложении должен быть хотя бы один модуль или, в зависимости от размера приложения, несколько.

Чтобы изменить классы JavaScript, вы должны использовать декораторы. Они несут ответственность за присоединение объектов метаданных к классам, чтобы классы знали, как они должны работать. Проще говоря, NgModule - это функция, которая принимает объекты метаданных и свойства для описания модуля и организации отношений.

  • объявления: классы, которые связаны с представлениями и будут частным образом доступны этому модулю. Думайте об этом как об общедоступных и закрытых функциях в ООП, компоненты по умолчанию являются частными, но могут стать общедоступными, если вы добавите их в экспорт. Если вы хотите, чтобы они были общедоступными, вам нужно будет добавить их в раздел экспорта.
  • exports: классы, которые должны быть доступны компонентам из других модулей.
  • импорт: другие модули получают доступ к экспортированным модулям, импортируя модуль в свои метаданные.

Объявление, экспорт и импорт определяют отношения между компонентами и то, как они распределяются между NgModules.

  • поставщики: где вы регистрируете поставщиков данных, таких как службы и охранники (например, ContactService, CanActive, AuthService), которые могут быть введены в компоненты в этом модуле. Вводимый класс будет доступен любому компоненту в этом модуле, а также любому модулю, который его импортирует.
  • bootstrap: определяет компонент, который изначально отвечает за загрузку приложения (по умолчанию AppComponent).

По мере роста приложения модуль в какой-то момент станет больше, и его будет труднее поддерживать. Наша задача - преобразовать компоненты и службы в их модули, за исключением AppComponent, который мы загружаем из корневого модуля. Мы загружаем модуль AppComponent в файл main.ts. В файле main.ts автоматически указывается модуль начальной загрузки. Наконец, компонент начальной загрузки находится внутри модуля начальной загрузки.

Если вы решите добавить роутеры в свой проект, у роутера будет свой файл только с метаданными импорта и экспорта. Он всегда должен экспортировать RouterModule. В зависимости от структуры вашего приложения в нем будут CoreModule, FeatureModule и ShareModule, но это темы, которые вы можете подробно осветить по мере роста вашего проекта.

Компоненты

Компонент может управлять одним или несколькими разделами представления. Логика приложения должна быть написана внутри компонента. Результаты, отображаемые в представлении, генерируются через класс, который взаимодействует с API свойств и методов.

Добавление новых компонентов:

Если вы хотите добавить в проект новые компоненты, кроме AppComponent, вам нужно будет выполнить несколько шагов, чтобы убедиться, что ваш проект не сломается. Вы можете добавить новый компонент вручную или через интерфейс командной строки. Я предлагаю использовать интерфейс командной строки, чтобы избежать ненужных ошибок, которые могут задержать процесс обучения или выполнение вашего проекта.

Из интерфейса командной строки Angular перейдите в главный каталог проекта или по пути, по которому вы хотите создать этот компонент, и запустите ng generate component [имя-компонента]. Он автоматически создаст папку, содержащую следующие файлы:

  • [название-компонента] .component.ts
  • [имя-компонента] .component.css
  • [имя-компонента] .component.html
  • [имя-компонента] .component.spec.ts
  • index.ts

Кроме того, вы заметите, что он генерирует ngOnInit. Метод ngOnInit вызывается всегда при создании экземпляра компонента. Более того, перед началом работы над новым компонентом вам следует уточнить некоторые дополнительные детали:

  1. Импортировать компоненты и зависимости в компонент
  2. Прикрепите метаданные компонента с помощью декоратора @Component.
  3. Укажите логику компонента, указав конструктор и внутри него переменные и методы, которые необходимо инициализировать при создании класса.

Шаблоны

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

Связывание данных

Двусторонняя привязка данных объединяет привязку свойств и событий в единой нотации с помощью директивы ngModel. Он немедленно передает в «Представление» любые изменения данных, которые могут повлиять на «Модель», а изменения, сделанные пользователями в «Представлениях», немедленно отражают «Модель». Проще говоря, каждый раз при изменении данных изменяется пользовательский интерфейс, и наоборот. Angular обрабатывает все привязки данных один раз за цикл событий JavaScript, от корня дерева компонентов приложения до всех дочерних компонентов. Он играет важную роль во взаимодействии между шаблоном и его компонентом, родительскими и дочерними компонентами.

# 3 НАДЕВАЙТЕ РУКИ! ЭКСПЕРИМЕНТ, ТЕСТИРОВАНИЕ, УДОБСТВО

Теперь, когда вы хорошо разбираетесь в основах Angular 8, пришло время почувствовать, как он работает, и освоиться с ним. В качестве предложения попробуйте следовать простому руководству или проверить другие проекты с открытым исходным кодом. Выполнив эти три быстрых шага, вы можете не осознавать, но большая часть того, что будет делать ваш мозг, - это создать сравнение с другими языками или фреймворками, с которыми вы уже знакомы. Этот процесс сравнений и предположений помогает вам четко определить, каковы некоторые из преимуществ и недостатков.

ЗАКЛЮЧЕНИЕ

Несмотря на то, что время обучения Angular длиннее, чем у других фреймворков, тем не менее, это прекрасная среда, которую можно изучить и потратить некоторое время на изучение. AngularJS все еще находится в обращении, и некоторые разработчики предпочитают его использовать. Если вам интересно, какой из них лучше, ответ всегда будет зависеть от типа интересующего вас проекта. Если вы представляете себе мобильное и масштабируемое приложение, определенно выбирайте Angular, потому что AngularJS его не поддерживает. Для более простых целей AngularJS будет работать нормально и по-прежнему поддерживать JavaScript.

Изучение новой структуры вначале - болезненный процесс, но он стоит усилий. Каждый разработчик знает, что каждый день пробовать что-то новое - это часть его пути. Не потому, что вы не знаете технологию, вы не можете изучить ее и стать профессионалом. Просто сделайте это, начните с основ, сделайте корреляции, и, в конце концов, все встанет на свои места. Надеюсь, этот пост окажется для вас полезным.

Удачного кодирования! 👩‍💻

Источники:

Https://bit.ly/2WIIkO4
https://bit.ly/3g5GMFu
https://bit.ly/2LE7TJT
https: // bit.ly/2ygUPHf
https://bit.ly/2WNZ06V
https://bit.ly/2zX092L