Angular 2 — Шаблоны

Дата публикации: 2017-11-10

Angular 2 — Шаблоны

От автора: способы определения шаблонов в Angular 2, выполяемых с помощью команды templateURL, инструкция по использованию компонента, синтаксис и параметры, примеры кода — об этом в данной статье.

В главе «Компоненты» мы уже рассмотрели пример данного шаблона.

template: '
 <div>
 <h1>{{appTitle}}</h1>
 <div>To Tutorials Point</div>
 </div>
'

template: '

<div>

<h1>{{appTitle}}</h1>

<div>To Tutorials Point</div>

</div>

Он известен, под названием встроенный шаблон. Существуют и другие способы того, как определить в Angular 2 шаблоны, которые могут быть выполнены с помощью команды templateURL. Простейший способ использования этого компонента заключается в следующем. Синтаксис:

Бесплатный курс «Laravel + Angular. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на Angular и Laravel

Получить курс

templateURL:
viewname.component.html

1 2	templateURL: viewname.component.html

Параметры

viewname — это имя модуля компонента приложения. После viewname к имени файла нужно добавить компонент. Ниже приведены этапы определения встроенного шаблона.

Шаг 1 — Создайте файл с именем app.component.html. Он будет содержать html-код для представления.

Angular 2 — Шаблоны

Шаг 2 — Добавьте следующий код в созданный файл.

<div>{{appTitle}} Tutorialspoint </div>

1	<div>{{appTitle}} Tutorialspoint </div>

Этот код определяет простой тег div и ссылается на свойство appTitle из класса app.component.

Шаг 3 — Добавьте следующий код в файл app.component.ts.

import { Component } from '@angular/core';

@Component ({
 selector: 'my-app',
 templateUrl: 'app/app.component.html' 
})

export class AppComponent {
 appTitle: string = 'Welcome';
}

import { Component } from '@angular/core';

@Component ({

selector: 'my-app',

templateUrl: 'app/app.component.html'

})

export class AppComponent {

appTitle: string = 'Welcome';

}

В приведенном выше коде единственное изменение, которое нужно отметить, это templateURL, который задает ссылку на файл app.component.html, расположенный в папке приложения.

Шаг 4 — Откройте код в браузере, вы получите следующий вывод.

Angular 2 — Шаблоны