Angular 2 — Шаблоны

Angular 2 — Шаблоны

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

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

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

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

templateURL:
viewname.component.html

Параметры

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

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

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Angular 2 — Шаблоны

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

<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';
}

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

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

Angular 2 — Шаблоны

По данному результату видно, что файл шаблона (app.component.html) вызывается соответственно.

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Angular 4. Быстрый старт

Овладейте азами работы с Angular 4 с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree