Добро пожаловать в этот подробный обзор курса Pluralsight Основы Angular Джо Имза и Джима Купера.
В последнем эпизоде я описал, как этот курс вписывается в путь обучения Angular, объяснил некоторые варианты обучения, которые у вас есть, и подытожил первый модуль. Теперь продолжим рассмотрение второго модуля.
Существует довольно много общего между ранней частью этого модуля и курсом Angular: Начало работы, поэтому, если вы видели этот курс, вы можете просмотреть первые несколько клипов, хотя практические упражнения все еще могут быть полезный. Я нашел вторую половину этого модуля более информативной.
Эти обзоры предназначены в качестве дополнительного материала к самим видео. Если вы еще не являетесь подписчиком Pluralsight и хотите узнать об этом больше или хотите получить больше от подписки Pluralsight, ознакомьтесь с Pluralsight: Полное руководство.
Джим продолжает повествование в этом втором модуле, и он говорит, что здесь начинается самое интересное.
Создание вашего первого компонента с привязкой к данным
Приложение hello world из первого модуля не впечатляет. Итак, в этом модуле мы собираемся создать что-то, что демонстрирует мощь Angular: страницу, которая показывает все наши предстоящие события, связанные с Angular.
Мы начинаем с создания компонента списка событий, и наша первая цель — заставить его отображать одно событие.
импортировать {Компонент} из ‘@angular/core’;
@Component({
селектор: ‘список событий’,
шаблон: `<div>
<h1>Upcoming Angular Events</h1>
</div>
`
})
класс экспорта EventsListComponent {
}
У нас уже есть компонент приложения для событий, аналогичный приведенному выше. Мы меняем строку кода шаблона в компоненте events-app, чтобы она ссылалась на наш компонент списка событий.
<events-list></events-list>
Однако мы что-то упустили, и когда мы запускаем его, в консоли мы видим:
Отклонение необработанного промиса: ошибки синтаксического анализа шаблона:
«список событий» не является известным элементом
При работе с Angular нам необходимо зарегистрировать все наши компоненты в нашем модуле.
Импортируя EventListComponent и добавляя его в наш список объявлений в app.module.ts, мы решаем эту проблему.
импортировать {EventsListComponent} из ‘./events/events-list.component’
@NgModule{
импортирует: [ BrowserModule ],
объявления: [ EventsAppComponent, EventsListComponent ],
начальную загрузку: [ EventsAppComponent ]
})
Затем мы добавляем объект со свойствами для нашего события, такими как имя, дата, время, цена и место.
Затем Джим знакомит нас со строковой интерполяцией в Angular (возможно, вы уже видели это в курсе Angular: Начало работы). Интерполяция представляет собой одностороннюю привязку, и мы используем ее для отображения сведений о событии в нашем приложении.
К концу этого клипа это работает, но файл компонента довольно большой и содержит наш шаблон.
Ссылки на все практические упражнения есть на сайте Джима Купера.
Практическое упражнение по созданию компонента с привязкой к данным здесь.
Использование внешних шаблонов
Джим показывает нам, что мы можем переместить наш HTML-шаблон в отдельный HTML-файл, event-list.component.html.
В определении нашего компонента в нашем файле TypeScript мы устанавливаем для свойства templateUrl URL-адрес нашего нового html-файла. Наше приложение работает так же, как и раньше.
Взаимодействие с дочерними компонентами с помощью @Input
В этом ролике мы начинаем с создания компонента эскиза события.
Здесь используется большая часть разметки, которую мы использовали ранее в шаблоне списка событий, и мы вырезаем и вставляем ее в наш компонент.
Чтобы сказать, что событие (например, конференция) передается из другого компонента, мы используем декоратор @Input.
Практическое упражнение здесь. Он немного отличается от последнего видеоклипа, поскольку в готовом примере вместо компонента эскиза события добавляется компонент адреса события. Однако и видео, и пример демонстрируют использование декоратора ввода.
Связь с родительскими компонентами с помощью @Output
Мы видели, как передавать данные из родительского компонента в дочерний с помощью декоратора @Input.
Чтобы передать данные из дочернего компонента обратно в родительский компонент, мы можем использовать декоратор @Output. Мы могли бы захотеть сделать это, если дочерний компонент отвечает на какое-то событие, такое как щелчок мыши по дочернему компоненту.
В этом клипе Джим добавляет кнопку к компоненту эскиза с привязкой от события клика к указанному имени функции:
‹button class="btn btn-primary" (click)="handleClickMe()"›Click Me!‹/button›
Джим создает функцию handleClickMe внутри компонента эскиза события и определяет eventClick как новый EventEmitter. Нам нужно импортировать класс EventEmitter, который является частью angular/core, в наш компонент эскизов событий.
В вашем классе компонентов добавьте:
@Output() buttonClick = new EventEmitter()
Использование переменных шаблона для взаимодействия с дочерними компонентами
Ссылочные переменные шаблона — это еще один способ получить доступ к свойствам и методам дочернего компонента. Мы можем использовать их для привязки к данным дочернего компонента.
Мы указываем имя переменной, указывающее на компонент, а затем обращаемся к его общедоступным свойствам или методам.
‹event-thumbnail #thumbnail›‹/event-thumbnail›
‹button (щелчок)="thumbnail.logFoo()"›Log foo‹/button›
Демонстрация этого клипа более надуманная, чем реальный мир, но этого достаточно, чтобы показать механизм в действии: просто нажмите кнопку, чтобы вывести «foo» в консоль.
В нашем компоненте eventThumbnail мы вызываем общедоступный метод logFoo:
logFoo() { console.log('foo') }
Как видите, это немного проще и понятнее, чем использование входных и выходных параметров.
Джим также демонстрирует, как получить доступ к свойству компонента (в этом примере оно называется someProperty), и мы видим, как приложение отображает значение свойства дочернего компонента.
Компоненты стиля
Вы можете легко стилизовать компонент, добавив свойство стилей к вашему компоненту и добавив код CSS внутри массива.
Например, в наш компонент добавляем:
styles: ['h1 { font-weight: normal; }']Или используйте свойство styleUrls для ссылки на внешние файлы стилей. Перечислите каждый из URL-адресов вашего стиля в виде строк в массиве.
Изучение инкапсуляции CSS в Angular
По мере того, как ваш веб-сайт и стиль вашего веб-сайта становятся большими, ваши правила CSS могут стать трудными для поддержки. Даже небольшие изменения могут вызвать неожиданные эффекты в других областях вашего сайта.
Это связано с тем, что в типичном веб-приложении правила стиля в файле CSS применяются ко всему сайту после загрузки этого файла.
Чтобы избежать этого, Джим говорит, что становится обычным использовать стандарт типа интервала между именами, такой как:
Джим говорит, что эти методы могут быть громоздкими, и что Angular позаботится об инкапсуляции CSS за нас.
Мы видим, что стили, примененные к дочернему компоненту, не применяются к родительскому компоненту. Джим также показывает нам, что стили, примененные к родительскому элементу, не наследуются автоматически дочерним компонентом. Если вы хотите применить стили к дочернему компоненту, вы можете использовать селектор ::deep (хотя это устаревшая функция).
Вам может быть интересно, как это возможно, потому что правила спецификации CSS означают, что правила применяются глобально. Джим показывает, что происходит за кулисами в этом клипе (Angular применяет атрибуты к элементам).
Angular делает всю тяжелую работу за нас, применяя архитектуру, похожую на BEM или SMACSS, избавляя нас от всех забот по сопровождению CSS. На мой взгляд, это, вероятно, лучшая функция Angular.
Однако мы можем использовать глобальные стили в наших приложениях Angular, что полезно, если мы хотим использовать библиотеку пользовательского интерфейса, такую как Bootstrap, Semantic UI или Angular Material.
Добавление заголовка сайта
Джим завершает этот модуль, добавляя компонент навигационной панели, который работает как заголовок для нашего сайта. Теперь это начинает выглядеть как настоящий сайт.
На этом обзор модуля завершен, но продолжим обзор курса, взглянув на Angular Синтаксис шаблона.
