Блог

Главная - Вопросы по программированию - Понимание самого простого примера в Angular2

Понимание самого простого примера в Angular2

#angularjs #angular

#angularjs #angular

Вопрос:

Я довольно (очень) новичок в изучении веб-приложений с опытом объектно-ориентированного проектирования на C / C / Java. Я пытаюсь изучить Angular2 с помощью typescript, и я следую приведенному здесь примеру

Соответствующий фрагмент кода (слегка измененный с помощью дальнейших шагов в примере)

 import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>'
})
export class AppComponent
{
    title = 'Tour of Heroes';
    hero = 'Windstorm';
}

Мне интересно, как Angular знает, где искать (как я понимаю, привязать) {{title}} в теге html. Я думаю, что некоторые вещи подразумеваются.

Angular просто ищет какие-либо элементы или поля в пределах области видимости? Существует ли неявное «это», то есть (this.title). В моих экспериментах кажется, что это не имеет никакого негативного эффекта, но моя среда разработки сообщает мне, что есть «неразрешенная переменная или введите это», Как она узнает, что нужно искать в AppComponent? Это из declarations: [ AppComponent ],} — за чего ? (См. app.module.ts)

Связано ли это с концепцией $scope из Angular2?

Важен ли здесь порядок? т.е. @Component является декоратором экспортируемого класса?

Пожалуйста, не стесняйтесь исправлять мою терминологию.

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

1. Я только начал изучать Angular2 около трех дней назад, но, насколько я понимаю, переменные внутри компонента предназначены для использования в {{}} . Вы также можете просматривать массивы с помощью *ngFor и отображать значения внутри массива.

2. И да, @Component является декоратором экспортируемого класса.

3. теперь это имеет больше смысла. Мне было непонятно, какой порядок @Component следования при экспорте имеет значение. Тогда мне интересно, если ключевое слово export является необязательным, будет ли когда-нибудь иметь смысл украшать класс, который не экспортируется. Мое чутье подсказывает, что это имело бы смысл.

Ответ №1:

Во-первых, вам нужно знать, что в Angular2 все является компонентом, компонент — это набор класса, его шаблон и некоторые метаданные. Метаданные содержат информацию о Компоненте, способах его применения и т.д.

Метаданные задаются с помощью декоратора. Декораторы — это аннотации, написанные для класса компонента

Вопрос 1: Мне интересно, как Angular знает, где искать (как я понимаю, привязать) {{title}} в теге HTML. Я думаю, что некоторые вещи подразумеваются.

Ответ: Angular ищет свойства, объекты и методы в классе компонентов, откуда он знает, что нужно искать там, это из-за @Component декоратора

Вопрос 2: Связано ли это с концепцией $scope из Angular2?

Ответ: Angular2 использует this синтаксис, т.Е. Аналогичный controller as синтаксису в Angular 1.x, в нем нет таких вещей, как $scope и $rootScope

Вопрос 3: Важен ли здесь порядок? т.е. @Component является декоратором экспортируемого класса?

Ответ: Да, порядок здесь важен, @Component, который является декоратором, — это не что иное, как функция, которая должна вызываться для оформления класса компонента, чтобы указать метаданные.

Итак, где бы вы ни использовали селектор <my-app></my-app> как вложенный компонент или как корневой компонент, Angular2 будет использовать данный шаблон и сопоставлять его с указанным классом компонента. вот как привязка данных работает с заданными свойствами и функциями.

Метки: