Фреймворк от крупнейшей поисковой системы в мире. Что такое Angular

Содержание:

• Что такое Angular
• Как появился 
• Чем отличается от других фреймворков 
• Какая архитектура у фреймворка
• Как создать первый проект на Angular 
• Где используется
• Какие плюсы и минусы
• Полезные материалы от редакции Skillbox.by

Что такое Angular

Ангуляр — это фреймворк для создания динамических и интерактивных веб-приложений на языках программирования TypeScript и JavaScript. Платформу разработала компания Google. Фреймворк быстро завоевал популярность в мире веб-разработки.

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

Сегодня платформа занимает одно из лидирующих мест среди технологий для фронтенд-разработки. Согласно исследованию Stack Overflow, Ангуляр входит в десятку самых популярных фреймворков.

Как появился

В 2009 году разработчик из Google Мишко Хевери с его коллегой и другом Адамом Абронсом, решили облегчить жизнь разработчикам. Они придумали способ превращать простые HTML-формы в динамические, то есть в формы, которые могут меняться и взаимодействовать с пользователем.

В 2010 году Мишко Хевери использовал AngularJS для внутреннего проекта Google — Google Feedback Tool. Это инструмент для сбора отзывов о продуктах компании. Мишко написал код на AngularJS за три недели. Хотя до этого, используя другой инструмент, он потратил полгода. Тогда AngularJS получил официальный статус в Google и стал доступен всем разработчикам.

В 2014 году Google выпустили вторую версию фреймворка, которую назвали Angular. В ней было много изменений, которые сделали инструмент современным. Например, разработчики переписали Angular на TypeScript — язык программирования, похожий на JavaScript, но структурированный.

Изменения в Angular 2 были значительными, его практически нельзя было назвать преемником AngularJS. Поэтому старую версию стали называть AngularJS, а новую — просто Angular.

Чем отличается от других фреймворков

• Двусторонняя привязка данных. Представьте, что вы создаете интернет-магазин. Вам нужно, чтобы информация о товаре отображалась на сайте и одновременно менялась в базе данных. Angular позволяет связать информацию на сайте с базой данных. Если вы поменяете название товара на сайте, оно автоматически обновится в базе данных и наоборот;
• Модульная архитектура. Ангуляр делит приложение на отдельные блоки, которые называются модулями. Каждый модуль отвечает за свою часть приложения. Например, за регистрацию пользователей, корзину товаров или вывод новостей. Это упрощает разработку и позволяет легко добавлять новые функции;
• Dependency Injection. Dependency Injection похож на доставку продуктов из магазина. Вместо того, чтобы самим ходить за покупками, вы можете заказать их с доставкой. Так и у разработчиков. Им не нужно создавать все компоненты приложения самостоятельно. Angular позволяет «заказывать» готовые компоненты, которые используют другие разработчики;
• TypeScript. Это язык программирования, который похож на JavaScript, но с добавлением строгой типизации. Это значит, что вам нужно задавать типы данных для каждой переменной. Например, текст, число или дата. Это делает код понятным и помогает избежать ошибок.

Какая архитектура у фреймворка

В Angular есть элементы, которые работают вместе, как шестеренки в часах:

• Компоненты. Это строительные блоки приложения. Представьте, что вы строите дом из блоков LEGO. Компонент — это один такой блок. Он содержит код, который управляет определенным участком приложения. Например, компонент «Корзина» отвечает за работу корзины в интернет-магазине;
• Модули. Это группы компонентов, которые связаны друг с другом. Представьте, что вы собираете из блоков LEGO не отдельные детали, а целые машины — это и есть модуль. Модуль объединяет несколько компонентов, которые работают вместе. Например, «Модуль товаров» объединяет компоненты «Список товаров», «Карточки товаров» и «Фильтр товаров»;

• Директивы. Это специальные команды, которые задают поведение элементов на странице. Например, директива ngIf показывает элемент только в том случае, если выполнено определенное условие. Это как инструкция, которая говорит: «Если это условие верно, покажи элемент, если нет — спрячь». Например, директива может показывать товар в списке купленных, только если пользователь есть в базе данных покупателей товара;
• Сервисы. Это код, который используется разными компонентами для выполнения определенных действий. Например, сервис «Авторизация» отвечает за проверку логина и пароля пользователя;
  
• Шаблоны. Код, который определяет, как выглядит страница приложения. Шаблоны используют HTML с добавлением специальных команд Angular. Представьте, что вы строите дом из кирпича. Тогда шаблон — это план дома, который показывает, где и какие кирпичи должны быть.

Как создать первый проект на Angular

Редакция Skillbox.by попросила команду разработчиков помочь в создании проекта. Следуйте этим шагам:

1. Установите программное обеспечение. Для работы с Angular нужен Node.js — это программная платформа с открытым исходным кодом для работы с языком JavaScript. Ее можно скачать с официального сайта.

2. Создайте новый проект. Создать проект можно с помощью Angular CLI. Angular CLI — это инструмент, который позволяет создавать проекты с Angular. Чтобы установить инструмент, введите в командной строке: npm install -g @angular/cli

Теперь создаем новый проект с помощью ng new my-first-project:

Затем переходим в папку с проектом и запускаем сервер с помощью команд cd my-first-project и ng serve:

Теперь можно перейти по ссылке и посмотреть на свой сайт:

3. Напишите первый компонент. Компонент — это базовый блок в Angular. Каждый компонент — отдельный кусок кода, который отвечает за определенную часть приложения. Создать новый компонент можно с помощью команды ng generate component my-component.

Официальная документация Angular доступна на сайте. Здесь вы найдете необходимые материалы и научитесь работать с фреймворком.

Где используется

Многие компании используют Angular:

• Google. В Google используют Angular для создания внутренних инструментов и сервисов. Например, Google Cloud Platform и Google Analytics работают на Angular;

• PayPal. Фреймворк помогает создавать безопасные и надежные приложения. Например Venmo и Xoom, которые работают для миллионов пользователей по всему миру;
• Upwork и Freelancer. Популярные биржи для фрилансеров тоже используют Angular. Ангуляр помогает управлять проектами, взаимодействовать с клиентами и получать оплату.

Какие плюсы и минусы

Плюсы

• Модульность. Ангуляр позволяет собирать приложения из отдельных блоков — компонентов. Каждый компонент отвечает за свою задачу. Такой подход помогает создавать приложения быстрее. Ведь разработчики могут работать над отдельными частями, не мешая друг другу. Отдельные компоненты легко тестировать. А еще снижается шанс появление багов в проекте. Один и тот же код компонента можно использовать в разных частях приложения — это как готовые блоки, которые можно переставлять по-разному.
• Архитектура MVC. Angular использует архитектуру MVC которая делит приложение на три части.

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

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

Минусы

• Сложная структура. Angular сложнее в изучении, чем аналоги. Например, React или Vue.js. Потому что кроме компонентов, включает в себя дополнительные структуры. Это как собрать большой конструктор — больше деталей и больше времени, чтобы разобраться.
• Сложности с совместимостью. У Angular есть старая версия AngularJS, которая несовместима с новой. Программисты, которые работают с AngularJS, должны изучать ее отдельно. Ведь принципы работы старого Angular не совпадают с новыми.

Полезные материалы от редакции Skillbox.by

Angular — мощный инструмент для создания веб-приложений. Он позволяет создавать приложения, которые:

• Работают на разных устройствах: от компьютера до смартфона.
• Быстро загружаются и работают без задержек.
• Легко обновляются.

Если вы хотите стать разработчиком или у вас уже есть опыт, изучение Ангуляр — отличный способ повысить навыки. В обучении вам помогут полезные материалы:

Официальная документация Angular:

• Angular Documentation — здесь вы найдете все: от базового введения до продвинутых тем.

Статьи и гайды:

• Tour of Heroes — официальный обучающий тур по созданию приложения на Angular;
• Angular University — курсы и статьи о всех особенностях Angular.

Блоги и сообщества:

• Stack Overflow — место для поиска ответов на конкретные вопросы.
• Reddit: r/Angular2 — активное сообщество, где можно получить советы и обсудить последние новости.
• Angular Blog — официальный блог с новостями и анонсами.