Краткое руководство, которое поможет вам понять и создать программы Angular 6

kratkoe rukovodstvo kotoroe pomozhet vam ponyat i sozdat programmy angular?v=1656562336

Этот пост разделен на две части:

Первая часть демонстрирует, как создать простую программу Angular 6 с помощью Angular CLI и объясняет структуру проекта.

Вторая часть объясняет существующий код, который я опубликовал на GitHub. Этот код показывает использование компонентов, служб, HTTP клиента и связь между компонентами.

Часть 1

Установите Node.js, если нет

Вам нужен Node.js, поскольку библиотеки, необходимые для Angular, загружаются с помощью менеджера пакетов узлов (npm). Обратитесь к установке Node.js.

Установите Angular CLI

Angular CLI – это интерфейс командной строки для Angular, который очень полезен для быстрого создания шаблона проекта Angular 6. Установите пакет Angular CLI npm глобально, используя следующую команду:

npm install -g @angular/cli

Создайте проект

Angular CLI помогает создать проект очень легко. Чтобы создать проект, используйте эту команду.

ng new simple-angular6-app

simple-angular6-app это название проекта. Теперь вы заметите, что видите папку с именем simple-angular6-app. Папка – это созданный проект. Чтобы проверить, правильно ли все было настроено, перейдите в папку проекта и запустите программу с помощью следующих команд.

cd simple-angular6-app
npm start

Перейдите в свой браузер и перейдите по следующему URL-адресу: локальный хост: 4200. Вы должны видеть, что ваше приложение работает.

Приложение будет выглядеть так:

HBxcPkVdbdA0Bt0XLfs7cnnpuyyOU4DUIG0Z

Объяснение основной структуры папок

Когда вы создаете проект, вы заметите, что он создает кучу файлов. Здесь я перечислю некоторые из важных файлов и папок, о которых вы должны знать:

  1. package.json: Этот файл содержит список необходимых зависимостей узлов.
  2. src/styles.css: Этот файл имеет глобальный CSS, доступный по всей программе.
  3. src/main.ts: Это основной файл, запускающий программу Angular (здесь загружается AppModule, как показано в коде). Здесь расширение .ts означает TypeScript.
  4. src/index.html: Это первый файл, который выполняется вместе с main.ts при загрузке страницы.
  5. src/app/app.module.ts: Это файл, в котором определены все компоненты, поставщики и модули. Без определения их здесь они не могут быть использованы в другом месте кода.
  6. src/app/app.component.html: Это основной компонент приложения angular и все остальные компоненты обычно присутствуют в этом компоненте. src/app/app.component.ts является логикой для этого компонента, и src/app/app.component.css это CSS для этого компонента. Этот компонент сам по себе не выполняет никакой важной логики, но действует как контейнер для других компонентов.
  7. dist: Эта папка содержит встроенные файлы. TypeScript в основном преобразуется в JavaScript, и полученные файлы сохраняются здесь после объединения и минификации. (Эта папка появляется только в том случае, если приложение создано. Простой “npm start” не создаст эту папку. ) Поскольку веб-браузеры понимают только JavaScript (по крайней мере), необходимо конвертировать TypeScript в JavaScript перед развертыванием кода . Чтобы увидеть эту папку, вы можете ввести следующее в командной строке:
npm run build

Существует также несколько других файлов, но для начала хорошо знать эти основные файлы

TypeScript

Angular 6 использует TypeScript для реализации логики. Те из вас, кто работал на Java, найдут TypeScript очень лёгким. TypeScript – это язык, построенный на основе JavaScript, но безопасный для типов, а TypeScript, в свою очередь, компилируется в JavaScript

Создание компонентов и сервисов

  1. Компонент: Компонент в Angular выполняет определенную функцию. Приложение Angular создается с использованием разных компонентов. Angular CLI может использоваться для легкого создания компонентов. Синтаксис такой ng generate компонент [name]. Используйте следующую команду для создания компонента под названием «клиенты».
ng generate component customers

2. Вышеуказанная команда создает папку с названием клиентов внутри src/приложение. Созданный компонент имеет:

  • а customer.component.html файл, чтобы определить шаблон (как должен выглядеть интерфейс пользователя компонента)
  • а customer.component.ts файл, в котором находится логика
  • а customer.component.css файл с содержимым CSS
  • и а customer.component.spec.ts файл, используемый для модульного тестирования (спецификация не будет разъяснена в этой публикации).

3. Обслуживание: Сервис в основном предоставляет функциональность, которую может использовать любой компонент. Службу можно совместно использовать для всех компонентов или ее можно ограничить отдельным компонентом (любую логику многократного использования можно добавить в службу). Angular CLI можно также использовать для создания сервисов. Синтаксис такой ng generate service [name]. Используйте такую ​​команду, чтобы создать службу под названием «данные»:

ng generate service data

4. Сервис создается внутри src/приложение. Созданный сервис имеет a data.service.ts файл, имеющий логику и a data.service.spec.ts файл для модульного тестирования

Приветствую ?

