Прежде чем мы двигаться вперед с остальными упражнениями и заданиями в этом курсе,
я думал, что это будет хорошее время для меня
дать моему угловой приложению хорошую структуру.
Итак, вот где я собираюсь добавить в верхний и нижний колонтитул
для моего углового приложения, чтобы способ
визуализируется пользовательский интерфейс намного более привлекательным, чем то, что было до сих пор.
Итак, давайте посмотрим, как мы можем создать несколько компонентов, чтобы
занимать разные части экрана в нашем угловом приложении.
Итак, здесь, вы увидите, что мое угловое приложение теперь будет состоять из заголовка,
который является отдельным компонентом, нижний колонтитул,
который является еще одним компонентом,
, а затем в промежутке между ними,
я буду иметь часть моего углового приложения, которая будет
управляться позже с помощью углового маршрутизатора.
Итак, видите ли, я создаю сцену для того, что будет дальше в этом курсе.
Итак, по пути
мы также будем использовать шрифт Awesome Icons в нашем угловом приложении.
Я просто люблю шрифт Awesome Icons,
, поэтому я подумал, что это будет хорошее место, чтобы
ввести эти иконки в мое угловое приложение.
Чтобы продолжить, давайте установим шрифт удивительный в наше угловое приложение.
Итак, чтобы сделать это, я буду использовать NPM, чтобы пойти,
и получить шрифт-awesome для меня,
, поэтому NPM установить шрифт-awesome 4.7.0 и сохранить.
Тогда пусть font-awesome будет установлен.
Итак, как только font-awesome попадает в наше угловое приложение,
, а затем становится частью модулей узла
, которые включены в наше угловое приложение,
следующим шагом является сделать его доступным для нашего углового приложения.
Нам нужно интегрировать font-awesome в наше угловое приложение.
Итак, для этого
перейдите в исходную папку
, а затем создайте файл с именем _variables.SCSS в исходной папке.
В переменных.SCSS файл
добавить в $fa-font-path: и
затем в кавычки, поставить../node_modules/font-awesome/шрифты.
Итак, мы указываем путь шрифта для наших удивительных файлов шрифтов здесь.
Затем откройте файл styles.SCSS,
, а затем в файле styles.SCSS,
мы собираемся добавить в пару строк там.
Во-первых, мы импортируем переменные, которые мы только что объявили, говоря @import,
и в кавычках переменных,
затем мы будем импортировать шрифт-удивительные файлы там,
то мы скажем
@import../node_modules/шрифт-awesome/SCSS/шрифт-awesome. Мы импортируем версию
SCSS, потому что мы используем SCSS в нашем угловом приложении.
После того, как мы изменили стили для файла CSS,
давайте сохраним изменения.
На данный момент нам может понадобиться перезапустить
наш сервер, который обслуживал наше угловое приложение.
Итак, где вы набрали NG serve,
вы можете остановить сервер, который обслуживает ваше угловое приложение и
перезапустить его так, чтобы он включал эти новые изменения, которые были сделаны.
Итак, перейдя к моему терминалу,
Я собираюсь остановить свой сервер,
, а затем перезапустить сервер, чтобы он принял во внимание изменения, которые я сделал.
Вы увидите текущее состояние
нашего углового приложения, глядя на него в браузере.
Итак, это то, что мы имеем в нашем угловом приложении.
Я хочу иметь возможность добавить верхний и нижний колонтитул в
это представление, чтобы я мог использовать как верхний, так и нижний колонтитул,
, а затем фактическое содержимое между заголовком
и нижний колонтитул таким образом, как я создаю свое угловое приложение.
Итак, чтобы сделать это,
я собираюсь создать два новых компонента, называемых заголовком и нижним колонтитулом,
и позволить им управлять своей частью экрана, которая выделена для них.
Переходя к подсказке, позвольте мне сгенерировать новый компонент заголовка.
Я даже могу сказать, что ng g,
этого достаточно для углового CLI, чтобы
признать, что он хочет сгенерировать компонент.
Итак, я говорю, что заголовок компонента ng,
, а также нижний колонтитул компонента ng.
Итак, теперь у меня есть два компонента, которые доступны для меня
, чтобы использовать в моем угловом приложении.
Как я буду использовать эти два компонента?
Давайте перейдем к файлу App component.html,
, а затем использовать эти два компонента так, как мы
составляем весь экран для нашего углового приложения.
Возвращаясь к нашему приложению,
мы видим, что файл module.ts
уже включает заголовок и нижний колонтитул
и они уже были включены в объявления здесь.
Таким образом, это преимущество использования углового CLI,
он заботится обо всем этом фундамент для
вы, так что вы можете сосредоточиться на просто построении вашего углового приложения.
Итак, вот почему я люблю угловой CLI
как подход к построению моего углового приложения.
Итак, теперь давайте перейдем к HTML-файлу компонентов приложения.
Итак, здесь вы видите, что мы включили там меню приложения.
Я собираюсь удалить эту панель инструментов из HTML-файла компонентов приложения.
Эта панель инструментов станет частью шаблона заголовка для моего компонента заголовка.
Таким образом, вместо этого мой шаблон компонентов приложения
файл будет содержать только заголовок и нижний колонтитул внизу.
Итак, вы видите, что теперь
у нас есть взгляды на три компонента.
Заголовок, меню,
и нижний колонтитул, занимающий весь экран.
Итак, эти три компонента получают ту часть экрана для себя.
Давайте сохраним изменения и быстро посмотрим на наше приложение в браузере.
Перейдя в приложение в браузере,
вы теперь видите, что заголовок уже занял его
часть экрана там, и, очевидно,
так как мы только что подготовили компонент,
он просто говорит заголовок работает,
, а затем вниз здесь,
нижний колонтитул также занял свое место на странице экрана.
Теперь мы будем идти вперед и обновлять шаблоны как для заголовка, так и для нижнего колонтитула
, чтобы мы могли красиво определить наш пользовательский интерфейс для нашего углового приложения.
Давайте начнем работу на нашем нижнем колонтитуле.
Итак, чтобы начать работу с нижнего колонтитула,
, давайте перейдем к файлу шаблона нижнего колонтитула
, а затем мы собираемся заменить это новым шаблоном нижнего колонтитула.
Теперь, для вашего удобства,
я предоставил код для вас в инструкции.
Будет разумно скопировать весь код оттуда
, а затем вставить его сюда.
Затем изучите, что делает этот нижний колонтитул.
Так вот, вы видите, что я вставил в код для моего шаблона нижнего колонтитула.
Теперь я вернусь к этому коду немного позже.
Если вы сделали предыдущий курс на Bootstrap,
вы увидите, что это угловой материальный способ реализации
той же структуры для нижнего колонтитула, что мы сделали в курсе Bootstrap.
Некоторые из этих вещей будут узнаваемыми для вас уже,
, но позвольте мне завершить обновление шаблона нижнего колонтитула,
, а затем также мы добавим в несколько SCSS код в мой footer component.SCSS файл,
, а затем посмотрим, как нижний колонтитул теперь формируется.
Так вот, я снова вставил в код
из инструкции упражнения, которые следуют этому видео,
, чтобы показать различные классы SCSS, которые я добавил в свой нижний колонтитул.
Итак, у меня есть несколько классов, которые я определил здесь,
Я собираюсь использовать их для определения части моего нижнего колонтитула,
, а затем аналогично классу нижнего колонтитула здесь,
, и у меня есть смешивание SCSS здесь,
и некоторые переменные здесь, которые
определяют различные цвета, которые я собираюсь использовать в моем угловом приложение.
Итак, давайте сохраним изменения, которые мы внесли.
Давайте посмотрим на нижний колонтитул в его текущем воплощении
, а затем мы вернемся и рассмотрим быстрый визит к коду, который я включил как
в файл шаблона компонентов нижнего колонтитула, так и код SCSS здесь.
Перейдя в наше угловое приложение в браузере, wallah,
там у вас есть новый нижний колонтитул для нашего углового приложения.
Итак, вы видите, что у меня есть несколько вещей.
Это на левом краю различные ссылки
на различные страницы, которые будут составлять часть моего углового приложения.
Мы посмотрим, как мы это делаем в рамках следующих нескольких упражнений.
Теперь, здесь я использую компонент кнопки, который
является частью углового материала, чтобы определить эти ссылки здесь,
то у меня есть адрес здесь,
, а затем я также использую снова кнопки, чтобы определить эту последовательность
кнопок для различных социальных сетей ссылки для моего ресторана здесь.
Итак, вы видите, что у меня есть все это.
Для создания этих, я использую
поддержку углового материала для небольших плавающих кнопок действия здесь,
, и это дает хорошую структуру для этого.
Если вы видели Bootstrap версию этого,
Мне нравится это намного лучше, чем версия Bootstrap, которую я создал в предыдущем курсе.
Итак, наш нижний колонтитул теперь хорошо на месте.
Давайте быстро рассмотрим код в нижнем колонтитуле.
Теперь, я не буду объяснять, что в целом много деталей, потому что это, чтобы
иметь дело с более угловым материалом, чем сам Angular,
, но по пути, просто взглянув на структуру кода,
вы начнете видеть, как
этот угловой материал компоненты могут быть использованы для определения что-то вроде этого.
Переходя к компоненту нижнего колонтитула,
вы видите, что у меня есть внешний div здесь, для которого я указал некоторый угловой макет,
flex атрибуты макета здесь,
поэтому я говорю, что fxLayout строку,
, а затем fxLayout см и xs должны быть столбцами.
Итак, для небольших и дополнительных небольших размеров экрана
собирается позиционировать все содержимое как столбцы,
но для больших размеров экрана,
он собирается позиционировать их как строку.
Итак, это то, что дает мне хорошую структуру для моего нижнего колонтитула.
Как вы видите в UI div,
Я позиционирую весь центр контента здесь,
и ниже здесь,
Я определяю первый.
Итак, этот математический поворот здесь, который я использую, определяет мои ссылки здесь.
Итак, в этом я использую мат как компонент углового материала,
и внутри я использую атрибут a с
кнопки мат, назначенный a для создания этих кнопок здесь.
Позже я вернусь и добавлю
фактический код для этих ссылок в последующих упражнениях здесь.
Это то, что помогает мне создать список ссылок на левой стороне.
Это адрес, который вы видите,
это довольно просто смотреть.
Итак, это div, для которого я использую fxFlex с 50,
и другой с fxFlex с 40.
Итак, 40 означает 40 процентов, а 50 означает 50 процентов,
, и здесь я использую смещение fxFlex 20 пикселей.
Таким образом, он перемещает этот контент прямо на 20 пикселей.
Итак, у меня осталось 20 пикселов слева для
этого конкретного div, содержащего эти ссылки здесь.
Затем, наконец, ниже здесь,
У меня есть этот набор ссылок, которые я использую для
создать бар со всеми ссылками социальных сетей там.
Итак, я использую кнопку с значком ковра здесь.
Итак, вот что создает закругленные кнопки, которые вы видите в нижнем колонтитуле.
Теперь, для каждого из них,
я применяю соответствующий класс здесь.
Итак, вы можете заметить, что кнопка Google Plus, кнопка Facebook,
все эти классы определены в моем файле SCSS там,
где я указал цвета для фона и так далее для этого,
так, что он соответствует типичной цветовой схеме, которую используют эти сайты социальных сетей.
Итак, потратьте немного времени, глядя на этот код здесь,
, а затем вы быстро получите представление о том, как был разработан нижний колонтитул.
Точно так же, идя к компонентам нижнего колонтитула Sass код здесь,
, так что вы можете видеть, что я определил различные цвета здесь.
Я использую смешивание с полем, установленным здесь,
, а затем для моего нижнего колонтитула,
Я определяю цвет фона соответствующим образом,
и замечаю различные классы, которые я определяю здесь
кнопку Facebook, для которой цвет и
цвет фона я определил для каждого из них.
Итак, что соответствующий цвет
, что сайт социальных сетей используется в качестве цвета фона для каждого из них.
Теперь, в курсе Bootstrap ранее,
я использовал Bootstrap Social для достижения того же самого.
Это не очень хорошо работает с угловым материалом,
, поэтому я просто создал свой собственный набор очков Sass здесь,
, а затем добавить в код, который мне нужно создать эти кнопки там.
Если вам нужно добавить больше кнопок,
, то просто создайте больше классов, как это соответствует
кнопки, которые вы хотите добавить в ваше приложение.
Итак, это укрепляет наш нижний колонтитул.
Теперь заголовок - это следующая часть, на которую мы собираемся нацелить.
Переходя к заголовку, откроет файл шаблона компонентов заголовка
и вы увидите, что он содержит.
Мы собираемся заменить это на
шаблон, который я дал для вас в инструкции, которые следуют здесь.
Итак, просто идите вперед и вырежьте и вставьте этот код здесь,
, потому что это не имеет ничего общего с угловым.
Итак, вот почему я просто разрешаю вам вырезать и вставить код прямо оттуда,
экономит время для нас.
Вы можете видеть, что я теперь заменил шаблон заголовков на какой-то код здесь.
Точно так же, пока мы на нем,
мы также добавим в некоторый код SCSS для моего файла header.components.SCSS здесь,
просто пойти и скопировать код из инструкций.
Аналогично, пока мы находимся на нем,
мы добавим еще несколько классов SCSS в мой основной файл styles.SCSS.
Итак, в этот основной файл styles.SCSS,
я добавлю в sub цвета и еще пару классов в это.
Итак, давайте вставим код из инструкций, которые я вам дал.
Итак, обновление файла styles.SCSS теперь завершено,
, поэтому я добавил в некоторых цветах здесь и смешать там,
, а затем внизу я добавил еще несколько классов здесь, которые
помогают мне, когда я разрабатываю мои шаблоны для моего углового приложения.
Итак, все эти изменения,
давайте сохраним изменения,
быстро посмотрим, как выглядит мой заголовок сейчас в приложении,
, а затем мы вернемся и быстро пересмотрим код, который мы только что включили здесь.
Возвращаясь к моему угловатому приложению в браузере,
вы теперь видите, что панель инструментов снова появляется в заголовке здесь,
вместе с несколькими ссылками в
там, а затем изображение, представляющее логотип для моего ресторана,
, а затем здесь, у вас есть что-то, что мы используем файл jumbotron в предыдущем Конечно.
Я собираюсь просто использовать класс под названием jumbotron для создания этого
в угловом приложении также,
, поэтому здесь, на левой стороне у меня есть информация о моем ресторане и
логотип ресторана и оставил себе некоторое пространство для добавления чего-то в будущем.
Итак, здесь вы видите, что мое приложение теперь формируется с заголовком
с некоторыми ссылками там.
Теперь мы собираемся использовать эти ссылки в
следующие несколько упражнений, чтобы настроить мое угловое приложение,
, а затем меню сидит между, а затем вниз ниже мой нижний колонтитул.
Перейдя к моему файлу шаблона компонентов заголовка,
теперь вы можете увидеть, как я создал панель инструментов с дополнительными кнопками здесь.
Итак, вы помните, что у нас была панель инструментов
уже используется в файле шаблона компонентов приложения,
Я вырезал его оттуда и вместо этого использовать панель инструментов в шаблоне заголовков здесь.
Теперь, внутри этой панели инструментов,
я включил некоторые ссылки с классом кнопок, примененным к ней, и это то, что
позволяет мне создавать эти ссылки на панели инструментов в качестве меню для моего веб-приложения.
Ниже я создал div с контейнером класса и jumbotron.
Вот почему я добавил классы контейнера и jumbotron в свой файл SCSS,
, чтобы я мог использовать их в своих шаблонах здесь.
Итак, для чего опять,
я применяю и некоторые атрибуты гибкого макета здесь, чтобы помочь мне спроектировать экран там.
Тогда вы можете увидеть, как я использовал пару divs здесь с
атрибут fxFlex, применяемый соответствующим образом для создания пользовательского интерфейса,
для моего приложения здесь.
Итак, потратьте немного времени здесь, чтобы быстро взглянуть на этот код здесь, чтобы
быстро понять, как был создан мой макет для моего шаблона заголовка.
Это не так сложно,
, как только вы закончили курс Bootstrap,
это не так сложно понять.
По пути вы также изучаете угловой гибкий макет, а затем
также компоненты углового материала здесь.
Перейдя к файлу SCSS для компонента заголовка,
вы можете видеть, что я добавил в некоторых цветах здесь, а затем микс
, а затем также добавил в класс jumbotron здесь.
Теперь класса контейнера здесь нет,
класс контейнера находится в главном файле стилей.
Потому что класс контейнера - это то, что я собираюсь использовать
для многих шаблонов там.
Итак, вот почему я добавил в класс контейнера в файл styles.SCSS
, который является общим файлом для всего моего углового приложения.
Итак, там я добавил в некоторых дополнительных цветах здесь,
, а также я создал смесь здесь,
, а затем добавил в контейнер,
фоновый первичный и фоновый акцент цвета,
, а затем я также использую другой класс под названием flexes spacer,
, который я собираюсь использовать в одно из последующих упражнений.
Все эти шаги находятся в подготовке к тому, что собирается
прийти в следующих нескольких упражнениях.
Мое угловое приложение теперь приняло хорошую форму с точки зрения того, как интерфейс выложен,
, так что теперь я могу начать вводить гораздо больше новых функций для угловых.
Оплатив еще одно посещение моего углового приложения в браузере,
позвольте мне увидеть, как это приложение выглядит в разных размерах экрана.
Итак, это стандартный размер экрана рабочего стола,
, поэтому давайте перейдем к меньшему размеру экрана, а затем посмотрим, как выглядит приложение.
Итак, это размер экрана iPhone 6 Plus,
, так что вы можете видеть, как макет отличается для меньшего размера экрана.
Итак, мой заголовок находится прямо там, и мое меню внизу и нижний колонтитул здесь,
обратите внимание, как различные части нижнего колонтитула были
разложены по-разному для дополнительного небольшого размера экрана.
Это то же приложение в ландшафтном режиме или iPhone 6 Plus,
так что вы можете видеть, что мой заголовок выложен так и меню там и нижний колонтитул.
Итак, это показывает вам, что я использую угловой гибкий макет
, чтобы иметь возможность создавать разные макеты для разных размеров экрана.
Итак, опять же, если вы прошли курс Bootstrap раньше,
вы начнете видеть, как отзывчивый дизайн с
угловой гибкой макет также может быть использован для достижения аналогичных результатов.
Итак, этим мы завершаем это упражнение.
В этом упражнении мы подготовили наше угловое приложение и сделали
готовым к остальным упражнениям в этом курсе.
Это также хорошее время для вас, чтобы сделать git commit с заголовком и нижними колонтитулами сообщения.