lesson — Фул Стэк — программист

06.02.201906.02.2019

Angular 4 Jump start — краткий пересказ

Заметки:

// использование переменных в html
let i = index
// равнозначно
index as i

tslint.json — предназначен для редактирование (настройки) оформления проекта. В файле angular-cli.json указываются настройки CLI

Файл с расширением *.spec предназначен для тестирования.

// это и есть мета-данные
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

Для подмены префикса у компонентов, например в app-root, заменить app на название фирмы, нужно перейти в файл .angular-cli.json и найти свойство префикс и подменить его

06.02.201906.02.2019

Http запросы в Angular

Подключение HttpClient

// app.module.ts
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  ...
  imports: [
    ...
    HttpClientModule
  ],
  ...
})

Примечание: обработка данных происходит через объект Observable

06.02.201906.02.2019

Angular сервисы

Сервисы не имеют представлений

ng g service [имя сервиса]

Примечание!!! После генерации сервиса обновление app.component.ts не происходит.

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

И поэтому нам самим вручную нужно прописать ссылку на сервис в файле app.module.ts

06.02.201906.02.2019

Роутинг приложения. Первое приложение Angular

Чтобы объяснить как это работает проще перейти сразу к примера.

Для начала при помощи команды ng generate создадим пару страниц:

home
about
news
price
notfound

ng generate component [имя страницы]

05.02.201906.02.2019

NgStyle,NgClass. Динамическая стилизация компонентов

ngClass — позволяет определить набор классов которые применяются к элементу

<div [ngClass]="{class1: true}"> (1)
    <h1>Hello World!!!</h1>
    <p [ngClass]="{class2: true}">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam cupiditate
        voluptates sed voluptate a dolores
        ipsa dignissimos in nam cumque consequuntur, iste dolore? Voluptatum reiciendis doloremque eligendi
        dignissimos, iusto deleniti.</p>
</div>

.class1{
    color: red;
}

.class2{
    color: yellow;
}

Применение стилей для элемента осуществляется при помощи директивы ngClass, которой присваивается объект в виде строки «{class1:true}». Где class1 — имя класса, а параметр true — нужно применять класс или нет.

05.02.201905.02.2019

Двусторонняя привязка данных — ngModel

В app.module.ts импортируем модуль @angular/forms (1) В imports прописываем добавленный модуль (2)

...
import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms'; (1)
...

@NgModule({
  declarations: [
    AppComponent,
    DateComponent
  ],
  imports: [
    ...,
    FormsModule (2)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
...

05.02.201905.02.2019

Click. Отслеживание событий

<button (click)="myEvent($event)">(1)
  Event
</button>

export class DateComponent implements OnInit {
  constructor() {

  }

  myEvent(event) { // (2)
    console.log(event);
  } 
...

В шаблоне для элемента button добавляем событие click (1), которое при помощи одностороннего бандинга, может обрабатываться в классе компонента (2).

05.02.201905.02.2019

Директива ngif

Предназначен для обработки условий. На примере ниже показано применение для установки видимости компонента.

...
loggedIn: boolean = true; // (1)
...

<div *ngIf="loggedIn"> (2)
  <p>Logged in.</p>
</div>

Объявляем переменную в классе компонента (1). В разметке объявляем директиву ngIf присваиваем ей значение переменной (2).

Как и любой логический оператор, ngIf может использовать отрицание (3).

<div *ngIf="!loggedIn"> (3)
  <p>Logged in.</p>
</div>

05.02.201905.02.2019

Структурная директива ngFor

Позволяет перебрать в шаблоне элементы массива

export class DateComponent implements OnInit {
  // создаем массив
  items = ["Angular", "React", "Vue", "NodeJS"]; // (1)
  constructor() {

  }
...

 <ul>(2)
   <li *ngFor="let item of items; let i = index">{{i+1}} {{item}}</li> (3)
 </ul>

В компоненте создаем переменную items (1). В шаблоне создаем список в котором объявляем директиву ngFor (2), которая выполняет роль forEach JavaScript’a. В переменную i специально передаем текущий индекс элемента. Далее (3) выводим результат.

05.02.201905.02.2019

Привязка данных

Существует несколько формы привязки данных:

привязка значения к DOM (односторонняя привязка)

Шаблон *.html

// пример интерполяции
<p>
  Hello {{message}}
</p>

*.ts — файл компонента

 
export class DateComponent implements OnInit {
  message: string = "World";
  constructor() { }
  ...
}