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

Цей пост розділений на дві частини:

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

Друга частина пояснює існуючий код, який я розмістив у GitHub. Цей код демонструє використання компонентів, служб, HTTP-клієнта та зв’язок між компонентами.

Частина 1

Встановіть Node.js, якщо його ще немає

Вам потрібен Node.js, оскільки бібліотеки, необхідні для Angular, завантажуються за допомогою диспетчера пакетів вузлів (npm). Зверніться до //nodejs.org/en/, щоб встановити 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-адресою: localhost: 4200. Ви повинні бачити, що ваша програма працює.

Додаток буде виглядати так:

Пояснена основна структура папки

Створюючи проект, ви помітите, що він створює купу файлів. Тут я перелічу деякі важливі файли та папки, про які вам слід знати:

  1. package.json: Цей файл містить список необхідних залежностей вузлів.
  2. src / styles.css : Цей файл має глобальний CSS, доступний у всій програмі.
  3. src / main.ts : Це основний файл, який запускає Angular Application (AppModule тут завантажується, як показано в коді). Тут розширення .ts розшифровується як TypeScript.
  4. src / index.html : це перший файл, який виконується разом із main.ts при завантаженні сторінки.
  5. src / app / app.module.ts : Це файл, де визначено всі компоненти, провайдери та модулі. Без їх визначення тут їх не можна використовувати деінде в коді.
  6. src / app / app.component.html: це основний компонент кутової програми, і всі інші компоненти, як правило, присутні в цьому компоненті. 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 створюється за допомогою різних компонентів. Кутовий CLI можна використовувати для простого створення компонентів. Синтаксис - ng generate component [name]. Використовуйте наступну команду, щоб створити компонент під назвою «клієнти».
ng generate component customers

2. Вищевказана команда створює папку з назвою клієнти всередині src / app . Створений компонент має:

  • customers.component.html файл вирішити шаблон (як компонент для користувача інтерфейсу повинен виглядати)
  • customers.component.ts файл, в якому логіка присутня
  • customers.component.css файл , який має зміст CSS
  • і файл customers.component.spec.ts, який використовується для модульного тестування (специфікація не буде пояснюватися в цьому пості).

3. Сервіс : Сервіс в основному забезпечує функціональність, яку може використовувати будь-який компонент. Послуга може бути спільною для всіх компонентів, або вона може бути обмежена певним компонентом (будь-яка логіка багаторазового використання може бути поміщена в службу). Кутовий CLI також можна використовувати для створення служб. Синтаксис - служба генерування [ім’я]. Використовуйте таку команду, щоб створити службу під назвою «дані»:

ng generate service data

4. Послуга створюється всередині src / app. Створена служба має файл data.service.ts, який має логіку, і файл data.service.spec.ts для модульного тестування.

Вітаємо ?

Ви успішно створили свою першу програму Angular 6, а також навчилися створювати компоненти та служби. Також тепер ви дізналися основну структуру папок проекту Angular 6. У наступній частині буде пояснено існуючий код GitHub, щоб продемонструвати, як використовувати компоненти, служби, HTTP-клієнт та зв'язок між компонентами.

Частина 2

Код

Цей код пояснюється тут, тому клонуйте репо на вашій локальній машині. У репозиторії є інструкції щодо клонування та налаштування.

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

Щоб побачити, як виглядає остаточна заявка, ви можете натиснути на цю URL-адресу. Це дасть вам хороше уявлення про те, що намагається зробити програма.

Додаток буде виглядати так на мобільному екрані:

Що робить ця програма?

Метою програми є відображення списку клієнтів у вигляді карток. Після натискання даних клієнта програма перемикається на нову сторінку, яка потім відображає деталі обраного клієнта.

Пояснена структура застосування

Створені компоненти:

  1. CustomersComponent : Це відповідає папці src / app / customers . Цей компонент повинен відображати список клієнтів. У customers.component.tsфайл має функцію, яка називається ngOnInit () . Ця функція викликається щоразу, коли компонент завантажується. Отже, цю функцію можна використовувати для завантаження даних компонента. Ці дані завантажуються за допомогою виклику функції getCustomerList () . getCustomerList (), у свою чергу, викликає службу даних, щоб отримати необхідні дані.
  2. CustomerdetailsComponent : Це відповідає папці src / app / customerdetails . Цей компонент відображає деталі для одного обраного клієнта. Файл customerdetails.component.ts має функцію ngOnInit (), яку можна використовувати для завантаження даних. Для завантаження даних викликається функція getCustomerDetails () . Ця функція здійснює дзвінок до служби передачі даних, щоб отримати необхідні дані. Але тут ви також помітите використання routeParams.id, яке надсилається до служби. routeParams використовується для отримання параметрів з URL-адреси програми та ідентифікатораПараметр використовується, щоб дізнатись, для якого клієнта потрібно завантажити деталі. Це стане більш зрозумілим, коли я перейду до частини маршрутизації.
  3. DisplayComponent : Це відповідає папці src / app / display . Цей компонент відображає ім'я замовника, натиснуте в CustomersComponent. (Весь сенс цього компонента полягає в тому, щоб продемонструвати спілкування батьківського та дочірнього компонентів.) Це дочірній компонент CustomersComponent . У customers.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-запиту. У реальних додатках служба допомагає отримувати дані з API відпочинку або будь-якого іншого API, роблячи запит HTTP. Цією послугою користується і CustomersComponentта CustomerdetailsComponent.

Класи моделей, які використовуються:

  1. Клієнт : Це відповідає src / app / customer.ts . Це клас моделі, який використовується для CustomersComponent для визначення структури кожного клієнта у списку.
  2. CustomerDetails : Це відповідає src / app / customerdetails.ts . Це клас моделі, який використовується для CustomerdetailsComponent для визначення структури, що містить усі дані про клієнта.

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

Модуль маршрутизації визначений у src / app / app-routing.module.ts . Потім цей модуль застосовується до програми шляхом додавання в app.component.html.

У додатку є 2 маршрути:

  1. / customers : Ця URL-адреса відображає список клієнтів і вказує на CustomersComponent.
  2. / customerdetails /: id : Ця URL-адреса відображає деталі кожного клієнта та вказує на CustomerdetailsComponent . Ідентифікатор , який присутній в цьому URL є routeParam. Цей ідентифікаторв свою чергу використовується CustomerdetailsComponent, щоб знати, які дані про клієнта відображати. Наприклад, Example / customerdetails / 1 відображатиме деталі першого клієнта, / customerdetails / 3 - деталі третього клієнта тощо.

Знову вітаю ?

Тепер ви знаєте, як користуватися компонентами та послугами. Також ви знаєте, як здійснювати HTTP-дзвінки, як використовувати маршрутизацію та як передавати routeParams.

Основні поняття висвітлено в цій публікації, і, сподіваюся, це було корисно.

Список літератури:

  1. Щоб дізнатись більше про Angular, ви можете перевірити документацію //angular.io/guide/quickstart. Документація дуже хороша для розуміння подальших концепцій кутових

Про автора

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

Не соромтеся зв’язуватися зі мною у своєму обліковому записі LinkdIn //www.linkedin.com/in/aditya1811/

Ви також можете стежити за мною у твіттері //twitter.com/adityasridhar18

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

Інші пов’язані повідомлення від мене

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

Короткий вступ до Vue.js