[MUSIC]
В этом упражнении мы рассмотрим, как мы можем использовать модуль маршрутизации
Angular, чтобы иметь возможность поддерживать несколько компонентов, и
иметь возможность перейти к любому из этих компонентов в нашем угловом приложении.
Краткий взгляд на состояние нашего приложения.
В конце последнего упражнения
мы уже заметили, что в этом приложении, в заголовке
у нас есть ссылки на четыре разных цитаты, конец кавычки страниц здесь.
Теперь в угловых терминах, это будет поддерживаться с использованием
различных компонентов, как мы увидим в этом упражнении.
Итак, здесь мы видим, что когда мы нажимаем на Главная,
мы хотим иметь возможность видеть детали того, что должно присутствовать на главной странице.
И так же, о программе и меню конечно вы уже видите его прямо там,
и затем Контакт, вероятно, отображает некоторую информацию о содержании для
этого конкретного ресторана.
Так как же они поддерживают что-то подобное?
Во-первых, одним быстрым взглядом на него мы видим, что меню
уже поддерживается, отображая информацию о меню здесь, а
это уже облегчается с использованием компонента Menu.
Таким образом, мы видим, что компонент Menu сопоставляется между заголовком и
нижнего колонтитула и может отображать информацию прямо там.
Теперь, как мы можем использовать модуль углового маршрутизатора, чтобы позволить
нам поддерживать эти несколько компонентов и иметь возможность перемещаться между ними.
Теперь, чтобы начать, сначала, конечно, нам нужно несколько компонентов,
каждый из них показывает свое соответствующее мнение, чтобы мы могли перемещаться между взглядами.
Итак, давайте добавим еще три компонента в наше угловое приложение,
Дом, О и Контакт.
Вы уже знаете, как это сделать, так что давайте перейдем к следующему шагу.
В командной строке введите ng компонент
home, чтобы создать домашний компонент.
Аналогично генерировать
о компоненте и
также в то время как мы находимся на нем
контактный компонент.
Итак, теперь у нас есть три компонента, добавленные вместе с новым компонентом, который мы
уже имеем.
Компонент детализации диска уже используется в компонентах меню, поэтому
мы не рассматриваем его на данный момент.
Но теперь у нас есть домашние, о, контакты и меню компоненты, и
нам нужен способ идти между ними.
Так как же нам это делать?
Так вот где я использую модуль углового маршрутизатора.
Чтобы начать работу с модулем маршрутизатора, чтобы позволить нам перемещаться
между этими компонентами, давайте добавим новый угловой модуль.
Теперь этот шаблон использования модуля маршрутизатора - это то, что предлагается для
немного более сложных угловых приложений, но
, если мы сделаем это в качестве стандартной практики, это пойдет долгий путь, чтобы помочь нам в будущем.
Поэтому я начинаю даже простое приложение с
, помещающее модуль маршрутизатора в свой собственный отдельный модуль.
Таким образом, это включает в себя все наши потребности маршрутизации в отдельный модуль.
Чтобы начать работу, мы снова используем угловой CLI, чтобы
создать другой модуль, и мы назовем этот модуль как маршрутизация приложений.
Таким образом, этот модуль маршрутизации приложения, который мы собираемся создать, будет использовать
модуль углового слоттинга для предоставления функций маршрутизации для нашего приложения.
И затем мы будем использовать это в нашем модуле приложения, чтобы включить маршрутизацию.
Чтобы создать новый модуль, называемый маршрутизация приложений,
в командной строке типа ng module app-routing,
и который должен создать модуль маршрутизации приложений и
поместить файл app-routing.module.ts в эту конкретную папку там.
Теперь этот модуль маршрутизации приложений просто остался там.
Мы должны явно включить это в наш модуль приложения
, чтобы он мог использовать его.
Перейдя в редактор мы теперь видим, что у нас теперь есть еще одна папка здесь
называется app-routing и внутри, что у нас есть AppRoutingModule здесь,
мы выбираем общий угловой модуль, который угловой CLI сгенерировал для нас.
Это не имеет ничего конкретного в маршрутизации как таковой на данный момент,
, но мы собираемся добавить эти функции туда.
Но, прежде чем мы это сделаем, давайте использовать этот AppRoutingModule в нашем app.module,
корневой модуль для нашего углового приложения.
Чтобы сделать это, откройте app.module и
пока мы здесь, позвольте мне немного очистить здесь.
Мне, как правило, не нравится дезорганизованный код, поэтому
я просто собираюсь переместить весь этот код для
компоненты вместе в одном месте и
, тогда мне нужны мои услуги ниже.
Теперь у нас есть новый модуль, который мы получаем
из AppRoutingModule,
, который мы только что создали и
, то я собираюсь потребовать, чтобы
AppRoutingModule в мой модуль маршрутизации
или AppModule здесь.
Итак, я включаю AppRoutingModule, импортировав его сначала там.
И затем после этого, в импорт, я вхожу и
затем добавляю в AppRoutingModule.
Прямо там, AppRoutingModule.
Таким образом, мой модуль приложения
корневой модуль теперь исправлен, чтобы использовать AppRoutingModule.
Теперь это дает мне свободу разрабатывать мою часть маршрутизации в
моем AppRoutingModule с полной уверенностью в том, что она будет использоваться моим модулем приложения.
Так что давайте сохраним изменения в модуле приложения, и
тогда мы вернемся и откроем AppRoutingModule здесь.
И здесь мы собираемся использовать
модуль маршрутизатора, который Angular предоставляет нам.
Итак, здесь позвольте мне импортировать,
RouterModule здесь, а также сопутствующий модуль
Маршруты, который доступен из Angular.
И тогда я собираюсь импортировать это из Angular,
, а затем, RouterModule здесь.
Таким образом, из библиотеки углового маршрутизатора я импортирую как модуль RouterModule, так и модуль
Маршруты.
Поэтому, как только я это сделаю, очевидно, мне нужно иметь возможность включить RouterModule здесь.
Поэтому в дополнение к CommonModule, который я импортировал там,
мне также нужно использовать здесь RouterModule.
Теперь я оставлю его на этом этапе.
Мы разработаем маршруты для нашего углового приложения и
затем вернемся и исправим это немного позже.
Таким образом, позвольте мне сохранить изменения в модуле маршрутизации приложений.
И то, что я собираюсь сделать, это просто ради того, чтобы мой код был чистым и
организованным, я собираюсь определить все маршруты для моего приложения в другом файле.
Но я создаю в папке маршрутизации приложений, а затем назовем его как routes.ts5.
Теперь, внутри этого файла, я создаю все маршруты, которые мне нужны.
Итак, здесь я собираюсь импортировать,
Маршруты из, @angular /router,
, а затем использовать это для построения маршрутов для моего приложения.
Теперь, кроме того, мне нужно иметь возможность импортировать все
компоненты, которые у меня есть в моем приложении.
Потому что я хочу иметь возможность перейти ко всем компонентам.
Итак, где у меня список всех компонентов?
У меня есть их в app_module.
Так что позвольте мне перейти к app_module.
Я стараюсь не печатать вещи, насколько это возможно, чтобы держать вещи под контролем.
Поэтому я перейду в app_module, а затем скопирую все компоненты, которые у меня есть.
Мне не нужен AppComponent, потому что я не буду напрямую переходить к этому в моем приложении
, но остальные мне понадобятся.
Поэтому я собираюсь просто скопировать все эти и
, а затем включить их в мой файл маршрутов, здесь.
Итак, теперь у меня есть MenuComponent, Dishдеталь, заголовок, нога.
На самом деле, мне также не нужны заголовки и футеркомпонент.
Мне не нужны Header и
FooterComponent, потому что я не собираюсь перемещаться к ним с помощью маршрутов.
Поэтому позвольте мне удалить компоненты заголовка и нижнего колонтитула.
Мне нужно только Меню, Главная, О, Контакты.
Я включил Dishподробно, мы придем к этому в одном из последующих упражнений.
Итак, теперь, когда мы включили все это, следующий шаг для
меня, чтобы определить различные маршруты, которые доступны здесь.
Я буду определять константу здесь
именованные маршруты типа Маршруты.
Итак, теперь вы понимаете, почему у меня есть важные маршруты от углового маршрутизатора.
Таким образом, это позволит мне определить массив, указав
различные маршруты, которые являются частью моего приложения.
Здесь, позвольте мне указать все маршруты здесь.
Теперь, когда вы указываете маршруты в приложении Angular
, вы будете указывать путь.
Который я начну с HomeComponent,
, а затем, когда я перейду к домашнему пути,
соответствующим компонентом является HomeComponent.
Поэтому, когда мой URL-адрес включает в себя дом,
, тогда я буду переходить к HomeComponent.
В лекции ранее мы уже видели, как мы используем HTML
pushState () для распознавания внутренней навигации
, используя поддержку HTML для pushState ().
Вот что я использую здесь, чтобы определить эти различные маршруты здесь.
Поэтому, когда я говорю localhost:4200/home,
, то это указывает на HomeComponent, здесь.
Так что я буду ориентироваться на HomeComponent.
Аналогичным образом, мы можем определить для других компонентов в нашем приложении.
Следующий путь, который я собираюсь определить, - это MenuComponent.
Для этого упражнения я просто собираюсь определить только эти два.
Остальные будут заполнены как часть
некоторых из последующих упражнений и заданий, которые следуют за ними.
Итак, у нас есть два из них, Главная и Меню.
Теперь я также должен указать маршрут по умолчанию здесь.
Поэтому, когда пользователь переходит к localhost:4200,
, вы попадете в местоположение по умолчанию.
Поэтому в этом случае я просто перенаправлю пользователя на HomeComponent,
который будет отображаться в приложении Angular.
Поэтому, чтобы сделать это, я напечатаю свойство redirectTo.
И затем определите, что будет /home.
Это означает, что когда вы перемещаетесь без указания пути URL там,
вы автоматически перейдете к HomeComponent,
, и это должно соответствовать полному здесь.
Так что эти три, я поставлю для маршрутов здесь, на данный момент.
Остальные,
, как я уже сказал, будут добавлены в рамках остальных упражнений.
Теперь, очевидно, вы видите эти красные строчки
, потому что они все в
../Так что позвольте мне исправить их.
Итак, теперь из файла routes.ts
мы готовим эту константу Маршруты здесь и
, затем делая ее доступной.
Так что теперь, когда это готово для нас, мы вернемся к app-routing.module.
И в app-routing.module
я собираюсь импортировать константу маршрутов,
Маршруты константу.
Если вы хотите сказать, что как маршруты, маршруты константы, и используйте его здесь.
Теперь, как мне использовать его здесь?
Теперь RouterModule принимает в качестве
параметр для forRoot,
Параметр является конфигурацией маршрутов.
Поэтому я собираюсь предоставить маршруты в качестве параметра для этого, RouterModule.
Хорошо, так что это исправляет нашу конфигурацию маршрутизации для нашего приложения.
Одно последнее изменение, которое нам нужно исправить, заключается в том, что из app-routing.module
мы хотим иметь возможность экспортировать RouterModule в наш приложение-модуль так
, что он также может использовать его.
Так вот, где мы используем свойство экспорта
в нашем декораторе NgModule.
И сделать наш RouterModule доступным для AppModule.
Так что давайте сохраним изменения и до сих пор.
Теперь, когда вы направляетесь к одной из этих частей,
независимо от того, что вы отображаете вид для конкретного компонента.
У нас на данный момент ничего нет в нашем приложении.
При просмотре файла AppComponent.html.
Здесь по умолчанию у нас есть только заголовок приложения, меню приложения,
и нижний колонтитул приложения здесь.
Теперь, к счастью,
Angular RouterModule предоставляет нам
с директивой, называемой как маршрутизатор-розетка.
Поэтому всякий раз, когда вы указываете эту директиву как,
Тег в вашем файле шаблона.
Тогда ваше угловое приложение будет автоматически использовать
, что в качестве места, в котором должен быть вставлен соответствующий вид.
Итак, указав маршрутизатор-розетку в файле шаблона моего AppComponent.
Теперь я смогу отображать любую из этих данных в этом конкретном месте.
Таким образом, мы внесли изменения в модуль маршрутизации приложения
файл AppComponent.html, где мы добавили маршрутизатор-розетку.
Мы определили маршруты в файле Routes.ts и
, то у нас есть AppModule, где мы добавили в AppRoutingModule
как один из импорта там, после импорта его здесь.
Итак, после всех этих изменений, давайте пойдем и
взглянем на то, что наши угловые приложения показывают в браузере.
Перейдя в наш браузер, мы теперь видим, что в нашем браузере
вещь по умолчанию, которая была показана здесь, это домашние работы.
Из ваших знаний о том, как работает компонент, генерируемый угловым CLI.
Вы уже признаете, что это должно быть в шаблоне для домашнего компонента.
Также взгляните на URL в адресной части браузера.
Вы видите, что он говорит локальный: 4200/дом.
Если я просто напечатаю localhost:4200,
это автоматически перенаправит себя на localhost:4200/home.
Потому что мы настраиваем этот конкретный маршрут в нашей конфигурации маршрутов здесь.
Теперь у нас нет способа перейти к оставшимся модулям, поэтому
, как мы обеспечиваем связь, чтобы мы могли перейти к оставшемуся модулю.
Таким образом, чтобы заполнить это, мы должны пойти и иметь возможность добавить дополнительную
информацию в файлы шаблонов компонентов заголовка так
, что он может перемещаться между этими различными компонентами.
Возвращаясь к нашему редактору, позвольте мне открыть файл HeaderComponent.html.
Внутри этого файла HeaderComponent мы видим, что у нас есть эти кнопки
здесь, которые должны позволить нам перейти к тем конкретным компонентам там там.
Итак, здесь мы берем помощь другой директивы атрибута, что
модуль маршрутизации предоставляет нам называется routerLink.
Таким образом, мы поставим
routerLink как /home.
Что означает, что для этой конкретной кнопки
домашняя ссылка в нашей панели инструментов.
Когда мы нажимаем на это, это должно автоматически направлять меня домой.
Таким образом, мое угловое приложение знает, куда отправить меня в этот момент.
Так что это для дома.
Теперь также позвольте мне добавить один для меню здесь.
Для меню, когда я нажимаю на ссылку меню там,
, что должно привести меня к компоненту меню.
Таким образом, директива атрибута routerLink позволяет мне указать, как вы видите
здесь строку, в которой я могу указать путь, который должен быть добавлен в.
Давайте также сохраним эти изменения, а теперь посмотрим на наше приложение.
Перейдя к нашему приложению, теперь мы видим, что компонент Home отображается здесь.
Когда мы нажимаем на компонент Menu, мы находимся в меню.
Поэтому обратите внимание, как мое приложение автоматически переместилось на
компонент меню, чтобы показать представление с меню здесь.
А также взгляните на адресную строку,
обратите внимание, как адресная строка теперь показывает локальный хост: 4200/меню.
Опять же, мы можем перейти обратно к домашнему компоненту и к компоненту меню
назад и вперед.
Таким образом, это показывает, как, добавив эту маршрутизацию в наше приложение,
мы можем перемещаться и показывать различные взгляды в нашем приложении.
Теперь, о и контакт, мы собираемся сделать это в рамках
другого упражнения и задания, которое следует позже.
Это завершает это упражнение, где мы использовали модуль углового маршрутизатора и
затем настроили наше угловое приложение для использования различных маршрутов
, чтобы показать различные представления.
Это хорошее время для
, чтобы вы сделали фиксацию Git с сообщением Основы углового маршрутизатора.
[МУЗЫКА]