Угловой 6 Фундаментальный

Мы все привыкли начинать новое обучение традиционно с определений, поэтому здесь мы начнем с определения «Angular - это платформа, которая упрощает создание приложений в Интернете. Angular сочетает в себе декларативные шаблоны, внедрение зависимостей, сквозные инструменты и интегрированные лучшие практики для решения проблем разработки. Angular дает разработчикам возможность создавать приложения для Интернета, мобильных устройств или настольных компьютеров ».

Больше смущает это определение Не волнуйтесь

Мы рассмотрим более простой способ понять Angular, а затем перейдем, чтобы понять разницу между Angular и AngularJS и почему Angular. После этого мы рассмотрим, как установить и настроить среду разработки. наконец-то понять Angular и то, как он работает.

Что такое Angular?

Angular - это основанная на TypeScript платформа интерфейсных веб-приложений с открытым исходным кодом, возглавляемая командой Angular в Google и сообществом частных лиц и корпораций. Angular - это полностью переписанный продукт той же команды, которая создавала AngularJS.

Что такое AngularJS?

AngularJS - это основанная на JavaScript платформа интерфейсных веб-приложений с открытым исходным кодом, которая в основном поддерживается Google и сообществом частных лиц и корпораций для решения многих проблем, возникающих при разработке одностраничных приложений.

В чем разница между AngularJS и Angular?

Преимущества Angular

Преимущества:

Angular разработан с использованием Typescript, что позволяет нам оптимизировать код с использованием концепции ООП.
Поскольку вы являетесь продуктом Google, у вас есть живое и активное сообщество поддержки, а также множество преимуществ, предоставляемых Google.
Интерфейс командной строки - интерфейс командной строки Angular упрощает настройку среды angular, что приводит к легкому созданию скелета.
Существует множество активных форумов, где вы можете получить немедленную и надежную поддержку.

Недостатки:

Веб-разработчик должен быть знаком с TypeScript, прежде чем начинать разработку на Angular.
Когда вы собираетесь создать простое веб-приложение размером примерно 2 МБ, нелепо использовать Angular с огромными 200 МБ «node_modules».

Установить Angular

Предварительные требования

Angular 6 требует Node.js версии 8.x или 10.x.
Angular, Angular CLI и приложения Angular зависят от функций и возможностей, предоставляемых библиотеками, доступными в виде пакетов npm. Для загрузки и установки пакетов npm у вас должен быть менеджер пакетов npm, который по умолчанию устанавливается вместе с Node.js.

Установите nodejs по этой ссылке для пользователей ubuntu / Debian: https://github.com/nodesource/distributions/blob/master/README.md

Если установка завершена, проверьте свою версию, используя следующую команду в терминале:

node -v
npm -v

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

Вы используете Angular CLI для создания проектов, генерации кода приложений и библиотек, а также для выполнения множества текущих задач разработки, таких как тестирование, объединение и развертывание.

Установите Angular CLI глобально.

npm install -g @angular/cli

3. Создайте рабочее пространство и начальное приложение.

Рабочее пространство содержит файлы для одного или нескольких проектов. Проект - это набор файлов, составляющих приложение, библиотеку или сквозные (e2e) тесты.

«Ng new» - это команда CLI для создания нового приложения angular и предоставления имени приложения, как показано ниже:

ng new my-app

4. Подайте заявку.

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

cd my-app
ng serve --open

Команды Angular CLI

Использование встроенной команды генератора в Angular CLI позволяет легко создавать компоненты вашего приложения, не беспокоясь о правильном включении кода в ваше приложение. Angular CLI генерирует файлы в соответствующем формате и изменяет ваши файлы, чтобы правильно включить вновь созданный компонент. Некоторые из различных генераторов, которые может запускать Angular CLI:

Модули ng g module my-module
Компоненты компонента my-component
Директивы ng g directive my-directive
Трубы из трубы my-pipe
Услуги ng g service my-service
Классы g class my-class
Охранники охраняют мою охрану
Интерфейсы интерфейса my-interface
Перечисляет перечисление my-enum

