меню

Компонент

  • Создание компонента: 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;
  }
}
 

Отладка

Для отладки ошибки в скрипте нужно поставить breakpointchrome он ставится кликом на номер строки кода) и обновить страницу. Это можно сделать несколькими способами:

  • в консоли разработчика перейти во вкладку source и кликнуть по файлу main.bundle.js. Данный способ не удобен, так как этот файл может быть слишком большим;
  • во вкладке source раскрыть webpack://, выбрать папку проекта и необходимый файл;
  • Отладка расширением Augury. Расширение позволяет увидеть структуру проекта, и может быть полезно при отладке.

Возможно, вам будет интересно

События

Рассмотрим события в Angular. Event Binding. Передача и использование данных с помощью event Binding

Binding свойств директив

Привязка входных и вторичных свойств директивы атрибута в Angular

Сервисы

Централизация логики и упрощение коммуникации между компонентами с помощью сервисов.

Route. Защита роутера

Использование интерфейсов CanActivate и CanActivateChild для принятия решения об активации роутера

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту