Этот блог представляет собой удобное введение в 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 мы добавляем:

  1. Оператор импорта для импорта нового компонента.

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 могут быть разбиты на компоненты, что позволяет пользователю изменять каждый из них независимо и, таким образом, поддерживать чистоту кода.