Skip to content

Latest commit

 

History

History
83 lines (68 loc) · 5.01 KB

the-to-do-list.md

File metadata and controls

83 lines (68 loc) · 5.01 KB

Список задач

Сейчас мы будем добавлять список задач в компонент app-root. Откройте файл src/app/app.component.ts. Добавьте список задач в класс AppComponent, как массив объектов. На этом этапе каждая задача включает в себя только заголовок:

{% code-tabs %} {% code-tabs-item title="src/app/app.component.ts" %}

export class AppComponent {
title = 'app';
todoList = [
  {title: 'install NodeJS'},
  {title: 'install Angular CLI'},
  {title: 'create new app'},
  {title: 'serve app'},
  {title: 'develop app'},
  {title: 'deploy app'},
];

{% endcode-tabs-item %} {% endcode-tabs %}

Добавление любой информации или источников непосредственно в код называется хардкод (hardcode) и считается плохой практикой. В конечном итоге мы будем получать список задач из внешнего источника, но даже сейчас, не имея такой возможности, лучше вынести моковые данные в отдельный файл. Давайте продвигаться шаг за шагом, поэтому оставим пока список задач в таком виде.

Сейчас мы должны сказать браузеру отобразить наши задачи. Для этого мы будем использовать встроенную в Angular директиву *ngFor. Она работает как улучшенный цикл в Java. Символ * заставляет Angular использовать текущий элемент в качестве шаблона при отображении списка.

Вставим цикл сразу после <app-input-button-unit></app-input-button-unit> таким образом:

{% code-tabs %} {% code-tabs-item title="src/app/app.component.ts" %}

template: `
  <h1>
    Welcome to {{ title }}!
  </h1>

  <app-input-button-unit></app-input-button-unit>

  <ul>
    <li *ngFor="let todoItem of todoList">
      {{ todoItem.title }}
    </li>
  </ul>
`,

{% endcode-tabs-item %} {% endcode-tabs %}

Этот код означает: «пройди через все элементы массива todoList, определенные в классе, и выведи список, который содержит заголовки задач». При проходе по todoList каждый элемент присваивается переменной шаблона todoItem, и мы можем использовать эту переменную внутри элемента, в котором мы определяем его (в данном случае элемент li), и его дочерних элементах.

Angular директивы

Директивы представляют собой кусочки логики (написанные как классы), которые могут быть прикреплены к элементам и компонентам. Они используются для изменения отображения или поведения элемента. Angular имеет несколько встроенных директив.

Как вы уже видели, директива ngFor изменяет шаблон во время выполнения, повторяя вызываемый элемент и его содержимое. Другая директива, например, ngIf, может получать булево выражение. Angular будет отображать элемент и его содержимое только если выражение true. Эта директива также используется с префиксом *, т.к. это необходимо для обозначения элемента в качестве шаблона, аналогично директиве *ngFor. Например:

{% code-tabs %} {% code-tabs-item title="code for example" %}

<h1 *ngIf="userLoggedIn">Welcome!</h1>

{% endcode-tabs-item %} {% endcode-tabs %}

В этом примере userLoggedIn явялется переменной компонента и имеет значение true или false. Если значение true, то элемент h1 будет отображаться, но если значение false, то элемент не будет существовать в DOM.

Существуют также другие директивы в Angular, которые не являются структурными (и используются без префикса *). Например, ngStyle и ngClass, с помощью которых вы можете динамически применять стили и классы к элементу.