Angular 4 Jump start — краткий пересказ

Заметки:

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

routerLink — перенаправление пользователя на требуемую странице без обновления в браузере

Перенаправление на страницу по умолчанию в routers.

Создание класса с последующим применением его в других компонентах.

// item.model.ts
export class Item {
    id: number;
    name: string;
}

// применение
import { Item } from './item.model.ts';

...
{ path: "", pathMath: "full", redirectTo: "lessons" },
{ path: "lessons", component: LessonsListComponent }
...

• все структурные директивы начинаются с символа * Они называются структурными потому, что изменяют структуру DOM, например *ngIf
• все атрибуты оборачиваются в [ ], например [ngClass]=»{class1:true}»
• все события оборачиваются в ( ), например (click)=»add()»

Настройка маршрутизации

// route
...
{ path: "lessons/edit/:id", component: LessonsEditComponent }
...

// добавляем служебный сервис в конструктор компонента
import { Router } from '@angular/router'
...
constructor(private router: Router)
...

// вызов
this.router.navigate(["lessons", "edit", item.id]);

Чтение роутинга

import { ActivatedRoute } from '@angular/router';
...
constructor(private currentRoute: ActivatedRoute){}

ngOnInit(){
    let id: number = +this.currentRoute.snapshot.paramMap.get("id");
}

Применение Observable

import "rxjs/add/operator/map";
...
all(): Observable<Item[]> {
   return this.http.get(URL).map(response=>{
      let data = response.json(); // получаем объект для дальнейшего преобразования
      ... 
      return items;
   });
}