Новые термины в Angular

Украшения (@ - Декоратор)

Пример:

@NgModule - Декоратор имеет атрибут

Модули Angular (например, app.module.ts) состоят из дискретного набора атрибутов, которые вы используете для описания модуля. Они перечислены здесь:

объявления (объявить компоненты) - это список компонентов, директив и каналов, которые являются частью конкретного модуля, который вы создаете. Все в объявлении видно приложению, использующему этот модуль, и не требует явного экспорта.
импорт - с помощью операторов импорта вы можете сделать другие модули видимыми в этом модуле. Импорт других модулей не является неявным экспортом этих других модулей, то есть просто, если другой разработчик импортирует ваш модуль, он не сможет увидеть модули, которые вы импортировали.
экспорт - это список или любые объявления, которые вы хотите сделать доступными (видимыми) для других модулей, которые могут импортировать этот модуль.
провайдеры - используются для вывода списка провайдеров для настройки инжектора, когда этот модуль импортируется другими модулями.
entryComponents - представляет собой список компонентов, для которых должна быть создана ComponentFactory. В основном используется для динамической загрузки компонентов.

Внедрение зависимостей

Внедрение зависимостей (DI) - это шаблон проектирования программного обеспечения, который управляет тем, как компоненты в системе получают свои зависимости. В Angular внедрение зависимостей отвечает за:

Создание компонентов
Поддержание состояния компонента
Предоставление компонентов другим компонентам по мере необходимости

В Angular DI позволяет нам совместно использовать переменные и функции между автономными модулями без повторного использования кода и поддерживает состояние каждого компонента.

DI использует инжектор, объект (ы) службы, который будет использоваться, объект клиента, который зависит от служб, которые он использует, и интерфейсы.

HttpClient

Angular 4.3 и выше используют библиотеку HttpClient в качестве механизма для обработки HTTP-запросов в вашем приложении Angular.

HttpClient в Angular предоставляет упрощенный механизм для доступа к функциям HTTP в ваших клиентских приложениях. Он поддерживает возможность тестирования, строго типизированный объект запроса и ответа и улучшенную обработку ошибок.

Прежде чем вы сможете использовать HttpClient в своем приложении Angular, вы должны импортировать HttpClientModule в Module:

import {HttpClientModule} from ‘@angular/common/http’;
@NgModule({
imports: [
BrowserModule,
HttpClientModule,
],
})

HttpClient импортируется в начало файла, а затем в части @Injectable мы используем конструктор для создания экземпляра компонента для использования в нашем приложении:

import { Injectable } from '@angular/core';
import { GitSearch } from './git-search';
import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/toPromise';
@Injectable()
export class GitSearchService {
cachedValues: Array<{
[query: string]: GitSearch
}> = [];
private http: HttpClient
constructor(http: HttpClient) {
this.http = http
}

Сервис

Службы - это тип компонента в Angular, который специально разработан для создания многоразовой логики, которую можно внедрить в несколько компонентов. Это делает их идеально подходящими для задачи разделения взаимодействий API, и это их наиболее распространенный вариант использования.

Когда вы используете службу для удержания взаимодействий с API, вы можете легко добавить дополнительные функции к методам API, такие как кеширование, и разрешить вашим компонентам подписаться на один экземпляр вызова API, предотвращая ненужные обращения к серверу.

Создать службу

ng generate service service-name

Эта единственная команда использует Angular CLI, вызывает команду generate для создания службы и присваивает ей имя service-name.

В результате будет создан файл с именем service-name.service.ts в папке src / app вашего проекта.

Если вы откроете эту папку, вы должны увидеть следующее:

import { Injectable } from ‘@angular/core’;
@Injectable()
export class service_nameService {
constructor() { }
}

Примечание. @Injectable () - позволяет внедрять эту службу в другие компоненты.

Использование службы

Как только вы все сделаете, добавьте service_name в раздел provider: вашего компонента, как показано здесь:

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [service_name],
bootstrap: [AppComponent]
})
export class AppModule { }

Promise vs Observer в работе - http

