Занятие 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

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

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

 

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

Вопросы?

Занятие 4

By Сибирские интеграционные системы

Source: walkingdev

Занятие 4

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

  • 371

More from Сибирские интеграционные системы