Занятие 4.
Погружение в TypeScript
SIS.Angular.2018
Петров Андрей
Домашняя работа №3
Что понравилось:
- Использование нескольких компонентов
- Использование полей компонентов в шаблонах
В чем были проблемы:
- Проблемы с путями картинок
- Не все файлы залиты в репозиторий
- Проблемы с именованием
План занятия
- Экспорт и импорт
- Классы
- Декораторы
- Интерфейсы
- CodeStyle
Корневой модуль (AppModule)
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [ AppComponent ],
exports: [ AppComponent ],
imports: [ BrowserModule ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Импорт
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { PrimaComponent } from './prima/prima.component';
@NgModule({
declarations: [
AppComponent,
PrimaComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Экспорт
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-prima',
templateUrl: './prima.component.html',
styleUrls: ['./prima.component.css']
})
export class PrimaComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Классы и инстансы
Класс
Инстанс
Поля и методы класса
export class PrimaComponent implements OnInit {
title = 'Hello, course!';
constructor() { }
ngOnInit() {
}
}Поле
Метод
Конструктор
export class PrimaComponent implements OnInit {
title: string;
constructor() {
this.title = 'Hello, course!';
}
ngOnInit() {
}
}Инициализирует инстанс
Декоратор
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-prima',
templateUrl: './prima.component.html',
styleUrls: ['./prima.component.css']
})
export class PrimaComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Добавляет метаданные
Автомобили и интерфейсы
Автомобиль №1
Автомобиль №2
Автомобиль №3
Интерфейсы в TS
export class PrimaComponent implements OnInit {
title: string;
constructor() {
this.title = 'Hello, course!';
}
ngOnInit() {
}
}Реализация интерфейса
export class PrimaComponent
implements OnInit {
constructor() { }
ngOnInit() {
}
}export interface OnInit {
ngOnInit(): void;
}Проблема именования
Do
main-info.component.ts
Do not
app.block2.ts
Code style
Полезные ссылки
-
Импорт
https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/import
Экспорт
https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/export
- Классы
https://www.typescriptlang.org/docs/handbook/classes.html
- Декораторы
https://www.typescriptlang.org/docs/handbook/decorators.html
- Интерфейсы
https://www.typescriptlang.org/docs/handbook/interfaces.html
- Angular style guide
https://angular.io/guide/styleguide
Домашнее задание
Сделать модель страницы о себе – класс с полями, использовать поля в шаблоне