Угловой2. Краткие справочные заметки | часть 1

Обзор компонентов

Итак, я начал изучать Angular4! Это похоже на интересное путешествие: у меня есть возможность увидеть, как другая команда разработчиков решает типичные проблемы, с которыми сталкивается js-фреймворк.

Я перечислил здесь первую часть своих знаний. Вы можете использовать это краткое справочное руководство.

Компоненты

Компоненты - это самый основной элемент приложений. Это кирпичики Lego, из которых будет составлен ваш двигатель. Эти элементы будут содержать свою собственную логику JS, структуру и стили HTML.

Чтобы создать компонент, вы можете запустить эту команду в консоли:

ng generate component componentName

Или это с более компактным синтаксисом:

ng g c componentName

Или создайте, следуя этим шагам, чтобы создать компонент вручную:

1. Создайте основной файл .ts

Создайте файл componentName / componentName.component.ts. Здесь просто определите класс, который будет придавать форму вашему компоненту, и экспортируйте его.

export class ComponentNameComponent {
   constructor(){}
}

Кроме того, не забудьте настроить этот класс на шаблонную структуру компонента с декоратором. Импортируйте функцию декоратора из angular и определите минимальные настройки, selector и templateUrl (или шаблон).

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


@Component({
    selector: 'app-component-name',
    templateUrl: './header.component.html'
})
export class ComponentNameComponent {
    constructor() {}

}
  • selector определяет способ вызова этого компонента в приложении. Это может быть селектор HTML (по умолчанию), атрибут или событие класса.
  • templateUrl определяет путь к html-шаблону компонента.
  • или шаблон позволяет определить встроенный HTML-шаблон (полезно для небольших компонентов)

Здесь вы можете определить множество других свойств. Они перечислены здесь.

2. Создайте файл шаблона html.

Если вы указали свойство templateUrl, вам также потребуется добавить этот файл шаблона.

3. Включите компонент в модуль приложения.

В файле app.module.ts импортируйте вновь созданный компонент с помощью оператора import и добавьте его в массив объявлений модуля вашего приложения.

import { ComponentNameComponent } from './header/header.component';

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

Декораторы

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

Привязка свойств в шаблонах с []. Вы можете редактировать все свойства js элемента DOM.

[disabled]=“isDisabled”

Привязка событий в шаблонах с (). Т.е.

(click)=“myEvent()”;

Стандартные директивы как двухсторонняя привязка данных * с использованием директивы ngModel на входе.

[(ngModel)]=“propName”
  • Для двух способов привязки данных FormsModule должен быть включен в модуль приложения.

Структурные директивы требует * в синтаксисе. Он обрабатывает структуру элемента DOM, а не только свойства. Например:

<div *ngIf="isVisible"></div>

Местный справочник

Директивы

Директивы - это инструкции в модели DOM. Обычно селектор - это атрибут. Определяется декоратором @Directive.

Условные выражения if / else

Чтобы использовать простой оператор if, используйте

*ngIf=”condition”

Чтобы использовать else в условном выражении, нам нужно создать локальную ссылку с помощью #, добавить шаблон ng с этой ссылкой и улучшить с его помощью условие ngIf. Например:

<p *ngIf=”isDefined; else #notDefined”>It's defined!</p>
<ng-template #notDefined>
    <p>Not defined</p>
<ng-template>

Условный стиль

Используйте [ngStyle], равный объекту стилей, чтобы настроить стиль элемента. Например:

<div [ngStyle]="{backgroundColor: getBgColor()}">

NB. Шашлык из css props становится camelCase.

Условные классы

Используйте [ngClass] для условного задания классов

<div [ngClass]="{isActive: isActive()}">

Для каждой петли

Используйте структурную директиву ngFor.

<div *ngFor="let item of items">

Вы можете получить доступ к свойству index следующим образом:

<div *ngFor="let item of items; let i of index">

Typekit

Ограничение типа переменных

TypeScript дает вам возможность указать тип переменных. Нечто похожее на то, что вы можете (и должны) делать с propTypes в React.

Перво-наперво, когда вы создаете класс, вы должны инициализировать свойства, которые вы собираетесь использовать позже. Например:

class MyClass {
    public title: string;
    public id: number;

    constructor() { }
}

Определите тип переменной при объявлении с помощью :. Например

myStringVar: string = ‘Text text’

Чтобы определить переменную как массив чего-либо, в данном случае массив строк:

myArray: string[] = ['server1', 'server2'];

Определите тип встроенной переменной с помощью ‹type› myVar. Вы можете использовать скобки.

(<HTMLInputElement>event.target).value

Модели

Как вы знаете, Angular2 + полагается на машинописный текст для внутренней проверки кода. Поэтому неудивительно, что модели Angular - это чистые классы TS.

Модель состоит из класса TS, в котором мы определяем необходимые и возможные свойства. Например:

export class MyModel {
    public name: string;
    public description: string;

    constructor(name: string, desc: string) {
        this.name = name;
        this.description = desc;
    }
}

Это более компактный синтаксис:

export class MyModel {
    constructor(public name: string, public description: string) {}     
}

Этот код позволит нам создавать действительные рецепты с машинописным текстом. Для этого просто импортируйте модель и используйте для проверки объектов:

import { MyModel } from "../myModel.model";
[...]
export class RecipeListComponent implements OnInit {
  recipes: MyModel[] = [];

Эта статья - часть моего пути к изучению Angular4. Вот другие статьи: