Создание и запуск Angular проекта

Что такое Angular?

Angular — это поддерживаемый Google, с открытым исходным кодом фронтенд-фреймворк для создания динамичных одностраничных приложений (SPA). Он основан на TypeScript и предоставляет множество инструментов и функций, позволяя разработчикам эффективно создавать сложные приложения. Основные концепции Angular — это компоненты и модульность, что упрощает организацию и поддержку кода.

Основные характеристики и преимущества Angular

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

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

Создание и запуск Angular проекта с использованием ServBay

В этой статье мы будем использовать среду Node.js от ServBay для создания и запуска Angular проекта. Мы будем использовать функцию «Хост» ServBay для настройки веб-сервера и реализуем доступ к проекту через обратное прокси и статические файловые сервисы.

Создание Angular проекта

1. Инициализация проекта

   Сначала убедитесь, что установили среду Node.js от ServBay. Затем используйте следующую команду для глобальной установки Angular CLI:

   npm install -g @angular/cli

   В рекомендованной ServBay корневой папке /Applications/ServBay/www создайте новый Angular проект:

   cd /Applications/ServBay/www
   ng new servbay-angular-app

   Введите имя проекта (рекомендуется выбрать servbay-angular-app) и настройте другие опции по необходимости:

   ? Would you like to add Angular routing? Yes
   ? Which stylesheet format would you like to use? CSS

2. Установка зависимостей

   Перейдите в папку проекта и установите зависимости:

   cd servbay-angular-app
   npm install

Изменение выходного содержимого Angular проекта

1. Изменение файла src/app/app.component.html

   Откройте файл src/app/app.component.html и измените содержимое, чтобы страница выводила "Hello ServBay!":

   <div style="text-align:center">
     <h1>Hello ServBay!</h1>
   </div>

Вход в режим разработки

1. Запуск сервера разработки

   Запустите сервер разработки и укажите порт (например: 8585):

   ng serve --port 8585

   Это запустит локальный сервер разработки, доступный на порту 8585.

2. Настройка обратного прокси хоста ServBay

   Используйте функцию «Хост» ServBay для доступа к серверу разработки через обратное прокси. В настройках «Хост» ServBay добавьте новый обратный прокси:

   • Имя: My first Angular dev site
   • Домен: servbay-angular-test.dev
   • Тип хоста: Обратное прокси
   • IP: 127.0.0.1
   • Порт: 8585

   Подробные шаги настройки см. в добавлении сайта разработки на Nodejs.

3. Доступ к режиму разработки

   Откройте браузер и перейдите на https://servbay-angular-test.dev, чтобы увидеть проект в режиме реального времени. Благодаря поддержке пользовательских доменов и бесплатных SSL-сертификатов от ServBay, вы получите повышенную безопасность.

Сборка продакшн версии

1. Сборка продакшн версии

   Когда разработка завершена, используйте следующую команду для сборки продакшн версии:

   ng build --prod

   После сборки статические файлы будут находиться в папке dist/servbay-angular-app.

2. Настройка сервиса статических файлов

   Используйте функцию «Хост» ServBay для доступа к продакшн версии через сервис статических файлов. В настройках «Хост» ServBay добавьте новый статический сайт:

   • Имя: My first Angular production site
   • Домен: servbay-angular-test.prod
   • Тип хоста: Статический
   • Корневая папка сайта: /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app

3. Доступ к продакшн версии

   Откройте браузер и перейдите на https://servbay-angular-test.prod, чтобы увидеть продакшн версию веб-сайта. Благодаря поддержке пользовательских доменов и бесплатных SSL-сертификатов от ServBay, ваш сайт будет обладать повышенной безопасностью и надежностью.

Следуя этим шагам, вы успешно создали и запустили Angular проект с использованием возможностей от ServBay для управления и доступа к вашему проекту.