Вы успешно создали свое первое приложение Angular 6, а также научились создавать компоненты и службы. Также теперь вы узнали основную структуру папок проекта Angular 6. Следующая часть объясняет существующий GitHub код, чтобы продемонстрировать, как использовать компоненты, службы, HTTP-клиент и связь между компонентами.

Часть 2

код

Этот код объясняется здесь, поэтому клонируйте репо на вашу локальную машину. Репо содержит инструкции по его клонированию и настройке.

URL-адрес программы

Чтобы увидеть, как выглядит конечная программа, вы можете нажать этот URL. Это даст вам хорошее представление о том, что приложение пытается сделать.

На мобильном экране приложение будет выглядеть так:

r31wXEDd34foI8fcVwbjw7xv16jQ6RcfVUlM

Что делает это приложение?

Целью программы является отображение списка клиентов в виде карт. При нажатии данных клиента программа переключается на новую страницу, на которой отображаются подробности выбранного клиента.

Объяснение структуры программы

Созданные компоненты:

  1. CustomersComponent: Это отвечает src/app/customers папку. Этот компонент предназначен для отображения списка клиентов. The customer.component.ts файл имеет функцию под названием ngOnInit(). Эта функция вызывается всякий раз, когда компонент загружается. Таким образом, эту функцию можно использовать для скачивания данных для компонента. Эти данные загружаются по вызову getCustomerList() функция. getCustomerList() в свою очередь, вызывает службу передачи данных, чтобы получить необходимые данные.
  2. CustomerdetailsComponent: Это отвечает src/app/customerdetails папку. Этот компонент отображает детали для одного выбранного клиента. The customerdetails.component.ts файл имеет ngOnInit() функция, которая может использоваться для скачивания данных. Чтобы загрузить данные, getCustomerDetails() функция вызывается. Эта функция производит вызов в службу данных для получения необходимых данных. Но здесь вы также заметите использование routeParams.id отправляемый в службу. routeParams используется для получения параметров с URL-адреса программы, и id Параметр используется, чтобы узнать, для какого клиента необходимо загрузить данные. Это станет понятнее, когда я перейду к части маршрутизации.
  3. DisplayComponent: Это отвечает src/app/display папку. Этот компонент отображает имя клиента, на которое было нажато CustomersComponent. (Суть этого компонента состоит в том, чтобы продемонстрировать коммуникацию между родительским и дочерним компонентом.) Это дочерний компонент CustomersComponent. в customer.component.html вы это заметите . Это делает DisplayComponent дочерним компонентом. CustomersComponent. Данные передаются с CustomerComponent к DisplayComponent используя [customer] атрибут.

Образец данных

Образец данных присутствует в src/assets/samplejson папку.

Созданные сервисы:

  1. DataService: Это отвечает src/app/data.service.ts. Весь JSON, используемый в программе, хранится в файле src/assets/samplejson папку. DataService помогает получить JSON из файла src/assets/samplejson папку с помощью HTTP-запроса. В реальных программах сервис помогает получить данные из Rest API или любого другого API, сделав запрос HTTP. Этой услугой пользуются оба CustomersComponent и CustomerdetailsComponent.

Используются следующие классы моделей:

  1. Заказчик: Это отвечает src/app/customer.ts. Это класс модели, который используется для CustomersComponent для определения структуры каждого клиента в списке.
  2. CustomerDetails: Это отвечает src/app/customerdetails.ts. Для этого используется класс модели CustomerdetailsComponent определить структуру, содержащую все детали заказчика.

Модуль маршрутизации

Модуль маршрутизации определяется в src/app/app-routing.module.ts . Этот модуль затем применяется к программе с помощью добавления. <router-outlet></router-outlet> в app.component.html.

В приложении есть 2 маршрута:

  1. /заказчики: этот URL-адрес отображает список клиентов и указывает на него CustomersComponent.
  2. /customerdetails/:id: этот URL-адрес отображает детали для каждого клиента и указывает на него CustomerdetailsComponent. The id который присутствует в этом URL, является routeParam. Это id в свою очередь используется CustomerdetailsComponent знать, какие данные клиента отображать. Например /подробности клиента/1 отобразит детали первого клиента, /подробности клиента/3 отображается информация о 3-м клиенте и т.д.

Еще раз поздравляю ?

Теперь вы знаете, как использовать компоненты и сервисы. Также вы знаете, как совершать HTTP-вызовы, как использовать маршрутизацию и как передавать routeParams.

Основные концепции были отражены в этой публикации, и надеюсь, что это было полезно.

Ссылки:

  1. Чтобы узнать больше о Angular, вы можете просмотреть документацию. Документация очень хороша для понимания дальнейших концепций angular

Об авторе

Я люблю технологии и слежу за достижениями в технологиях. Мне также нравится помогать другим любыми знаниями, которые у меня есть в технологическом пространстве.

Не стесняйтесь связаться со мной в моем аккаунте LinkdIn https://www.linkedin.com/in/aditya1811/

Вы также можете подписаться на меня в Twitter https://twitter.com/adityasridhar18

Мой веб-сайт: https://adityasridhar.com/

Краткое руководство, которое поможет вам понять и создать программы ReactJS

Краткое поступление в Vue.js

Добавить комментарий

Ваш адрес email не будет опубликован.