В предыдущем упражнении
мы вышили наше первое базовое приложение Angular.
Как я уже упоминал, мы будем работать над этим Angular приложением и развивать
его дальше в течение остальной части этого курса.
Теперь, прежде чем мы начнем работать над нашим угловым приложением,
давайте настроим наше угловое приложение, чтобы использовать несколько дополнительных модулей,
, которые позволяют нам разрабатывать шаблоны для нашего углового приложения.
Мы будем использовать модуль Angular Material для проектирования макетов пользовательского интерфейса.
Модуль Angular Material предоставляет нам ряд интересных компонентов компоновки
, которые мы можем использовать при разработке наших шаблонов угловых компонентов.
Кроме того, мы будем использовать гибкий макет, который основан на CSS flex макет,
, который позволяет нам делать отзывчивый дизайн в нашем угловом приложении.
Итак, в этом упражнении
мы собираемся сделать эти конфигурации.
По пути мы узнаем наше первое краткое знание компонентов,
еще до того, как мы перейдем к более подробному изучению компонентов в следующем уроке.
Для начала, давайте начнем наше путешествие с быстрого посещения файла app.component.ts.
Это файл, который поддерживает
корневой компонент, который является частью нашего углового приложения.
Теперь, взглядывая на этот корневой компонент,
есть несколько вещей, которые станут вам очень понятны даже без особых объяснений.
Первое, на что я хотел бы обратить ваше внимание, это заявление об импорте.
Как вы можете видеть, это импорт класса компонентов из библиотеки Angular Core.
Затем мы готовим наш класс AppComponent здесь,
и экспортируем этот класс.
Итак, в этом классе AppComponent, который мы объявили,
у нас есть переменная, которую мы объявили здесь, называется title,
, который в настоящее время назначен быть строкой.
Теперь, быстро взглянув на эту переменную,
вы сразу начинаете задаваться вопросом,
, как это связано с тем, что мы видели в браузере,
когда вы увидели наше угловое приложение показывается в браузере,
Angular приложение отображало именно эти слова в браузере.
Действительно, эта переменная играет важную роль в
придумывая мнение, которое вы видели в нашем браузере.
Теперь, кроме того, вы также видите, что
этот класс компонента добавляется с декоратором здесь.
Так что опять же, это еще один декоратор, с которым вы столкнетесь в Angular.
Итак, это, как мы видим, компонентный декоратор.
Декоратор компонентов внутри принимает объект JavaScript в качестве параметра здесь,
и первое свойство, которое вы видите здесь, называется selector: app-root.
Теперь, если вы помните, когда мы смотрели на файл index.HTML,
мы увидели, что мы включили элемент там под названием app-root.
Теперь вы начинаете видеть, откуда взялся этот корень приложения.
Итак, это селектор для компонента, который мы объявляем здесь,
который является то, что используется в нашем классе шаблонов, чтобы указать, где
представление, соответствующее этому компоненту, должно быть отображено в браузере.
Второе свойство, которое вы определяете здесь, является templateUrl.
Это указывает на файл,
файл HTML, как вы можете видеть,
, который содержит шаблон, соответствующий этому конкретному компоненту.
Шаблон, который определяет представление для этого компонента.
Третье свойство, которое вы определяете здесь, как вы можете видеть, говорит, styleUrls,
, которое, как вы заметили здесь, назначается файлу app.component.scss.
Таким образом, этот файл должен содержать весь код scss, который может быть
использован для CSS стиля для нашего шаблона компонентов.
Итак, это быстрый визит к файлу app.component.ts.
Теперь давайте перейдем к файлу app.component.HTML,
и быстро посмотрим на шаблон.
Перейдите в файл app.component.HTML,
вы видите, что этот файл app.component,
HTML-код здесь содержит только тег h1 с чем-то здесь с двойными скобками.
Теперь, очевидно, это не то, что вы привыкли к вашим знаниям HTML,
или CSS или JavaScript, которые вы видели раньше.
Это угловой синтаксис.
Это то, что мы называем интерполяцией.
Это использует одностороннюю привязку данных Angular.
В этот момент я бросаю тебе несколько терминов.
Держите эти условия, мы вернемся, чтобы посмотреть на эти термины в
более подробно в оставшихся уроках этого курса.
Первое, что я упомянул, это интерполяция,
второй, который я упомянул, является односторонней привязкой данных.
Кроме того, вы сразу видите, что это переменная, которую вы видели в сопутствующем файле
typeScript, который определяет код TypeScript, соответствующий компоненту App.
Итак, как только вы укажете что-то вроде этого здесь,
подразумевается, что независимо от значения этого заголовка будет заменено на месте
здесь и будет использоваться как внутренний HTML-код для этого тега h1 здесь.
Это цель включить это здесь.
Теперь мы перейдем к установке некоторых из
других модулей угловых отношений, которые позволят нам разрабатывать шаблоны.
Тогда мы вернемся к этому файлу app.component.HTML.
Затем измените дизайн этого шаблона немного позже в этом упражнении.
Чтобы помочь нам разработать отзывчивые представления в нашем угловом приложении,
мы собираемся воспользоваться помощью нескольких связанных с
модулей для Angular называется модулем Angular Material.
Модуль углового материала предоставляет нам ряд компонентов.
Компоненты макета, которые мы можем использовать при проектировании
наших новых шаблонов для наших угловых компонентов.
Модуль Angular Material, если вы хотите сравнить это, похоже на то, что Bootstrap
предоставил нам для разработки наших веб-страниц, которые мы изучили в предыдущем курсе.
Кроме того, я буду использовать другой модуль, называемый модулем макета Angular flex.
Модуль гибкого макета обеспечивает поддержку использования макета CSS
flex в наших угловых шаблонах для наших угловых компонентов.
Теперь эти два модуля должны быть явно установлены
, а затем импортированы в наше угловое приложение,
, это то, что мы собираемся сделать на следующем шаге.
Но прежде чем мы идем вперед,
один вопрос, который вам может быть интересно, это:
почему бы не использовать Bootstrap для разработки шаблонов для нашего углового приложения?
Действительно, вы также можете использовать Bootstrap для разработки шаблонов для нашего углового приложения.
Но вы можете использовать только
компоненты CSS Bootstrap в вашем угловом приложении.
Компоненты на основе jQuery.
Компоненты JavaScript не могут быть явно использованы, могут быть некоторые конфликты
между компонентами на основе jQuery из Bootstrap и самим угловым кодом.
Таким образом, лучше избегать использования компонентов JavaScript из Bootstrap
в случае, если вы решите использовать Bootstrap как способ разработки ваших угловых шаблонов.
Но с другой стороны,
Я также думал, что это предоставит нам хорошую возможность обучения получить
другую структуру макета пользовательского интерфейса, которая является основой углового материала.
Итак, именно поэтому я решил использовать структуру углового материала
и макет Angular flex в этом конкретном курсе.
Теперь, когда мы проходим остаток этого курса,
я не буду явно объяснять, как использовать
компоненты углового материала или как использовать угловой гибкий макет.
Вместо этого мы узнаем их, глядя на примеры.
Мы будем использовать эти два,
как лучшие компоненты Angular Material и поддержка Angular Flex-Layout,
, когда мы разрабатываем наши шаблоны для наших Angular компонентов в этом конкретном курсе.
Таким образом, в процессе использования этих компонентов,
вы также будете по пути,
узнать, как использовать как угловой материал, так и
Angular Flex-Layout в вашем угловом приложении.
Я думал, что выполняя упражнения,
вы узнаете намного больше об угловом материале.
Теперь, чтобы объяснить концептуальные аспекты того, почему
Angular Material компоненты работают так же, как они работают, или как работает сетка, например
или как работает гибкий дизайн,
мы уже рассмотрели некоторые из них в предыдущем курсе на Bootstrap.
Таким образом, те же концепции тоже придут на помощь.
Вместо этого мы рассмотрим механику использования как углового материала, так и
углового гибкого макета в нашем угловом приложении в этом конкретном курсе.
Чтобы начать использовать угловой материал,
, конечно, первое, что вам нужно сделать, это установить модуль Angular Material.
Итак, в подсказке введите npm install —save @angular /material.
Итак, как вы можете видеть,
мы указываем все угловые связанные модули с @angular,
, так что вы увидите также то же самое для Flex-Layout.
Мы устанавливаем версию 6.4.7 модуля углового материала.
Кроме того, модуль материалов требует установки CDK.
Итак, мы также установим это, выполнив
npm установить @angular /cdk @6 .4.7 —сохранить,
и установить это вместе с угловым материалом.
Таким образом, Angular Material использует угловой cdk для своих компонентов.
Кроме того, при использовании углового материала
вам также необходимо импортировать модуль Angular Animations в приложение Angular.
Начиная с угловой версии 4,
была извлечена поддержка угловой анимации
из основных модулей в свой отдельный модуль.
Итак, что означает, что если вам нужно
использовать анимации в вашем Angular приложении,
вам нужно явно установить модуль Angular Animations.
Итак, давайте продолжим и установим это тоже.
Итак, вы скажете
npm install —save @angular /animations @6 .1.7.
Кроме того, еще один модуль, который я установлю
вместе называется HammerJS.
Модуль HammerJS используется Angular
для поддержки некоторых жестов в приложении Angular.
Итак, это причина, по которой мы устанавливаем HammerJS также в нашем приложении
и текущая версия HammerJS, которую мы используем, 2.0.8.
Теперь мы установили все, что нам нужно
для модуля углового материала, который будет использоваться в нашем угловом приложении.
Далее, я собираюсь перейти к установке
Angular Flex-Layout в моем угловом приложении.
Итак, чтобы сделать это, я накладываю приглашение
npm install —save @angular/flex-layout
, и мы установим последнюю версию этого.
Итак, теперь, когда у нас есть все части, которые нам нужны для нашего углового приложения установлены,
давайте идти вперед, а затем настроить наше угловое приложение, чтобы сделать
использовать эти новые модули, которые мы установили в нашем угловом приложении.
Первое, что мы сделаем, это перейти к index.HTML файл,
, а затем мы настроим файл index.HTML для использования значков углового материала.
Итак, включить иконки углового материала, чтобы они могли быть
использованы в шаблонах вашего углового приложения, так что
позвольте мне пойти прямо там в голове index.HTML,
, а затем создать новую ссылку с
href=» https://fonts.googleapis.com/icon?family=Material+Icons "и это таблицы стилей.
Таким образом, с этим, я теперь могу использовать значки углового материала в
моего углового приложения, где бы я ни решил сделать это в шаблонах.
Следующий шаг - перейти в приложение module.ts и
затем импортировать три модуля, которые мы только что установили.
Итак, первый, который я собираюсь импортировать, называется
BrowserAnimationsModule, который я буду импортировать из
@angular /платформ-браузер/анимации. Итак, теперь следующий
, который я собираюсь импортировать, - это MaterialToolbarModule.
Таким образом, это импортирует модуль @angular /materal/toolbar
, который можно использовать в наших шаблонах угловых приложений.
Итак, угловой материал, а также импортировать
FlexLayoutModule из @angular /flex-layout.
Итак, как только у нас все эти модули импортированы, то одно дополнительное изменение, которое мне нужно сделать
- oh позвольте мне также импортировать Hammer.JS, пока я прямо там.
Итак, позвольте мне импортировать
Hammer.JS в мое приложение.
И как только я нахожусь на нем,
другое изменение, которое мне нужно сделать, также включить
эти модули во входы декоратора модуля NG здесь.
Итак, я собираюсь пойти туда и сказать модуль браузера,
модуль анимации браузера там, а затем после модуля HTTP,
я импортирую модуль панели материалов, а также модуль гибкого
как часть входов внутри декоратора модуля NG для моего модуля приложения.
Итак, с этим все мои конфигурации использовать модуль панели материалов и
модуль углового гибкого макета и вместе с
модуль анимации в угловом завершена.
Теперь давайте шаг в шаблон компонентов и использовать
наш первый компонент углового материала при разработке макета
для нашего приложения компонента.
Перейдя к файлу шаблона компонентов приложения,
Я собираюсь заменить это сейчас на
компонент углового материала
называемый как матовая панель инструментов.
Таким образом, матовая панель инструментов позволяет мне проектировать
панель инструментов, которую я могу использовать в своем угловом приложении.
Панель инструментов обычно отображается в верхней части страницы вашего приложения.
Итак, для этой панели инструментов я буду указывать цвет как основной.
Мы увидим, что это значит в ближайшее время.
А также мы закроем эту панель инструментов MD здесь.
Теперь внутри этого я собираюсь использовать span с
название моего ресторана, для которого я разрабатываю этот сайт.
Итак, Ристорант Кон Фьюжн.
Теперь вы понимаете, почему я назвал эту папку Путаница.
Итак, каково обновление, которое нам нужно сделать для HTML-файла компонента приложения.
Пока мы на нем, мы также будем включать несколько обновлений SCSS для моего файла styles.SCSS.
Итак, если вы заходите в свой код здесь,
вы найдете этот файл styles.SCSS здесь.
Итак, вот где вы можете включить все глобальные стили в
этот файл, и это будет доступно для всех компонентов, чтобы использовать.
Каждый компонент имеет свои собственные файлы SCSS, где вы можете включить компонент
настройка уровня или код SCSS уровня
, который будет использоваться в рамках этого конкретного компонента.
Мы будем использовать оба подхода в рамках
это угловое приложение, которое мы разрабатываем в этом курсе.
Но прямо сейчас я собираюсь обновить основной файл styles.SCSS
с некоторым кодом, который будет полезен для всего моего углового приложения.
Первое, что я собираюсь сделать,
, это импортировать готовую тему, которая доступна через угловой материал.
Эта готовая тема в угловом материале предоставляет нам способ указания
определенных цветов и способ некоторые вещи выложены
в пределах моих компонентов углового материала.
Цвета, которые будут доступны через предварительно построенный кадр наш основной цвет,
цвет акцента и цвет предупреждения.
Теперь конкретная тема, которую я буду использовать, называется глубокий фиолетовый.
Итак, в этом случае основным цветом будет глубокий Фиолетовый.
Цвет акцента будет янтарным, а предупреждающий цвет будет красным в этом случае.
Теперь вы можете построить свои собственные угловые темы материала, которые
вы можете использовать в своем приложении, но я оставлю это как упражнение для вас, чтобы исследовать самостоятельно.
Прямо сейчас в моем угловом приложении я собираюсь использовать один
из встроенных вещей, называемых темно-фиолетовым янтарным.
Итак, чтобы сделать это, идя к файлу styles.SCSS,
я буду импортировать
угловой материал
предварительно построенные темы глубокий фиолетовый янбер.CSS.
Итак, эта одна готовая тема, которую я буду использовать в своем угловом приложении.
Вы скоро увидите, как эта готовая тема работает в
угловом приложении в шаблонах, которые мы разработали для нашего углового приложения.
Кроме того, я собираюсь настроить некоторые свойства для
моего тела страницы index.HTML, поэтому я буду указывать заполнение как ноль,
маржа как ноль, а затем семейство шрифтов, которое я буду использовать
, является rubato или sans serif в моем приложении.
Вы можете использовать все, что вы хотите, в ваших угловых приложениях.
Я выбрал для использования этих двух в моем угловом приложении.
Давайте сохраним изменения,
и пойдем и быстро посмотрим на наше угловое приложение в браузере.
Прежде чем сделать это,
убедитесь, что служба NG работает в
одно из окон терминала на вашем компьютере.
Сервер разработки должен постоянно работать, чтобы он автоматически выполнял декомпиляцию
, а затем загружал
обновленную версию углового приложения в окно браузера.
Перейдя в браузер,
вы теперь видите изменения, которые мы сделали в
угловое приложение отражено в представлении в
мой браузер, так что вы можете видеть, что у нас теперь есть панель инструментов в верхней с
слова, которые мы включили в файл шаблона компонентов приложения там.
И вы можете увидеть цвет, который был применен к панели инструментов.
Так цвет, основной цвет,
так что это глубокий фиолетовый цвет, который применяется к панели инструментов.
Теперь тема, которую мы определили, добавит либо темно-фиолетовый или янтарный цвет,
в зависимости от того, что используется конкретными компонентами углового материала
, которые мы используем в наших шаблонах угловых приложений.
С этим мы завершаем это упражнение.
В этом упражнении мы настроили наше угловое приложение на использование
углового материала и угловой гибкой компоновки.
Мы также использовали
наш первый компонент углового материала в файле шаблона компонентов приложения.
И мы использовали встроенную тему из углового материала для нашего углового применения.
Сохраните все изменения, и тогда это подходящее время для вас
, чтобы сделать git commit с помощью настройки углового сообщения.