Этот блог представляет собой удобное введение в Angular 5 для новичков, охватывающее основные компоненты Angular, с которыми я работал до сих пор во время своего периода GSoC. Это первый технический блог, в котором рассматриваются различные части создания приложения Angular, и он поможет будущим разработчикам в работе над моим проектом GSoC! :)
Angular CLI
Интерфейс командной строки Angular (Angular CLI) - один из самых простых способов начать создание проекта Angular с нуля. По сути, это интерфейс командной строки, который помогает создавать масштабируемые проекты и выполняет все обычные утомительные задачи.
Чтобы установить Angular CLI, мы можем использовать npm:
npm install @angular/cli -g
После установки CLI мы можем протестировать версию, набрав:
ng -v
Это выведет текущую запущенную версию на ваш экран, что-то похожее на мой экран, показанный ниже:
Теперь мы готовы приступить к изучению Angular CLI!
Давайте начнем с изучения того, что мы можем делать с помощью Angular CLI, для этого мы набираем команду:
ng -h
Это дает следующий результат на экране:
Большой! Итак, давайте начнем с создания нового проекта Angular с помощью Angular CLI.
Мы используем следующую команду для выполнения следующего действия:
ng new <project_name>
Приведенная выше команда создаст новый проект, установив необходимые зависимости. Проект в этой папке содержит:
- Проект Angular по умолчанию
- Все зависимости установлены в папке node_modules
- Файлы тестирования для каждого компонента
Мы также можем указать некоторые дополнительные флаги, подобные двум, которые я использовал, в приведенной ниже команде:
ng new <project_name> --style=scss --routing
По умолчанию Angular генерирует файлы CSS для каждого компонента, добавляемого в проект. Используя --style
, мы можем перейти на другие препроцессоры CSS, такие как SCSS в приведенном выше случае. Это означает, что каждый файл с расширением .css переименовывается в расширение .scss.
Параметром командной строки --routing
мы указываем, что модуль маршрутизации нужно добавить в проект Angular. При выполнении указанной выше команды создается дополнительный файл app-routing.module.t s в папке src / app. Подробнее о маршрутизации чуть позже.
Поскольку мы все настроены на наш новый проект, давайте теперь займемся изучением больше! : D
Давайте изменим наш текущий каталог и перейдем к проекту.
cd <project_name>
Угловые компоненты
Компоненты Angular - это основные строительные блоки приложения Angular.
Чтобы сгенерировать новый компонент в нашем проекте, мы используем команду:
ng generate component <new_component_name>
Это создает следующие компоненты в папке src / app.
‹New_component_name› /
- ‹New_component_name› .component.html
- ‹New_component_name› .component.scss
- ‹New_component_name› .component.ts
- ‹New_component_name› .component.spec.ts
Маршрутизация в Angular
Не обращая внимания на мой предыдущий блог https://medium.com/@BaaniLeen/gsoc18-coding-phase-week-1-5267191c3b0d о том, что такое маршрутизация и почему возникла необходимость в маршрутизации в моем проекте GSoC, чтобы реализовать маршрутизацию, в Angular 5 нужно использовать компоненты.
Ранее, используя параметр командной строки --routing
, мы уже создали дополнительный файл app-routing.module.t s в папке src / app.
Кроме того, мы создали новый модуль, как описано выше. Давайте теперь попробуем связать их вместе и направить текущее приложение к только что сгенерированному компоненту!
В файле app-routing.module.ts в папке src / app мы добавляем:
- Оператор импорта для импорта нового компонента.
import { <New_component_name> } from './<new_component_name>/<new_component_name>.component';
2. Добавьте путь к новому компоненту в массив маршрутов в файле.
const routes: Routes = [
{ path: '<new_component_name>', component: <New_component_name> }
];
Используйте команду ng serve -o
и откройте ссылку http: // localhost: 4200 / ‹new_component_name›, чтобы увидеть, что вывод второго компонента выводится прямо под содержимым по умолчанию.
Так что да! Это с моей стороны. Мы успешно смогли перейти к новому компоненту в приложении Angular. Это можно использовать для реализации панелей навигации, и в основном все функции в приложении Angular могут быть разбиты на компоненты, что позволяет пользователю изменять каждый из них независимо и, таким образом, поддерживать чистоту кода.