Angular 5 CLI — первичная загрузка

Angular 5 CLI — первичная загрузка

От автора: статья из серии – создание простого веб-приложения на Angular 5. Цель – быстро создать работающее приложение, чтобы можно было углубиться в концепции ядра нового Angular.

Легче всего начать создание нового, хорошо структурированного приложения Angular 5 с помощью angular-cli от команды Angular. Инструмент действительно простой и умный, с его помощью можно создавать веб-приложения нового уровня. Некоторые скажут, что в нем нет продвинутых настроек, но все издержки компенсируются простотой использования, как мне кажется. Тем не менее, для всех одержимых настройками я напишу отдельный пост по первичной загрузке веб-приложения на Angular 5 с нуля с помощью Webpack.

Установите node и npm (управляйте выделенными версиями node с помощью nvm), если они не установлены.

Установите angular-cli

npm install -g @angular/cli

Angular cli – инструмент с интерфейсом командной строки, предоставляющий особую команду ng со всеми вариантами по созданию и управлению приложением Angular.

С помощью команды ng new и далее название приложения можно создать новое приложение. Назовем наше приложение crud-angular5

ng new crud-angular5

Команда создаст новую папку crud-angular5 со всеми рекомендуемыми руководствами по стилизации, предоставленными командой Angular.

В папе будет много файлов, которые вам могут быть незнакомы. Не переживайте. Мы разберем все важные файлы, на которые сразу стоит обратить внимание в следующем разделе.

Измените директорию на созданную папку

cd crud-angular5

Запустите приложение командой ниже – будет создано приложение и поднят сервер на порте 4200

ng serve

В команде можно указать множество опций, которые перепишут стандартное поведение запуска приложения в режиме dev. Парочка важных опций:

—open  — открывает приложение в браузере по умолчанию

—port – по умолчанию cli настроен на запуск приложения на порте 4200, но вы можете изменить порт с помощью этой опции

—watch – повторный запуск билда при изменении файлов

В папке dist пока что не будет файлов, они созданы в памяти. Так работает Webpack, это тема для отдельной статьи. «Обратите внимание: перед запуском приложения в браузере может понадобиться команда npm install»

Откройте http://localhost:4200, чтобы увидеть приложение. И все. Вот так просто начать работу над веб-приложением Angular 5. Давайте разберем папки и файлы, сгенерированные cli. Ниже представлена структура папок, созданная на данный момент:

Angular 5 CLI — первичная загрузка

Файлы в корневой папке –

.angular-cli.json – настройки управления процессом билда и общим поведением команд ng. В следующих статьях мы будем возвращаться к этому файлу.

karma.conf.js  — настройки тест раннера karma (используются при запуске юнит тестов)

package.json  — npm настройки, которые вам должны быть знакомы. Если нет, можете ознакомиться. Здесь мы будем писать и запускать пользовательские скрипты. Например, там лежит скрипт start, определенный как ng serve – поэтому можно запускать npm start для запуска ng serve.

protractor.conf.js  —  e2e тест конфиг для protractor

README.md  — документация нашего проекта. По умолчанию там можно посмотреть все доступные команды для нашего приложения. Его необходимо обновлять и по необходимости дописывать команды для нашего приложения.

tsconfig.json  — настройки компилятора  typescript

папка src –

Здесь хранится код нашего приложения. Сейчас структура должна быть следующей:

Angular 5 CLI — первичная загрузка

папка app – хранит корневой модуль app.module.ts, необходимый для первичного запуска приложения. Также он объявляет все компоненты, используемые в приложении. Здесь также лежит компонент app.component.ts вместе с шаблоном (app.component.html), стилями (app.component.css) и юнит тестом (app.component.spec.ts). По мере написания новых компонентов мы увидим, как они будут вкладываться в корневой компонент.

Папка assets – здесь будут храниться все файлы-расходники типа изображений, шрифтов и т.д., которые будут копироваться.

Папка environments – файлы для целевой среды. Обычно у нас бывает несколько конфигов среды, которые используются во время сборки. Один например – конечная точка api, вызываемая для операций crud.

index.html  — главный html файл, необходимый для браузера. Все ссылки на скрипты и стили вставляются в него автоматически через cli. Нам вообще не нужно редактировать его.

Main.ts – главная входная точка приложения Angular. Именно здесь вызывается метод bootstrap для корневого модуля.

platformBrowserDynamic().bootstrapModule(AppModule)

polyfills.ts  — полифилы для поддержки всех браузеров для единообразного UX.

styles.css  — глобальные стили приложения. Не забывайте, что все стили компонентов будут определяться в соответствующих файлах стилей компонентов.

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

Автор: Manish

Источник: https://medium.com/

Редакция: Команда webformyself.