Программирование на Всем!
Примеры использования кода
Подключение HttpClient
// app.module.ts
import { HttpClientModule } from '@angular/common/http';
@NgModule({
...
imports: [
...
HttpClientModule
],
...
})
Примечание: обработка данных происходит через объект Observable
Читать далее «Http запросы в Angular»Сервисы не имеют представлений
ng g service [имя сервиса]
Примечание!!! После генерации сервиса обновление app.component.ts не происходит.
И поэтому нам самим вручную нужно прописать ссылку на сервис в файле app.module.ts
Читать далее «Angular сервисы»Чтобы объяснить как это работает проще перейти сразу к примера.
Для начала при помощи команды ng generate создадим пару страниц:
ng generate component [имя страницы]Читать далее «Роутинг приложения. Первое приложение Angular»
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 — нужно применять класс или нет.
Читать далее «NgStyle,NgClass. Динамическая стилизация компонентов»В app.module.ts импортируем модуль @angular/forms (1) В imports прописываем добавленный модуль (2)
...Читать далее «Двусторонняя привязка данных — ngModel»
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).
Читать далее «Click. Отслеживание событий»Предназначен для обработки условий. На примере ниже показано применение для установки видимости компонента.
...
loggedIn: boolean = true; // (1)
...
<div *ngIf="loggedIn"> (2)
<p>Logged in.</p>
</div>
Объявляем переменную в классе компонента (1). В разметке объявляем директиву ngIf присваиваем ей значение переменной (2).
Как и любой логический оператор, ngIf может использовать отрицание (3).
<div *ngIf="!loggedIn"> (3)Читать далее «Директива ngif»
<p>Logged in.</p>
</div>
Позволяет перебрать в шаблоне элементы массива
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) выводим результат.
Читать далее «Структурная директива ngFor»Существует несколько формы привязки данных:
Шаблон *.html
// пример интерполяции
<p>
Hello {{message}}
</p>
*.ts — файл компонента
Читать далее «Привязка данных»
export class DateComponent implements OnInit {
message: string = "World";
constructor() { }
...
}
Все компоненты хранятся в папке src/app
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'appcode pw';
}
Дополнительные параметры компонента можно узнать тут
Все объекты которые начинаются с @, например @Component или @NgModule — это декораторы.
Читать далее «Компоненты Angular»