Promise: Promise обрабатывает одно событие, когда асинхронная операция завершается или терпит неудачу.

Примечание. Существуют библиотеки Promise, которые поддерживают отмену, но ES6 Promise пока не поддерживает.

Observable: Observable похож на Stream (на многих языках) и позволяет передавать ноль или более событий, при этом обратный вызов вызывается для каждого события.

Часто Observable предпочтительнее Promise, потому что он предоставляет функции Promise и многое другое. С Observable не имеет значения, хотите ли вы обрабатывать 0, 1 или несколько событий. В каждом случае вы можете использовать один и тот же API.
Observable также имеет преимущество перед обещанием быть отменяемым. Если результат HTTP-запроса к серверу или какой-либо другой дорогостоящей асинхронной операции больше не нужен, Подписка Observable позволяет отменить подписку, а Promise в конечном итоге вызовет успешный или неудачный обратный вызов, даже если вы этого не сделаете. больше не нужно уведомление или результат, который он предоставляет.
Observable предоставляет такие операторы, как map, forEach, reduce,… аналогично массиву.
Существуют также мощные операторы, такие как retry () или replay (),… которые часто весьма удобны.

Библиотека RxJS

RxJS (Reactive Extensions for JavaScript) - это библиотека для реактивного программирования с использованием наблюдаемых объектов, которая упрощает создание асинхронного кода или кода на основе обратного вызова.

RxJS предоставляет реализацию типа Observable, который необходим до тех пор, пока тип не станет частью языка и пока браузеры не поддержат его. Библиотека также предоставляет служебные функции для создания наблюдаемых объектов и работы с ними. Эти служебные функции можно использовать для:

Преобразование существующего кода для асинхронных операций в наблюдаемые
Перебор значений в потоке
Сопоставление значений с разными типами
Фильтрация потоков
Составление нескольких потоков

Интерфейс TypeScript

Интерфейсы TypeScript описывают форму объекта данных, включая типы всех его параметров. Это особенно полезно, поскольку дает вашему приложению шаблон для ожидаемых типов вывода объекта, которому следует следовать, что позволяет автоматически заполнять предложения и анализировать код объекта, который вы ожидаете получить от API. Чтобы сгенерировать интерфейс:

ng generate interface first-interface

Компоненты

Компонент отвечает за управление представлением или частью экрана. Вы создаете класс для хранения логики приложения, которая является частью компонента. Компонент Angular состоит из шаблона. Шаблон состоит из HTML для макета и используется для определения отображаемого содержимого на странице.

Команда Angular CLI - это ng generate component, за которым следует имя компонента, которое вы хотите использовать, например:

ng generate component component-name

Это приведет к созданию новой структуры папок в корневой папке вашего приложения Angular. В этой папке будет создан ряд файлов:

Файл машинописного текста (.ts) с расширением .ts, содержащий логику для компонента, и это место, куда вы должны поместить методы, интеграцию служб и другую логику.
Файл CSS (.css) автоматически добавляется в ваш компонент. Вы можете писать CSS, который автоматически привязан к вашему компоненту с помощью Angular, без необходимости беспокоиться о повторном использовании классов.
HTML-файл (.html) - это то место, где вы будете писать свой шаблон представления.
Файл теста Karma (.spec.ts) - это то место, где вы потенциально можете написать любые тесты Karma для компонента.

Когда вы откроете файл .ts, вы обнаружите эти общие аспекты как часть компонента:

import { Component } from @angular/core
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
title: string = 'Page Title';
})

Это сегмент, в котором вы определяете свой компонент. @ - это символ TypeScript, который помогает нам описать директиву Angular. В этом случае @Component - это директива, которая сообщает Angular, что мы хотим создать новый компонент.

@Component body содержит:

селектор - указывает имя тега HTML, который будет содержать этот компонент при запуске приложения. В HTML вы найдете теги ‹app-root› ‹/app-root› для этого компонента.
templateUrl - использование этой опции позволяет вам указать шаблон, который будет содержать HTML для этого компонента. Вы также можете использовать параметр template: и указать «встроенный» HTML прямо в теле компонента.
styleUrls - это ссылка на внешнюю таблицу стилей CSS, которая будет применена к рендерингу HTML компонента.

экспортный класс AppComponent:

Ключевое слово export - это то, что позволяет вашему компоненту быть доступным для импорта в другие файлы проекта.

Примечание. Каждый компонент должен быть импортирован в один (и только один) @NgModule, а массив объявлений содержит список всех компонентов, доступных в этом модуле.

Привязка

Привязка отвечает за связь между нашими данными (моделью) и нашим пользовательским интерфейсом (представлением).

Связывание позволяет нам передавать данные в пользовательский интерфейс с помощью свойств в классе, который определяет нашу модель, и использования директив, которые используют концепцию, известную как интерполяция. Интерполяция - это механизм, используемый для представления в шаблоне заполнителя для данных, которые будут отображаться.

Данные для привязки:

В Angular есть четыре типа привязки. Привязка интерполяции, привязка свойств, привязка событий и двусторонняя привязка.

Привязка интерполяции:

<h1>{{title}}</h1>

2. Привязка собственности:

То же самое и с привязкой свойств

<h1 [innerHTML] = ‘title’></h1>

3. Привязка событий:

Например, мы могли бы захотеть выполнить определенное действие в нашем классе, когда пользователь нажимает кнопку. В этом случае мы бы использовали синтаксис

<button (click) = ‘toggleFlag()’>

4. Двусторонняя привязка позволяет нам создавать интерактивность или обновлять наши данные, когда пользователь выполняет действие с пользовательским интерфейсом:

<input [(ngModel)] = ‘filter’>

Труба и директивы

Угловые трубы

Канал позволяет вам использовать данные в качестве входных данных для конвейера и преобразовывать их в более желаемый результат.
Angular на самом деле имеет набор встроенных каналов для общих задач, таких как DatePipe, UpperCasePipe, LowerCasePipe и CurrencyPipe.

Директивы

Директивы Angular отвечают за обеспечение функциональности в приложении Angular и помогают преобразовать объектную модель документа (DOM).
Есть два типа директив:

1. Структурные директивы

Структурные директивы - это то, что вы используете для изменения макета страницы, манипулируя DOM. Директива атрибута просто изменит поведение или внешний вид существующего элемента DOM.

Пример: * ngIf

Эта директива будет оценивать логическое выражение и в зависимости от результата либо показывает, либо скрывает элемент HTML, как в следующем примере.

<p *ngIf=”true”>
If the expression is true and ngIf is true, this content is displayed in the DOM.
</p>
<p *ngIf=”false”>
If the expression is false and ngIf is false, this content will NOT be displayed in the DOM.
</p>

2. Директивы атрибутов

Директивы атрибутов отвечают за изменение внешнего вида элемента, к которому они прикреплены, а не за создание или удаление элементов, как это делают структурные директивы.

Пример: [(ngModel)], [ngClass], [href]

[ngClass]

Директива ngClass позволяет динамически применять CSS к элементу. Директива использует выражение для оценки применяемого CSS. Пример лучше проиллюстрирует это.

<p ng-class=”{strike: deletedText, bold: important, ‘has-error’: highlight}”>Sample Text</p>
<label>
<input type=”checkbox” ng-model=”deletedText”>
Strike Through for Deleted Text (apply the “strike” class)
</label><br>
<label>
<input type=”checkbox” ng-model=”important”>
Important Text (apply the “bold” class)
</label><br>
<label>
<input type=”checkbox” ng-model=”error”>
Show Where an Error Is (apply the “has-error” class)
</label>

[(ngModel)]

ngModel может быть настроен для работы как в одностороннем порядке (когда изменения в модели компонента будут отражаться в представлении автоматически), так и в двухстороннем (когда изменения в поле ввода пользователем также будут отражаться в модели компонента).
Нам нужно импортировать FormsModule и ReactiveFormsModule, чтобы иметь возможность использовать ngModel. Добавьте их в блок импорта, а затем добавьте FormsModule в массив импорта в объявлении @NgModule.

Жизненный цикл Angular

Компоненты в Angular имеют жизненный цикл. Angular следует жизненному циклу, аналогичному по последовательности:

Создайте компонент
Визуализировать компонент
Создание / рендеринг любых дочерних элементов
Изменения процесса в компоненте (в процессе)
Уничтожить компонент

Есть некоторые общие события или методы, которые вы будете использовать для взаимодействия с вашими компонентами Angular, пока ваше приложение загружается, запускается и завершается. Вы также можете увидеть, что они называются перехватчиками жизненного цикла или перехватчиками жизненного цикла компонентов.

Вы будете работать с тремя наиболее распространенными методами:

OnInit - используется для инициализации компонента (ов) или, возможно, получения данных для приложения по мере его загрузки.
OnChanges - используется для выполнения действия после изменения свойств ввода.
OnDestroy - используется для очистки компонента и ресурсов при уничтожении компонента.

Маршрутизация

Поскольку ваше приложение Angular по сути представляет собой один большой файл JavaScript, встроенный в одну страницу, Angular должен использовать специальный код маршрутизации, который преобразует URL-адрес, введенный в адресную строку вашего браузера, в компоненты, отображаемые движком JavaScript Angular.

Angular использует JavaScript и компоненты для обработки функций маршрутизации в ваших одностраничных приложениях Angular.

Чтобы использовать маршрутизацию в нашем приложении, включите модуль маршрутизатора в файл приложения module.ts:

import { RouterModule, Routes } from ‘@angular/router’;

На верхнем уровне index.html или другом вашем первом файле, который используется по умолчанию, добавьте этот тег в качестве первого дочернего элемента в теге ‹head›:

<base href=”/”>

Если у приложения будет несколько маршрутов, вам необходимо включить постоянную переменную с типом Routes: который представляет собой массив объектов с двумя обязательными параметрами: путь и компонент.

import { RouterModule, Routes } from ‘@angular/router’;
const appRoutes: Routes = [
{ path: ‘’,
component: HomePageComponent
},
{ path: ‘search’,
component: GitSearchComponent,
data: {
title: ‘Git Search’
}
},
{ path: ‘**’, component: NotFoundComponent }
];
@NgModule({

объект данных в маршруте поиска, который является удобным местом для хранения произвольных данных, связанных с конкретными маршрутами, которые могут использоваться в ваших компонентах.
«**» - это маршрут с подстановочными знаками, который можно использовать для отображения NotFoundComponent - или, по сути, страницы 404 - для любых маршрутов, которые не совпадают.

Добавьте объявление RouterModule, чтобы сделать только что настроенные маршруты доступными для приложения:

imports: [
BrowserModule,
FormsModule,
HttpClientModule,
RouterModule.forRoot(
appRoutes
)
],

Параметры маршрута и динамическая маршрутизация

Параметры маршрута

Например, сначала отображается список продуктов, а затем отображается подробная информация о конкретном продукте, когда пользователь щелкает продукт в списке. Параметр маршрутизатора - это то, что будет использоваться для определения правильного продукта для отображения.

Шаги по использованию параметров маршрута в вашем коде:

1. Добавьте параметр маршрута в свои маршруты.

2. Ссылка на нужные маршрутизаторы с параметрами.

3. Прочтите параметры маршрута, чтобы загрузить правильные данные.

Добавить параметр маршрута к вашим маршрутам так же просто, как создать правильный маршрут с использованием идентификатора path: и затем включить параметр, такой как ID, в эту запись, как показано в следующем примере:

const appRoutes: Routes = [
{ path: ‘’, redirectTo: ‘all-products’, pathMatch: ‘full’ },
{ path: ‘all-products’, component: ProductList },
{ path: ‘product-details/:id’, component: ProductDetails }
];

В теге привязки ‹a› есть два специальных атрибута, которые называются routerLink и routerLinkActive. routerLink указывает ссылку на маршрут, который вы хотите активировать при нажатии. Атрибут routerLinkActive позволяет переключать определенный класс CSS, если текущий маршрут активен - особенно удобно, если вы создаете меню навигации.