ng g c recipes
ng g c recipes/recipe-list
-spec false
(можно добавить чтобы не создавать тестовый файл, например ng g c recipes --spec false
)Модель - это файл формата Typescript. Создадим файл \app\recipes\recipe.model.ts
:
export class Recipe {
public name: string;
public description: string;
public imagePath: string;
constructor(name: string, description: string, image: string) {
this.name = name;
this.description = description;
this.imagePath = image;
}
}
\app\recipes\recipe-list\recipe-list.component.ts
:
//Импорт модели:
import { Recipe } from '../recipe.model'
//Добавление массива объектов:
export class RecipeListComponent implements OnInit {
recipes: Recipe[] = [
new Recipe(
'Test recipe',
'This is a simple test',
'https://cdn.pixabay.com/photo/2017/07/16/10/43/recipe-2508859_960_720.jpg'
)
];
...
}
recipes: Recipe[]
- переменная recipes с типом массив объектов класса Recipe
(Typescript синтаксис).
\app\recipes\recipe-list\recipe-list.component.html
:
<div class="row">
<div class="col-xs-12">
<button class="btn btn-success">New Recipe</button>
</div>
<div class="row">
<div class="col-xs-12">
<a href="#" class="list-group-item clearfix">
<div class="pull-left">
<h4 class="list-group-item-heading">Recipe Name</h4>
<p class="list-group-item-text">Description</p>
</div>
<span class="pull-right">
<img src="" alt="" class="img-responsive" style="max-height: 50px;">
</span>
</a>
<app-recipe-item></app-recipe-item>
</div>
</div>
</div>
В директории app
создадим папку shared
, и в ней файл indigrients.model.ts
:
export class Indigrient {
public name: string;
public amount: number;
constructor (name: string, amount: number) {
this.name = name;
this.amount = amount;
}
}
Данный код можно заменить на короткий вариант:
export class Indigrient {
constructor (public name: string, public amount: number) {
this.name = name;
this.amount = amount;
}
}
Для отладки ошибки в скрипте нужно поставить breakpoint (в chrome он ставится кликом на номер строки кода) и обновить страницу. Это можно сделать несколькими способами:
main.bundle.js
. Данный способ не удобен, так как этот файл может быть слишком большим;webpack://
, выбрать папку проекта и необходимый файл;
Что такое структурные директивы. Встроенные и собственные структурные директивы.
Использование декораторов HostListener и HostBinding для реагирования на события и работы со стилями в Angular
Деактивации роута в Angular5 и контроль навигации