Теперь, когда у нас есть понимание одностраничных приложений,
мы продолжим работу над
нашего углового приложения, которое мы работали в упражнениях до сих пор
и развивать его в
одностраничное приложение, используя поддержку модуля углового маршрутизатора.
Мы уже включили несколько компонентов как часть
нашего углового приложения в предыдущем упражнении, и мы уже сделали
настроены для нашего углового приложения, чтобы иметь возможность маршрутизировать
между двумя различными компонентами.
Теперь мы будем интегрировать больше в наше угловое приложение и
развивать его в полноценное угловое приложение вместе с
навигации между различными взглядами
, оказываемыми различными компонентами нашего приложения.
Продолжая наше приложение, как оно стоит сейчас,
у нас есть дом, который отображается, когда вы переходите к нашему приложению
прямо сейчас, а затем шаблон Home был показан между заголовком и нижним колонтитулом, а затем, когда вы переходите в меню,
меню отображается между заголовком
и нижний колонтитул в виде здесь.
Теперь, очевидно, нам нужно интегрировать другие компоненты, которые мы
включили в наше угловое приложение
, чтобы разработать это как полноценное угловое приложение.
В этом упражнении мы собираемся интегрировать ContactComponent,
мы обновим шаблон для ContactComponent,
мы также обновим шаблон для HomeComponent и сделаем это
шаг вперед в направлении нашего одностраничного углового приложения.
Давайте начнем с ContactComponent.
Чтобы начать, сначала скопируйте шаблон для
ContactComponent, который я дал вам в инструкциях упражнения, а затем
вставьте его в файл contactcomponent.html, так что мы будем смывать
из фактического представления нашего ContactComponent немного более подробно здесь.
Теперь вы можете видеть, что я вырезал и вставил код для
файла шаблона из инструкций в мой ContactComponent.
Мы завершим интеграцию
ContactComponent в нашем приложении, а затем посмотрим на
, как выглядит ContactComponent, а затем вернемся
и быстро посмотрим на этот код немного позже.
Теперь, чтобы интегрировать ContactComponent в наше угловое приложение,
нам нужно включить путь к ContactComponent в наши маршруты.
Итак, перейдя в файл routes.ts сразу после Меню,
Я собираюсь включить другой путь для ContactComponent Я буду использовать
URL, как связаться с нами и
соответствующий компонент ContactComponent здесь.
Таким образом, с этим, мы теперь интегрировали наш ContactComponent
в наше приложение и давайте сохраним изменения в
это, а затем нам также нужно будет обновить компонент заголовка и обновить
ссылку в компоненте заголовка, чтобы помочь нам перейти к ContactComponent.
Итак, я просто собираюсь скопировать это из меню ссылку в
панели инструментов моего компонента заголовка там, а затем скопировать это в
ContactComponent, а затем обновить его, как связаться с нами.
Давайте сохраним изменения во всех файлах и
затем посмотрим на результирующее приложение.
Перейдя к приложению в нашем браузере,
если мы теперь перейдем к ContactComponent,
мы можем видеть, что детали ContactComponent отображаются
здесь между заголовком и нижним колонтитулом, как мы ожидаем.
Итак, внутри ContactComponent,
у нас есть название Контакты
там, а затем некоторая информация о местоположении, где я отобрал адрес.
Итак, это похоже на адрес, который мы
имеем в нижнем колонтитуле, поэтому я не собираюсь объяснять, что в
подробно то у нас есть другая часть здесь, где мы включаем карту нашего местоположения.
Мы не собираемся делать это на данный момент,
мы собираемся просто оставить его пустым, а затем также вы видите, что у меня есть
три кнопки, которые я включил здесь для вызова, Skype и электронной почты.
Эти три кнопки активируются в нашем приложении
, и я использую кнопку с поднятым ковриком, чтобы сделать эти три кнопки.
Таким образом, вы можете видеть, что эти кнопки выглядят иначе от
других кнопок, которые вы включили в свое приложение там.
Итак, это компонент поднятой кнопки из нашего углового материала там.
Итак, увидев ContactComponent и
тот факт, что мы можем перейти к ContactComponent.
Теперь, из других компонентов,
давайте быстро посмотрим на
код HTML, который мы включили для шаблона для нашего ContactComponent.
Перейдя к contactcomponent.html, вы увидите, что у нас есть
заголовок для этой страницы, включенный с помощью этого div
здесь и второй div внутри здесь с fxFlex
включает информацию о местоположении, а затем это внутри этой информации о местоположении,
Я снова определяю другой div, который позволит мне
включить несколько представлений в этот другой div здесь.
Итак, внутри этого я определяю
другой div с столбцом макета эффектов и строкой слоя эффектов.
Итак, это вложенный способ определения моих представлений CSS Flex здесь.
Итак, внутри этого снова
я использую представление div Flex с fxFlex 50, поэтому он
занимает половину, а затем смещение fxFlex 20 пикселей.
Итак, этот вид CSS будет смещен вправо на 20 пикселей, поэтому у меня
есть некоторый запас там, а затем у нас есть
адрес, включенный здесь, а затем вниз здесь,
вы можете видеть, что внутри другого div,
у меня есть тег с ковриком поднятой кнопки, связанной с ним.
Это то, что вызывает поднятые кнопки, которые у нас
есть в нижней части страницы контакта там.
Итак, трое из них здесь.
Один для телефонного номера.
Один для Skype и один для электронной почты здесь, а также обратите внимание, что я использую
Шрифт Awesome иконки для каждого из них, а затем карту
вашего местоположения в другом div здесь.
Итак, оба они заключены внутри этого внешнего div, который снова заключен внутри div.
Итак, вложенный способ определения гибких макетов для наших разных частей здесь.
Итак, это об этом для ContactComponent.
Теперь мы интегрировали это в наше одностраничное приложение.
Теперь, иду в DishService.
Теперь, в DishService вместе с методом getDishes,
я собираюсь ввести еще два метода.
Один метод называется getDish,
конкретное блюдо, а затем я идентифицирую блюдо с указанным здесь идентификатором.
Таким образом, id будет
, и это будет указывать мне блюдо с идентификатором, соответствующим этому номеру.
Так что это будет еще один метод, который я собираюсь добавить
в, а также добавить в другой метод под названием getFeaturedDish.
Таким образом, это блюдо будет использовать
признанное свойство, которое мы добавили
, а затем вернуть блюдо, для которого функция установлена в true.
Таким образом, вы можете выбрать одно конкретное блюдо, а затем сделать его доступным.
Теперь причина, по которой у меня есть этот флаг, заключается в том, что когда функция установлена в true,
это конкретное блюдо будет отображаться на HomeComponent.
Теперь, как мы выбираем эти блюда?
Итак, давайте добавим код для этого.
Итак, для getDish,
мне нужно вернуть что-то из блюд постоянной, что у меня уже есть.
Итак, из константы посуды
я собираюсь использовать способ JavaScript для фильтрации массива.
Итак, фильтрация массива поможет мне выбрать
из массива только те элементы, которые
соответствуют определенным критериям, которые будут указаны
внутри фильтра здесь, а затем среди них я верну только первый.
Теперь так бывает, что когда я указываю идентификатор,
он будет выбирать только один элемент, но затем он станет массивом.
Итак, из этого массива мне нужно извлечь этот один элемент в этом массиве.
Итак, вот почему я использую нулевые скобки.
Так что, это поможет мне идентифицировать.
Итак, как я могу фильтровать свою посуду?
Итак, для каждого блюда в моем списке блюд
так что это то, где я собираюсь использовать
еще одну особенность машинописного текста, называемую функциями стрелок.
Функция стрелки является сокращенным способом написания функции.
Итак, если вы привыкли писать функции,
вместо написания функции детально говоря функцию
, а затем в скобках блюдо и так далее,
я могу просто написать ее в случаях, когда функция очень проста,
очень очень легко написать это как функцию стрелки здесь.
Итак, здесь я укажу, что идентификатор блюда равен идентификатору.
Итак, то, что я указываю здесь, это фильтровать массив посуды и извлечь
только те элементы из массива, для которых идентификатор блюда.
Таким образом, каждый элемент здесь идентифицируется этим параметром блюдо здесь.
Итак, для которого идентификатор блюда соответствует
id, который был указан в качестве параметра блюдо.
Таким образом, вы извлекаете это конкретное блюдо из
этого массива, а затем вернете это блюдо из этого метода getDish.
Функции стрелок помогли мне написать код более простым способом.
Если вам не нравятся функции стрелок
, то вы можете написать его более традиционным способом, говоря:
«функция блюдо», а затем из этого вы вернете dish.id тройной, равной id,
, чтобы это вернуло логическое.
Когда фильтр встречает истинное внутри здесь,
эти элементы из блюд будут выбраны в массив.
Итак, именно здесь ваши знания JavaScript приходят в вашу пользу.
Итак, вам нужно знать, как работает фильтр JavaScript
, чтобы помочь вам понять, как это делается.
Хорошо, теперь аналогично для избранного блюда,
Я собираюсь использовать аналогичный метод для извлечения из моих блюд
массив с использованием фильтра здесь, но фильтр, который
я собираюсь определить здесь, будет снова функция стрелки здесь.
Вы привыкнете к функциям стрелок, а затем, как только вы привыкнете к ним,
тогда вы поймете, насколько просто они слишком правы.
Итак, здесь способ для выбора меня
- это свойство dish.features, потому что это dish.feature уже логическое там.
Итак, это поможет мне вернуть избранное блюдо.
Итак, для того, какое блюдо,
особенность блюда истинна.
Это конкретное блюдо будет отфильтровано из
массива блюд и тогда будет только один день.
Во всяком случае, вы должны убедиться в том, что
, чтобы вы установили только в true для одного из них,
, а затем я использую это, потому что этот фильтр вернет суб-массив из массива посуды,
, поэтому мне нужно выбрать этот элемент.
Там будет один элемент с нулевым индексом.
Итак, я использую индекс нуля, чтобы выбрать этот элемент и вернуть
, что из метода get fething from здесь.
Таким образом, это завершает обновление блюдо службы.
Чтобы построить наш домашний шаблон,
мы будем включать в домашний вид избранное блюдо,
выбранное текущее продвижение от ресторана,
и выбранный корпоративный лидер из списка читателей.
Корпоративный лидер, который отображается на первой странице, будет
частью вашего задания, которое следует за этим уроком.
Но теперь мы будем включать,
у нас есть избранное блюдо и избранное продвижение на первой странице.
Итак, что означает, что мне нужна услуга продвижения, которая возвращает
набор акций, которые проводятся этим рестораном.
Итак, позвольте мне добавить в службу промо-акций для моего приложения.
Итак, для этого в общей папке
я собираюсь создать новый файл под названием promotion.ts.
В promotion.ts я создаю класс,
класс продвижения и вернул эту акцию здесь.
Итак, что содержит этот промо-класс?
Он содержит идентификатор свойства,
затем он содержит название для продвижения ресторана.
Так, например, акция может быть как буфет на выходные.
или 10% от каждого дня в обеденное время
и такие вещи могут быть представлены на первой странице ваших ресторанов.
Итак, имя, то я также буду включать изображение,
, которое должно быть строки типа URL изображения,
затем метка, которая будет строкой.
Цена также строка.
Теперь, труд подразумевает,
вы не видите, что я использую их в данный момент,
мы принесем их в использование в одном из последующих упражнений, описанных Boolean.
Итак, вы видите флаг, который снова появляется в акции,
, а затем строка описания.
Итак, вы видите, что продвижение структурировано в значительной степени
похоже на структуру блюда, которую мы видели ранее.
Итак, это класс повышения.
Теперь, наряду с классом продвижения
мне нужно создать еще один класс, который
экспортирует набор продвижения говорят постоянные с акциями здесь.
Так вот, я собираюсь импортировать
класс продвижения
из файла promotion.ts,
, а затем я бы экспортировать константу под названием продвижение.
Итак, вы видите, что я использую структуру, очень похожую на блюда здесь.
Итак, вы начинаете видеть, что,
, что структура, которую мы использовали ранее для
акции для блюд также полезна для декларирования акций.
Если у вас другая структура,
вы увидите, что с лидерами структура будет немного
отличается для объекта JavaScript здесь. Акции.
Теперь, детали конкретной акции я дал его в инструкции,
, поэтому я бы предложил, чтобы вы скопировали и вставили его из
там вместо того, чтобы я набирал все это здесь.
Итак, позвольте мне идти вперед и скопировать и вставить
, что объект JavaScript в этот массив объектов JavaScript здесь,
так что вы идете.
Акция имеет всего один объект на данный момент.
В будущем мы можем добавить больше.
На данный момент у меня есть только один, поэтому я только что добавил его там,
, и я собираюсь использовать это, и это лучшее продвижение для моего ресторана там.
Это просто продвижение,
так что позвольте мне обновить, что акции,
это то, что мне нужно.
Итак, я просто собираюсь сохранить изменения в файле promotion.ts.
Далее я создаю еще один сервис под названием «сервис продвижения».
Итак, чтобы сделать это, давайте перейдем в командную строку в командной строке типа
ng генерировать опросы услуг/продвижение.
Итак, там создается служба продвижения.
Итак, теперь PromotionService работает на месте.
Итак, давайте добавим функции для PromotionService.
Итак, перейдя в PromotionService,
вы видите, что PromotionService теперь включен в вашу папку услуг здесь,
, поэтому нам нужно подготовить PromotionService.
Итак, в PromotionService,
я собираюсь импортировать
продвижение из акции/продвижения,
класс продвижения, а также импортировать
акции из класса акции/акции там.
Постоянные акции оттуда.
Теперь, как и для обслуживания блюд,
нам нужно создать три метода внутри PromotionsService.
Итак, то, что я собираюсь сделать, это спасти себя от неприятностей,
я пойду в dish.service,
, а затем просто скопировать эти три,
, а затем вставить его в мою службу продвижения,
затем просто отредактируйте код.
Хорошо, так что из службы продвижения,
мне нужно вернуть getPromotions и
это тип продвижения, а затем это будет возвращать ПРОМОЦИИ,
, а затем получить второй будет продвижение
, который снова получает идентификатор акции,
так что я собираюсь вернуть
АКЦИИ.filter promo.id является id.
Затем getFeatured продвижение.
Итак, вы можете видеть, что структура Promotionservice очень похожа на
блюдо, и это не будет тип продвижения,
и это вернет
PROMOTIONS.filter промо, и это будет promo.features и это все.
Мой PromotionService готов.
Теперь я собираюсь перейти в домашний компонент, и подготовить это,
так, чтобы в моем домашнем компоненте,
я покажу любимое блюдо и избранное продвижение.
Особенность/блюдо и функция/продвижение будут отображаться в
компонента дома с использованием компонента угловой карты материала.
Итак, нам нужно сначала получить данные в наш домашний компонент,
, так что это то, что мы будем делать в файле сценария типа домашних компонентов там.
Итак, перейдя в файл сценария типа домашних компонентов, home component.ts.
Здесь мне нужно импортировать блюдо
из shared/блюдо, а также
соответствующее блюдо.service из сервисов/dish.service.
Хорошо, теперь я собираюсь сделать то же самое для рекламных акций,
так что я просто собираюсь скопировать это и вставить его здесь,
, а затем отредактировать это,
так это будет продвижение,
это будет PromotionService,
, а затем продвижение, и тогда это будет PromotionService.
Таким образом, с этим, у нас есть как блюдо и
блюдо услуги и продвижение услуги доступны для нас,
в рамках нашего домашнего компонента.
Иду сейчас к конструктору,
Давайте теперь ввести две услуги здесь,
и сделать их доступными для наших приложений или блюдо службы,
и службы продвижения, введенной здесь.
Итак, с этим у нас есть доступ к обеим услугам.
Итак, теперь в рамках метода ngOnInit,
я собираюсь получить две популярные блюда.
Итак, я бы сказал это.dishService.getFeaturedDish
, а также продвижение,
promotionService и getFeaturedPromotion.
Просто чтобы быть полным,
позвольте мне объявить блюдо здесь как
типа Блюдо и продвижение как типа Продвижение здесь.
Таким образом, это должно прояснить все значения, которые мы используем здесь.
Таким образом, с этим мы завершим обновление нашего файла машинописного кода домашних компонентов.
Давайте теперь переключимся на файл шаблона
, а затем добавим в две карты, чтобы отобразить избранное блюдо и избранное продвижение.
Теперь, для этого, я дал вам код в инструкции.
Итак, я просто скопирую этот код и вставлю его сюда.
Вы уже знаете, как создавать карты,
, чтобы вы могли легко следовать код, который я вставляю здесь.
Итак, шаблон домашних компонентов также обновляется,
, так что вы можете видеть, что здесь есть две карты.
Для одного, отображение блюдо, а другой, отображающий продвижение здесь,
и заключенный внутри fxLayout div здесь.
Итак, давайте сохраним изменения, а затем быстро посмотрим на наше приложение.
После создания сервиса продвижения
мы также должны включить услугу продвижения в AppModule,
и сделать его доступным для нашего приложения.
Итак, я собираюсь зайти сюда,
, а затем импортировать
услугу продвижения здесь.
Затем объявил службу продвижения
как один из провайдеров
в моем файле AppModule.ts здесь.
Итак, в файле AppModule
я требую обоих этих,
, а затем сохранение изменений.
Иду в браузер,
теперь вы можете видеть, что в браузере
домашний компонент теперь показывает две карты,
один для избранного блюда и один для рекламной акции здесь.
Итак, вы можете видеть, что две машины отображаются здесь.
Теперь я могу перейти на страницу Меню,
, а затем также на страницу Контакты.
Страница «О программе» еще не существует,
вы собираетесь заполнить страницу «О программе» как часть вашего второго задания.
Взгляните на то же приложение на меньшем размере экрана
, так что это iPhone 6 Plus экран.
Давайте посмотрим на домашний компонент и экран iPhone 6 Plus.
Вы можете увидеть это блюдо и рекламной акции на главной странице.
Затем, меню, которое мы видели ранее,
, а также страница Контакты отображается здесь.
Итак, вы можете видеть, что теперь наше одностраничное приложение намного более настроено.
За исключением Про,
, который мы сделаем во втором задании.
Еще одно незначительное изменение, которое вы можете сделать в HTML-файле компонентов заголовка,
заключается в том, что наряду с директивой ссылки маршрутизатора,
Угловой маршрут также поддерживает еще одну директиву под названием routeLinkActive.
Это позволяет нам применять некоторые классы к конкретному элементу здесь.
Итак, в этом случае
, если эта ссылка становится активной, чем то, что я здесь указываю,
будет применяться как класс к этому конкретному элементу там.
Итак, я собираюсь указать класс, называемый активным.
Итак, здесь я указываю routerLinkActive с активным.
Итак, если я определяю класс CSS, называемый активным,
, то класс будет применен к этой ссылке,
всякий раз, когда этот конкретный вид отображается на странице приложений здесь.
Я собираюсь скопировать то же самое и применить его ко всем оставшимся кнопкам,
где я уже определил ссылку маршрутизатора.
Итак, я собираюсь применить класс routerLinkActive,
к Дому, Меню и Связаться с нами.
Теперь это также означает, что я должен определить активный класс CSS.
Итак, чтобы сделать это, я собираюсь перейти в заголовочный файл SESS компонентов,
, а затем определить активный класс здесь,
, поэтому я определяю активный класс прямо там.
Чтобы определить активный класс,
я собираюсь добавить еще одну цветовую переменную здесь, называемую background-moredark.
Тогда соответствующий цвет 4527A0,
это темная версия этого фона темного цвета, 4527A0.
Тогда, для моего активного,
то, что я собираюсь сделать, это, из активного класса,
Я позволю классу определить фон,
установить фон
этого элемента на фоне более темный цвет.
Таким образом, когда этот конкретный вид выбран и показан на странице,
то этот активный класс будет применен к
, что конкретный тег
там по активной директиве маршрутизатора ссылка, которую мы применили здесь.
Теперь, какие изменения это вызывает на нашей веб-странице.
Теперь, перейдя на нашу веб-страницу,
мы увидим, что это вводит на нашей веб-странице.
Перейдя в наше приложение,
вы теперь видите, что когда мы находимся в
домашний вид в домашнем компоненте, который отображается здесь, его соответствующий вид.
Затем кнопка Домой здесь имеет другой цвет фона, который применяется
, потому что активный класс был добавлен, потому что мы
определяем routerLinkActive для активного здесь.
Итак, этот класс применяется.
Аналогично, когда вы выбираете меню,
то вы видите, что меню подсвечивается в заголовке,
и вид меню отображается здесь,
и аналогично для содержимого.
Теперь, это позволяет нам увидеть с первого взгляда, на который платят конкретный вид VR,
в нашем одностраничном приложении.
Итак, это дополнительное небольшое предложение улучшения пользовательского интерфейса,
, что позволяет нам увидеть некоторые интересные функции.
Хотя, это не добавляет много функциональности приложения,
, но просто добавить немного функции, которая будет полезным дополнением к вашему приложению.
Итак, этим мы завершаем это упражнение.
В этом упражнении мы работали над интеграцией
контактного компонента в наше одностраничное приложение.
Мы также разработали пару карт, которые мы включили в домашний компонент
и добавили несколько новых функций в наше приложение.
Пришло время, чтобы вы сохранили изменения в вашем репозитории Git с сообщением
Одностраничное приложение Часть 1.