Мастер Angular за половину времени

Изучите Angular быстро с помощью беглых практических курсов.

Практическое руководство по Angular

Что такое Angular 2+?

Angular 2+ — это фреймворк TypeScript , используемый для создания клиентских приложений с помощью CSS, HTML и TS. Основным строительным блоком любого приложения Angular являются компоненты с коллекциями кода для выполнения определенного поведения.

Angular позволяет использовать HTML в качестве языка шаблонов и расширять синтаксис HTML по мере создания компонентов. Фреймворк Angular работает, читая HTML-код страницы и интерпретируя атрибуты как директивы для привязки страницы к модели на основе стандартных переменных TypeScript.

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

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

Пользовательская база Angular по-прежнему остается растет и уже давно используется такими компаниями, как Google и Amazon. Поскольку каждый день все больше компаний принимают Angular, 2021 — отличное время, чтобы присоединиться к сообществу AngularCLI.

Ключевые особенности Angular

• Архитектура MVC (модель-представление-контроллер): разделяет программные компоненты на сегменты модели, представления и контроллера, чтобы отделить уровень представления от бизнес-логики..
• Двусторонняя привязка данных : Angular автоматически синхронизирует ваше HTML-представление с вашим кодом, позволяя вам следить за обновлениями вашего представления в режиме реального времени.
• Поддержка маршрутизации : легко создавайте одностраничные приложения (SPA), которые обеспечивают работу на рабочем столе при навигации по представлениям.
• Внедрение зависимостей : позволяет автоматически внедрять зависимости кода с контейнером зависимостей, поэтому метод main () не требуется.
• Проверка формы : улучшите взаимодействие с пользователем в приложениях CRUD с помощью простой в реализации проверки формы Angular.

Angular vs React

Основным конкурентом Angular является фреймворк React от Facebook. У каждого из них есть свои преимущества, недостатки и разные подходы к дизайну, которые определяют, когда они используются. Давайте разберем основные различия, чтобы увидеть, в чем преимущество Angular.

React

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

Преимущества

• Предлагает простой дизайн JS с использованием синтаксиса, сочетающего HTML и JavaScript. React также предлагает отличную документацию для начинающих. * Реализация виртуальной модели DOM и оптимизация рендеринга в React делают ее очень быстрой.
• Поддержка первоклассных прогрессивных веб-приложений (PWA), особенно с его create -react-app генератор шаблонов.
• Создан для многоразового и модульного кода. Это упрощает поддержку и развитие приложений, упрощая разработку и масштабирование сложной инфраструктуры.

Ограничения

• React — это крайне непредубежденная технология, а это означает, что разработчики должны делать свой собственный выбор дизайна.
• Технология React постоянно обновляется, поэтому это может быть сложно чтобы поддерживать последнюю версию документации.
• React полагается на JSX, который может быть препятствием для обучения некоторым новым разработчикам.

Angular

Angular построен с противоположностью React: максимизировать контроль за счет удобства для новичков.

Освоив Angular, вы получаете инструменты для управления и точной настройки каждого аспекта вашей жизни. ваше приложение так, как вы не могли бы с React.

• Angular поддерживается Google, с подробной документацией и большим сообществом. Существует множество высококачественных ресурсов, которые помогут вам быстрее учиться.
• Angular-language-service ускоряет разработку за счет расширенных функций кодирования, таких как автозаполнение для внешних файлов шаблонов HTML.
• Расширенная архитектура MVC для лучшего разделения обязанностей и организации кода.
• Поддерживает разработку на основе тестов с мгновенными обновлениями кода для просмотра и инструментами как для сквозного, так и для модульного тестирования.

Ограничения

• Труднее изучить, чем React, потому что Angular предлагает множество различных структур, например Инъекции, компоненты, трубы, модули и многое другое. Требуется время, чтобы изучить место для каждой из этих структур, а не изучать только компоненты для React.
• Более низкая производительность по умолчанию, поскольку она работает с реальной DOM. Требуется дополнительная работа для выполнения так же быстро, как React, например ручное управление процессом рендеринга.

Подробнее о различиях между Angular и лучших фреймворков Vue и React, см. нашу предыдущую статью: Angular vs Vue vs React: выбор лучшего фреймворка в 2020 году

Знакомство с элементами Angular

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

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

Наконец, весь этот код автоматически отображается в реальном времени от компонентов модели к представлению с использованием привязки данных.

Модули

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

Считайте модули гибридом между классами и контейнерами..

