Уроки Angular

Изучение Angular с нуля / Урок #1 – Что такое Angular? Установка и настройка для начинающих

Изучение Angular с нуля / Урок #1 – Что такое Angular? Установка и настройка для начинающих

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

Відеоурок

Telegram group

Підписуйтесь на нашу групу в Телеграмі 🇺🇦

Полезные ссылки:

  1. Платформа Node JS;
  2. Редактор кода Visual Studio Code;
  3. Официальный сайт Angular.


Информация про Angular

Фреймворк Angular был разработан специалистами из Google и впервые представлен в 2016 году как обновлённая версия старого AngularJS. В этом же году команда решила полностью переработать систему, чтобы сделать её более быстрой, гибкой и масштабируемой.


Сам фреймворк создан на основе языка TypeScript, который расширяет возможности JavaScript. Об этом языке мы ещё отдельно поговорим в данном курсе.


Главная идея Angular — это структура и порядок. Он помогает разработчику не просто «лепить» интерфейс, а выстраивать его как настоящую систему с компонентами, сервисами, модулями и логикой. В проекте всё чётко разделено, и в больших проектах это настоящее спасение.


В отличие от обычной вёрстки сайтов или библиотек вроде jQuery, Angular работает как полноценная система — он управляет логикой, отображением, роутингом и данными.



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


Чем Angular отличается от React и Vue?

Вы наверняка уже слышали и про другие популярные фреймворки, такие как React и Vue. Вполне логично, что у вас может возникнуть вопрос — какая принципиальная разница между ними, а также где и когда стоит их использовать.


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


  • React — это библиотека для отображения интерфейса. Всё остальное (роутинг, формы, HTTP-запросы) добавляется вручную.
  • Vue — лёгкий фреймворк, ориентированный на простоту и плавный вход.
  • А вот Angular — это полноценный фреймворк, в котором есть всё «из коробки»: компоненты, роутинг, формы, сервисы, HTTP, анимации, тесты и прочее.


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


Когда стоит выбрать Angular?

На самом деле, Angular подходит не для всего подряд. Но если вы собираетесь делать серьёзное веб-приложение, где много логики, страниц, ролей пользователей, взаимодействия с API и нужно, чтобы всё было чётко организовано — Angular будет отличным выбором.


Angular особенно хорош, когда вы работаете в команде или над проектом, который должен жить долго. Почему? Потому что он предлагает строгую структуру. У вас есть компоненты, модули, сервисы, пайпы — всё чётко разделено, и любой разработчик, который подключится к вашему проекту, быстро поймёт, что где находится. Это не хаотичный набор файлов, а упорядоченная архитектура, которая помогает поддерживать и масштабировать проект.



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


Angular — хороший выбор и в том случае, если вы не хотите собирать проект из сотни отдельных библиотек. Здесь уже всё есть из коробки: роутинг, формы, HTTP-запросы, валидации, стили, тесты. Это как большой чемодан с инструментами, в котором уже всё лежит, и вам не нужно каждый раз думать, что и как подключать.


Ещё один плюс — Angular работает на TypeScript, а это значит, что у вас будет строгая типизация, автодополнение, меньше багов и лучшее понимание кода.


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


Популярные проекты на Angular

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


Тут стоит отметить, что Angular — это не «экспериментальный» фреймворк. Он уже много лет используется в серьёзных, нагруженных и реально работающих продуктах.


Среди популярных проектов можно отметить несколько известных сервисов:

  • Gmail — да, именно так. Почтовый сервис от Google, которым ежедневно пользуются сотни миллионов людей, работает на Angular. Это наглядный пример того, как фреймворк справляется с большим количеством логики, интерфейсов и обновлений в реальном времени.
  • Сайт Forbes — крупный медиа-портал, где важно быстро загружать новости, отображать рекламу, обрабатывать интерактивные элементы — всё это также реализовано с помощью Angular.
  • Microsoft Office Web Apps — многие онлайн-интерфейсы Microsoft (например, редактор Excel в браузере) используют Angular, особенно для внутренних админских панелей.
  • Deutsche Bank и другие банки также часто применяют Angular в финансовом секторе, потому что он подходит для создания надёжных, хорошо структурированных приложений.



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


План курса

За время курса мы изучим все основные аспекты фреймворка. Мы научимся создавать компоненты, обрабатывать любые URL-адреса, добавлять стили, а под конец разработаем мини-проект на базе Angular.


Перед стартом вам стоит разбираться в HTML, CSS, а также в базовом JavaScript. Эти знания помогут вам сверстать сайт любой сложности на базе Angular.

Завдання до уроку

Настройка проекта

Выполните установку Node JS и платформы Angular. 


На базе Angular создайте новый проект и откройте его в текстовом редакторе.

Подивитися відповідь

Сперва выполните установку Node JS. Это можно сделать через официальный сайт Node. 


Далее требуется установить Angular. Для этого используем Angular CLI — инструмент командной строки, который помогает быстро создавать и управлять проектами Angular.


Для его установки пропишите в терминале:

npm install -g @angular/cli

Далее создайте новый проект, используя следующую команду:

ng new my-angular-app

После завершения генерации проекта перейдите в папку проекта и выполните запуск сервера:

cd my-angular-app
ng serve

Велике завдання за курсом

Вам необхідно оформити передплату на сайті, щоб мати доступ до всіх великих завдань. У завдання входить методика рішення, а також готовий проект з відповіддю до завдання.
PS: подібні завдання доступні при підписці від 1 місяця

Також варто подивитися

Изучение стека MEAN: MongoDB, Express, Angular и Node JS
10 уроків
Коментарі
Додати коментар

Поки що коментарів немає