Angular 2 — Компоненты

Angular 2 — Компоненты

От автора: в Angular компоненты являются логическими фрагментами кода приложения JS. Компонент состоит из следующих элементов, перечисленных ниже.

 

Шаблон — используется для визуализации представления приложения. Он содержит HTML-код, который нужно отображать в приложении. Эта часть также включает связи и директивы.

Класс — это класс, определенный на любом языке, например, C. Он содержит свойства и методы. В классе помещается код, который используется для поддержки представления. Он определен в TypeScript.

Метаданные — дополнительные данные, определенные для класса Angular. Они определяются с помощью декоратора.

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

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

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

Давайте перейдем в файл app.component.ts и создадим наш первый компонент Angular.

Angular 2 — Компоненты

Давайте добавим следующий код в файл и подробно рассмотрим каждый аспект.

Класс

Класс декоратора. Класс определяется в TypeScript. Класс обычно имеет следующий синтаксис TypeScript.

Синтаксис

class classname {
 Propertyname: PropertyType = Value
}

Параметры

Classname — это имя, которое должно быть присвоено классу.

Propertyname — это имя, которое должно быть присвоено свойству.

PropertyType. Поскольку TypeScript строго типизирован, вам нужно указать тип свойства.

Value — это значение, которое должно быть присвоено свойству.

Пример

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

В этом примере:

Мы определяем класс с именем AppComponent.

Ключевое слово export используется, чтобы компонент мог использоваться в других модулях приложения Angular JS.

appTitle — это имя свойства.

Свойству присваивается тип string.

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

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

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

Свойству присваивается значение ‘Welcome’.

Шаблон

Это представление, которое должно отображаться в приложении.

Template: '
 <HTML code>
 class properties
'

HTML Code — это HTML-код, который необходимо отобразить в приложении.

Class properties — это свойства класса, на которые можно ссылаться в шаблоне.

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

В этом примере:

Мы определяем HTML-код, который будет отображаться в нашем приложении.

Мы также ссылаемся на свойство appTitle из нашего класса.

Метаданные

Они используются для оформления класса Angular JS с помощью дополнительной информации. Давайте рассмотрим законченный код с классом, шаблоном и метаданными.

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

@Component ({
 selector: 'my-app',
 template: ` <div>
 <h1>{{appTitle}}</h1>
 <div>To Tutorials Point</div>
 </div> `,
})

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

В приведенном выше примере:

Мы используем ключевое слово import, чтобы импортировать декоратор ‘Component’ из модуля ядра.

Затем мы используем декоратор для определения компонента.

Компонент содержит селектор, называемый «my-app». Это не что иное, как наш пользовательский тег html, который можно использовать на главной html-странице.

Теперь перейдем к файлу index.html в нашем коде.

Angular 2 — Компоненты

Давайте удостоверимся, что тег body теперь содержит ссылку на наш пользовательский тег в компоненте. То есть, в данном случае нам нужно проверить, содержит ли тег body следующий код:

<body>
 <my-app></my-app>
</body>

Вывод

Теперь, если мы откроем файл в браузере, мы увидим, что результат визуализируется так, как он определен в компоненте.

Angular 2 — Компоненты

Источник: 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