Привет! В этой подборке материалов я хочу познакомить Вас с 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
У вас появится что-то подобное
Создание приложения
Angular CLI Вы установили и теперь готовы к созданию проекта. Для этого перейдите в папку, где будет расположено приложение, откройте удобный, для вас, терминал и выполните команду
ng new todo-app
После чего Angular CLI спросит Вас, каким препроцессором стилей будем пользоваться? Я обычно работаю с SCSS. Выбираем через стрелочки на клавиатуре и жмем Enter.
Далее - нужно ли нам SSR (о нем потом)? Пишем "N" и жмем Enter
После этого приложение начнет устанавливать все необходимые зависимости
По окончанию загрузки наше приложение появится в папке todo-app (так мы его с Вами назвали). Откройте директорию в своем редакторе кода, для удобства и зайдите в файл package.json. В свойстве scripts будут базовые команды для работы с нашим проектом, сейчас нам нужна команда ng serve, которая запускает сборку приложения.
Можно написать в терминале ng serve или npm run start - это одно и то же. Как только мы запустим эту команду у нас начнется сборка приложение и как только оно соберется, то станет доступным нам по адресу http://localhost:4200/. Сейчас там будет базовая верстка нового Angular приложения, весь этот HTML прописан в файле app.component.html, который находится в папке src/app. Если вы что-то там измените, то изменения сразу появятся и в нашем лайв сервере.
Итоги
Мы установили Angular CLI и создали наше приложение, оно уже работает и это прекрасно! Не пугайтесь большого количества файлов, в следующих выпусках мы подробно разберем, что они значат и для чего нужны.
