Швидкий старт

TypeScript

Angular-застосунки складаються з компонентів. Компонент - це комбінація із HTML-шаблону та класу компонента, який контролює "що буде показано на екрані". Ось приклад компонента, який виводить простий рядок:

app/app.component.ts

import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>` }) export class AppComponent { name = 'Angular'; }

Спробуйте цей приклад Швидкого Старту на Plunker без будь-якого встановлення. Цей же приклад можна встановити локально за допомогою зерен Швидкого Старту, які підготовлено для розробки реального застосунку Angular.

Кожен компонент починається з декоратор-функції @Component, яка приймає об'єкт метаданих. Цей об'єкт матаданих описує, як HTML-шаблон та клас компонента працюють разом.

У цьому об'єкті метаданих, властивість selector говорить, щоб Angular показував наш компонент в межах користувацького тега <my-app> в index.html.

index.html (всередині <body>)

<my-app>Loading AppComponent content here ...</my-app>

Властивість template визначає, який саме шаблон буде показано, в нашому випадку - це повідомлення всередині заголовка <h1>. Повідомлення починається з "Hello" і закінчується на {{name}}. Конструкція з подвійними фігурними дужками являє собою вираз Angular з прив'язкою інтерполяції. Під час роботи, Angular замінює {{name}} на значення властивості name цього компонента. Прив'язка інтерполяції є однією з багатьох можливостей Angular, які ви зможете дослідити в цій документації.

У прикладі, змініть значення властивості name з 'Angular' на 'World' та дивіться що станеться.

.callout.is-helpful header Пару слів про TypeScript p. Цей приклад написано на TypeScript, який є надбудовою над JavaScript. Angular використовує TypeScript, оскільки його типи даних покращують продуктивність розробки та спрощують підтримку за допомогою різних інструментів. Ви також можете писати Angular-код на JavaScript; цей гід покаже як.

Наступний крок

Почніть вивчення Angular.