Рубрика: Программирование

Заметки:

// использование переменных в 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 и найти свойство префикс и подменить его

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

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

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

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

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

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

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

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

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

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

• home
• about
• news
• price
• notfound

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

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 — нужно применять класс или нет.

В 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]
})
...

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

export class DateComponent implements OnInit {
  constructor() {

  }

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

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

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

...
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>