Занятие 4.

Погружение в TypeScript

SIS.Angular.2018

Петров  Андрей

Домашняя работа №3

Что понравилось:

  1. Использование нескольких компонентов
  2. Использование полей компонентов в шаблонах

В чем были проблемы:

  1. Проблемы с путями картинок
  2. Не все файлы залиты в репозиторий
  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

Полезные ссылки

  1. Импорт
    https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/import
    Экспорт
    https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/export
     
  2. Классы
    https://www.typescriptlang.org/docs/handbook/classes.html
     
  3. Декораторы
    https://www.typescriptlang.org/docs/handbook/decorators.html
     
  4. Интерфейсы
    https://www.typescriptlang.org/docs/handbook/interfaces.html
     
  5. Angular style guide
    https://angular.io/guide/styleguide

Домашнее задание

Сделать модель страницы о себе – класс с полями, использовать поля в шаблоне

 

Класс должен содержать информацию об ожидаемом событии, на странице "О себе" должен отображаться таймер обратного отсчета до события

Вопросы?

Deep dive TypeScript

By walkingdev

Made with Slides.com

Deep dive TypeScript

  • 340

More from walkingdev