[Angular 17 ToDo App] 1. Создание проекта

Привет! В этой подборке материалов я хочу познакомить Вас с Angular 17, рассказать о его прелестях и сделать простенькое приложение - трекер задач.

Почему Angular?

Не буду здесь разводить войну между фреймворками и не писать заголовки вроде "Angular vs React" или "Какой фреймворк лучше". Мой выбор пал на Angular, когда я, будучи стажером в стартапе, услышал: "У нас используется Angular. Не знаком? Ничего, мы научим!". С тех пор я понял, что это было везение, потому что Angular - действительно крутой фреймворк, особенно в 2024 году. В нем уже есть всё, что нужно "из коробки", и писать код в нем так же легко, как и в остальных проектах. В противном случае Angular намекнет: "Твой код мне не нравится, давай, перепиши!". Это, на мой взгляд, одно из главных преимуществ - мы работаем в единой экосистеме и следуем похожим стандартам. Благодаря этому ошибки быстро гуглятся, переход на новый проект не вызывает больших проблем и так далее. Вот почему я предпочитаю Angular!

Установка Angular

Установка Node.js и Npm

Для начала Вам нужно установить Node.js и Npm, врятли он у Вас не установлен, но все же. Убедитесь, что версия Node не ниже 18.13.0, а максимальную версию (на момент написания) Angular поддерживает 20.9.0.

Angular CLI

Далее Вам потребуется установить Angular CLI. Как написано на официальном сайте:

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

Устанавливать Angular CLI нужно глобально. Откройте терминал от имени администратора и напишите

npm install -g @angular/cli@latest

Если у Вас MacOS/Unix не забудьте добавить sudo вначале.

Если установка прошла успешно, проверьте версию Angular командой

ng version

У вас появится что-то подобное

Ответ на команду ng version

Создание приложения

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

ng new todo-app

После чего Angular CLI спросит Вас, каким препроцессором стилей будем пользоваться? Я обычно работаю с SCSS. Выбираем через стрелочки на клавиатуре и жмем Enter.

Выбор стилей при инициализации приложения

Далее - нужно ли нам SSR (о нем потом)? Пишем "N" и жмем Enter

Нужен ли SSR в приложении

После этого приложение начнет устанавливать все необходимые зависимости

Инициализация приложения

По окончанию загрузки наше приложение появится в папке todo-app (так мы его с Вами назвали). Откройте директорию в своем редакторе кода, для удобства и зайдите в файл package.json. В свойстве scripts будут базовые команды для работы с нашим проектом, сейчас нам нужна команда ng serve, которая запускает сборку приложения.

package.json в только что инициализированном приложении

Можно написать в терминале ng serve или npm run start - это одно и то же. Как только мы запустим эту команду у нас начнется сборка приложение и как только оно соберется, то станет доступным нам по адресу http://localhost:4200/. Сейчас там будет базовая верстка нового Angular приложения, весь этот HTML прописан в файле app.component.html, который находится в папке src/app. Если вы что-то там измените, то изменения сразу появятся и в нашем лайв сервере.

Итоги

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