Вот пример модуля Angular:

 импортировать {BrowserModule} из '@ angular/platform-browser'; импортировать {NgModule} из '@ angular/core'; импортировать {FormsModule} из '@angular /forms '; импортировать {AppRoutingModule} из' ./app-routing.module '; импортировать {AppComponent} из' ./app.component '; импортировать {AssessmentsModule} из' ./assessments/assessments.module '; импортировать {CoreModule  } из './core/core.module';import {SharedModule} из' ./shared/shared.module';import {BrowserAnimationsModule} из '@ angular/platform-browser/animations'; @ NgModule ({декларации: [  AppComponent,], импорт: [BrowserModule, AppRoutingModule, AssessmentsModule, CoreModule, SharedModule, FormsModule, BrowserAnimationsModule], поставщики: [], bootstrap: [AppComponent]}) класс экспорта AppModule {} 

• Загрузочная программа массив содержит первый компонент, который будет инициализирован и отображен при запуске приложения Angular.
• Массив деклараций содержит список компонентов, каналов , и директивы, определенные в модуле.
• Массив imports содержит все модули, которые наше приложение будет импортировать из других библиотек или модулей Angular.
• Массив exports позволяет нам делиться компонентами, каналами или директивами из этого модуля с другими.

Компоненты

Компоненты — это самый базовый строительный блок для любого приложения Angular. Каждый компонент управляет разделом пользовательского интерфейса, который называется view .

Эти компоненты могут иметь динамические элементы, определенные в классе компонента, которые реагируют на такие события, как щелчки или наведение курсора. над.

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

Вот как выглядит компонент:

 @Component ({selector: 'app  -child-one ', templateUrl:' ./child-one.component.html ', styleUrls: [' ./child-one.component.scss' ]})export class ChildOneComponent {} 

• Селектор устанавливает имя компонента. Модули и директивы используют имя для ссылки на этот компонент.
• Атрибут templateUrl объявляет, на какой HTML-файл будет ссылаться этот компонент в своей работе. Вы также можете создать встроенный HTML-шаблон, используя template: , за которым следует ваш код.

  template: `  
 Привет от компонента приложения 
 ` 

• stylesUrl атрибут объявляет, на какой файл CSS будет ссылаться этот компонент. Как и выше, вы также можете встроить свой стиль CSS, используя:

  styles: ['div {font-weight: 600; } ']]

Директивы

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

Атрибуты

Эти директивы помогают нам расширить поведение или внешний вид элементов внутри шаблона. Чаще всего используется директива атрибутов NgStyle , которая позволяет изменять стиль сразу нескольких элементов.

Структурные директивы

Структурные директивы — это наиболее широко используемые директивы в приложениях Angular. Эти директивы помогают нам работать над компоновкой данных, например, перебирать их в цикле, применять условия к данным и т. Д. В соглашении для структурной директивы перед директивой используется звездочка ( * ). name.

Обычно используемые структурные директивы: * ngFor и * ngIf .

• * ngFor действует как цикл for , который позволяет нам перебирать массив:

• * ngIf действует как оператор if для conditiona l отображение данных:

 
 
 Этот элемент основан на условии showElement 
 
 

Службы

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

 import {Injectable} from '@ angular/core'; @ Injectable ({providedIn: 'root'}) экспортный класс ExampleService {constructor () {}} 

Службы используют систему внедрения зависимостей Angular, чтобы отслеживать, какие классы ( класс экспорта ) зависят от источники данных ( providedIn ).

Установка Angular

Прежде чем вы начнете, вам нужно использовать командную строку для установки Angular. Вам также понадобится обновленная версия Node.js и менеджер пакетов npm .

Сначала установите Angular CLI, введя следующую команду в окно терминала :

  npm install -g @ angular/cli  

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

Затем вам нужно будет создать рабочее пространство Angular и начальное приложение.

В терминале введите команду CLI:

  ng new my-app  

Вам будет предложено ввести информацию о новом приложении, но пока просто примите значения по умолчанию. Наконец, найдите вновь созданную папку рабочей области my-app и выполните следующие команды:

  cd my-appng serve -  open  

Это настроит реагирующий локальный сервер приложений и откроет его в вашем браузере по адресу localhost: 4200 . Веб-страница предоставит несколько ресурсов для продолжения обучения или варианты, такие как + New Component , которые помогут вам развиваться.

Что узнать дальше

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

• Формы
• Маршрутизация
• Внедрение зависимостей
• Использование API и операций CRUD

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

К концу курса у вас будут навыки для создания эффективных и отзывчивые приложения Angular обязательно впечатлят любого интервьюера.

Удачного обучения!

Продолжайте читать о front- конец разработки приложения

• Angular vs Vue vs React: выбор лучшего фреймворка в 2020 году
• Создать приложение с нуля с помощью Vue.js?
• Node.js против React.js: что выбрать для вашего проекта веб-приложения