Типичное угловое приложение состоит из многих компонентов.
Компоненты управляют частью экрана, называемым как представление в Angular.
Таким образом, когда вы создаете свой экран в приложении Angular,
вы можете разделить ваш экран на несколько представлений,
каждый из них управляется отдельным компонентом.
Пока что в примере
у нас есть один корневой компонент, который управляет всем экраном.
В этом уроке мы добавим еще один компонент, который принимает часть экрана и берет
управление этой частью экрана и заботится о
весь рендеринг этой части экрана, здесь.
Давайте быстро посетите компонент App, который
у нас уже есть как часть нашего углового приложения.
Итак, в этом компоненте
вы можете видеть, что мы импортируем компонент из углового ядра.
Таким образом, это дает нам возможность
определить компонент декоратор и применить его к нашему классу.
Таким образом, это определит один компонент, который является частью нашего углового приложения.
Итак, здесь, этот конкретный компонент,
, как вы можете видеть, когда вы определяете компонент декоратор,
он состоит из нескольких свойств здесь, один из них является селектором, здесь.
Теперь это конкретное свойство селектора определяет строку здесь.
Обратите внимание, в частности, что содержится внутри строки.
Он говорит, что приложение root.
Теперь, оглядываясь назад на файл index.html.
Итак, я собираюсь в файл index.html.
Вы можете видеть, что прямо там,
мы используем это приложение корень в качестве одного из тегов в нашем файле index.html.
Итак, теперь вы видите, что этот тег, который вы используете, ссылается
на селектор того, что мы здесь указали, app-root.
Итак, если вы хотите дать часть экрана и сделать это контролируемым компонентом,
, тогда вы используете селектор, чтобы указать, а затем вы включите
тег селектора в свой HTML-файл.
То же самое относится и к шаблону компонента.
Если включить другой селектор из другого компонента
в шаблон этого компонента,
, то эта часть экрана будет передана
второй компонент, управляемый из второго компонента.
Мы также узнаем об этом в одном из последующих уроков.
Теперь вторая часть, которую вы видите, указывается templateUrl.
Этот templateUrl указывает имя файла шаблона для данного конкретного компонента.
Итак, в данном случае, как вы можете видеть, это app.component.html.
Таким образом, именно поэтому шаблон определяется в файле
app.component.html для этого конкретного компонента.
Кроме того, вы также можете предоставить стили для этого приложения.
Итак, здесь мы говорим styleUrls, а затем здесь
в квадратных скобках вы предоставляете это высказывание./app.component.scss.
Итак, это означает, что этот конкретный SaaS-файл применяется к этому стилю.
Итак, как вы видели, когда мы создали наше угловое приложение,
я указал формат стиля, который я собираюсь использовать, является SCSS.
Итак, это причина, по которой эти файлы являются SCSS.
Если вы не используете стиль SCSS и вместо этого создаете нормально,
то это будут просто файлы CSS, а затем вы можете использовать CSS для определения
стилей, которые могут быть использованы в ваших шаблонах приложений или в ваших шаблонах компонентов.
Итак, если у вас есть какие-либо стили
, которые вы хотите включить для этого конкретного компонента,
тогда вы будете включать их в этот файл.
Вы также можете указать шаблон и стиль inline.
Итак, если вы укажете стиль или шаблон inline,
вы просто укажите это, как и с обратными кавычками.
Так, например, я могу просто,
вместо того, чтобы делать templateUrl,
Я могу просто отредактировать это в шаблон, а затем я определяю шаблон в обратных кавычках здесь.
Поэтому я бы сказал, и внутри обратно qootes я даже могу делать такие шаблоны.
Итак, я могу сказать h1, а затем название.
Таким образом, это было бы то, что мы называем встроенного шаблона, который мы используем в нашем приложении.
Теперь, если вы используете обратные котировки,
вы также можете использовать такие вещи, как доллар добавить в
, чтобы использовать переменные в ваших шаблонах и так далее.
В этом конкретном курсе
мы будем использовать отдельные файлы шаблонов
и создавать шаблоны в этих HTML-файлах вместо этого.
Я предпочитаю этот метод определения моих шаблонов, а не делать встроенные шаблоны.
Но если ваш шаблон очень прост и содержит всего две или три строки,
, то непременно используйте встроенный шаблон, подобный этому в вашем приложении.
Итак, позвольте мне изменить его обратно на мое первоначальное значение здесь.
То же самое для стилей.
Кроме того, я могу просто сказать стили, а затем в обратных кавычках
включают мои классы CSS в задние кавычки.
Хотя, как я уже упоминал,
я предпочитаю хранить их в отдельных файлах только для того, чтобы иметь чистый код в мои.ts файлах здесь.
Таким образом, у нас есть стили шаблонов селекторов.
У нас также будет еще один идентификатор модуля.
На данный момент я не использую это для моего компонента
, но в некоторых случаях вам нужно будет явно указать идентификатор модуля для вашего компонента.
Мы увидим несколько примеров этого чуть позже.
Кроме того, компонент - это не что иное, как класс JavaScript или класс Type Script.
Так вот почему вы видите здесь,
, определяющий класс, говорящий AppComponent, а затем вы экспортируете этот класс.
Причина, по которой мы используем экспорт здесь,
, чтобы этот компонент мог быть импортирован в мой модуль приложения.
Итак, вы видели, что мы импортируем это в мой модуль приложения.
Поэтому всякий раз, когда вы хотите сделать какой-либо компонент или модуль портативным в другом модуле,
, вы всегда добавляете экспорт в класс здесь.
Итак, кроме того,
мы видим, что у нас есть некоторые локальные свойства, которые мы определили
внутри наших классов здесь, и они будут доступны через мой шаблон.
Поэтому я могу использовать их в моем шаблоне.
Таким образом, свойства, определенные внутри моего файла
component.ts, доступны из моих файлов шаблонов.
Мы поговорим об аспекторе привязки данных немного позже в другом уроке.
Подводя итог, мы узнали, что компонент определяется
, указав код, а также соответствующий шаблон.
Итак, внутри кода можно определить свойства и методы
, которые будут доступны из вашего шаблона из соответствующего шаблона.
Итак, как вы видели, в метаданных
в декораторе компонента,
вы указали имя файла шаблона как одно из свойств вашего класса компонентов здесь.
Аналогичным образом, любые свойства и методы, которые вы определяете в
ваш компонент, будут доступны из вашего шаблона.
Мало того, что вы также можете иметь так называемое событие
привязки из вашего шаблона обратно к вашим компонентам.
Итак, если какие-либо события генерируются в ваших шаблонах, так, например,
нажатие кнопки на вашем шаблоне, которая может вызвать
вызовы методов внутри вашего кода здесь,
Javascript или Type Script код здесь.
Мы увидим использование тех в одном из более поздних уроков, а затем, я снова,
повторю этот пункт о привязке собственности и привязке событий,
и объясню это вам немного более подробно.
Компоненты в угловом приложении могут быть организованы в иерархию.
Итак, у вас всегда будет корневой компонент.
Таким образом, для нашего приложения
файл app.component.ts и
соответствующий HTML-шаблон формирует корневой компонент для нашего приложения
и этот корневой компонент может затем содержать компоненты
вниз в иерархии и может включать компоненты в иерархию.
Мы увидим, что в самом следующем упражнении
, где мы создадим другой компонент, а затем используем его в нашем корневом компоненте.
Таким образом, вы можете иметь несколько компонентов, которые
включены в ваш корневой компонент, и эти компоненты
сами, в свою очередь, могут использовать другие компоненты, которые включены внутри них.
Таким образом, эта иерархия компонентов позволяет вам проектировать экран вашего приложения.
С этим быстрым пониманием компонентов
и того, как компоненты полезны для разработки нашего приложения,
мы теперь перейдем к нашему следующему упражнению, где мы создадим
и добавим еще один компонент в наше угловое приложение
, а затем мы определим шаблон для этого компонента, а затем мы будет использовать
этот компонент внутри нашего корневого компонента для разработки нашего экрана.