Шпаргалка по Angular 6

Что делают различные фрагменты кода Angular.

Шпаргалка - это заметка для быстрого ознакомления. Возможно, вы захотите добавить эту страницу в закладки, так как я собрал некоторые из различных фрагментов кода из документов Angular и попытался объяснить их быстро и легко, чтобы помочь вам лучше понять Angular и лучше понять его, поскольку я сам горжусь тем, что являюсь экспертом по Angular ... Я сделал быстрый тест IQ на Pluralsight и обнаружил, что я немного ниже уровня эксперта, lol. Вот как я это сделал.

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

Самостоятельная загрузка.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
platformBrowserDynamic().bootstrapModule(AppModule);

Это запускает (загружает) приложение с использованием указанного модуля, в данном случае это AppModule. Загруженное приложение становится корневым модулем всего приложения Angular.

NgModules.

import { ngModule } from '@angular/core';

NgModule содержит метаданные, которые будут введены в приложение. К ним относятся объявления, импорт, экспорт, поставщики, бутстрап и схемы.

@ngModule({
  declarations: [AppComponent, HeaderComponent],
  imports: [BrowserModule, MatToolBarModule],
  exports: [MyDatePipe],
  providers: [HttpServiceProvider, LocalDataProvider],
  bootstrap: [AppModule],
  schemas: [NO_ERRORS_SCHEMAS]
})

Объявления определяют список компонентов, каналов и директив, которые следует использовать в модуле. Импорт определяет список модулей для импорта, и они должны быть доступны через объявления модулей, в которые они импортируются. Экспорт - это компоненты, директивы и каналы, которые доступны модулям, которые импортируют этот конкретный модуль (приложение). поставщики - это службы, которые вводят данные в модуль и реализуют внедрение зависимостей. Метаданные начальной загрузки содержат компоненты для начальной загрузки, как только Загрузочный модуль AppModule. Наконец, схемы - это элементы и свойства, которые не являются директивами Angular и не компонентами, которые вы хотели бы добавить в приложение.

Доступны две схемы: NO_ERRORS_SCHEMA, которые определяют любой элемент и разрешенные свойства, и CUSTOM_ELEMENTS_SCHEMA, которые указывают, что любой настраиваемый элемент (имена элементов со знаком «-») с любыми свойствами являются разрешается. Примеры пользовательских элементов схемы: ‹mat-toolbar›

Синтаксис шаблона.

Вот некоторые из синтаксиса шаблонов для HTML и объяснения к каждому из них.

<input [value]="firstName">

Это связывает свойство значение с результатом выражения firstName из компонента.

<div [attr.role]="myRole"> </div>

Это привязывает атрибут роль к результату выражения myRole из компонента.

<div [class.active]="isActive"> </div>

Это привязывает CSS-класс active к элементу div в зависимости от того, является ли выражение isActive в компоненте истинным или ложным.

<div [style.width.px]="width"> </div>

Это привязывает ширину свойства style в пикселях к значению выражения width в компоненте.

<button (click)="doSomething($event)"> Click Me </button>

Это вызывает метод / функцию doSomething при передаче объекта события в функцию, когда для элемента запускается событие щелчка.

<p title="My name is {{name}}"> </p>

Это связывает текстовое содержимое в интерполированную строку. Это похоже на [title] = "’ Меня зовут ’+ имя"

<p [(username)]="user" > </p>

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

<video #movieplayer>
  <button (click)="movieplayer.play()"> Play Movie </button>
</video>

При этом создается локальная переменная, доступная только компоненту movieplayer, которая дает доступ к экземпляру элемента video в выражениях привязки к событию и привязки данных.

<p *unless="expression"> </p>
//equivalent to
<ng-template [unless]="expression"> </ng-template>

Символ * превращает элемент во встроенный шаблон.

<p> Date: {{ currentDate | datetime }} </p>

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

<p> {{user?.username}} </p>

Это выражение делает поле user необязательным, если оно не определено с помощью оператора безопасной навигации (?), Остальная часть выражения также игнорируется.

Встроенные директивы.

Встроенные директивы импортируются из модуля angular / common.

import { CommonModule } from '@angular/common';

Давайте пройдемся по четырем из них.

<section *ngIf="show"> </section>

Это создает или скрывает (полностью удаляет, не путайте это со «скрытым» свойством HTML) элемент в зависимости от значения выражения show в компоненте.

<li *ngFor="let user of users"> </li>

Это делает элемент li шаблоном, а затем использует содержимое массива users для создания экземпляра представления для каждого элемента в списке. Это похоже на использование функции forEach в JS для создания представления для каждого элемента в массиве. Директива ngFor может использоваться только с массивами или строками.

<div [ngSwitch]="condition">
  <div [ngSwitchCase]="case1"> ... </div>
  <div [ngSwitchCase]="case2"> ... </div>
</div>

Это меняет местами содержимое div в зависимости от значения условия в выражении. Содержание изменяется в соответствии со значением, указанным в случае. Это работает аналогично атрибуту Switch в JS.

<div [ngClass]="{'active': isActive }"> </div>

Это привязывает CSS-класс active к элементу в зависимости от того, является ли выражение isActive истинным или ложным.

Декораторы классов.

Декораторы классов импортируются из модуля angular core, как показано ниже.

import { Directive, ...} from '@angular/core';

Замените директиву декоратором, который вы хотите использовать.

@Component({...})
class AppComponent() { }

Это объявляет, что класс является компонентом, а также предоставляет метаданные о компоненте.

@Directive({...})
class MyDirective() { }

Это объявляет, что класс является директивой, и предоставляет о нем метаданные.

@Pipe({...})
class MyPipe() { }

Это объявляет, что класс является каналом, и предоставляет метаданные о канале.

@Injectable()
class MyService() { }

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

И последнее в этой первой части ...

Формы.

import { FormsModule } from '@angular/forms';

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

<input [(ngModel)]="firstName">

Остальное будет предоставлено в назначенное время. Наберитесь терпения и огромное спасибо за прочтение этой статьи. Пожалуйста, оставьте несколько аплодисментов, если этот контент оказался для вас полезным, и не забудьте подписаться. ;)

Шпаргалка по Angular 6