[MUSIC]
Давайте теперь начнем говорить об угловой маршрутизации.
Это маршрутизация или она укореняется?
Я буду укореняться за маршрутизацию.
Поэтому отныне я буду произносить все это как маршрутизация,
маршруты, маршрутизатор и так далее.
Если вы случайно находитесь из области, где на английском языке вы произносите его как маршрут или
маршрутизатор, пожалуйста, несите меня.
Итак, что такое Угловая маршрутизация и как она нам помогает?
С точки зрения углового приложения, которое мы видели до сих пор
, мы никогда не видели использования для маршрутизации.
Мы видели, что мы можем разработать угловое приложение с
несколькими компонентами, а затем использовать их один внутри другого, и
разработать целое угловое приложение, даже не говоря о маршрутизации.
Теперь предположим, что у вас есть несколько компонентов и
вы хотите иметь возможность перемещаться между компонентами в
таким образом, что вы можете вызвать эту навигацию, например
, нажав на ссылки или кнопки в вашем пользовательском интерфейсе и
иметь возможность отображать различные представления на экране вашего приложения,
затем Угловая маршрутизация приходит вам на помощь.
Мы увидим, как мы можем использовать маршрутизацию для разработки чего-то называемого одностраничных приложений
.
Мы поговорим о одностраничных приложениях в следующем уроке.
Но на данный момент давайте сосредоточимся на Angular Routing и
специально для Route модуль, который доступен в Angular.
Сам модуль маршрутизатора отделен от модуля Angular Core, поэтому
он доступен как отдельный модуль, и вам нужно будет импортировать его явно
в ваше угловое приложение, чтобы использовать поддерживаемую модель углового маршрутизатора
для навигации по радиусу
виды вне компонентов радиуса, которые являются частью вашего углового хищника.
Итак, в рамках упражнения мы добавим несколько компонентов и
мы увидим, как мы можем перемещаться между ними с помощью углового маршрутизатора.
Так как я уже упоминал, угловой маршрутизатор
позволяет навигацию между различными представлениями.
Таким образом, вы можете включить эту навигацию в
ссылки или кнопки на панели инструментов и
так далее, что вы можете включить в пользовательский интерфейс вашего углового приложения и
то вы можете вызвать навигацию из одного представления в другое представление
, нажав на ссылку или кнопку в ваш пользовательский интерфейс.
Это где Угловой маршрутизатор использует URL-адрес браузера и
он использует URL-адрес браузера в качестве инструкции для
для навигации между радиально генерируемыми представлениями клиента.
Все эти представления обычно поддерживаются несколькими компонентами
, которые формируют жесткую часть вашего углового приложения.
Теперь, когда вы перемещаетесь из одного представления в другое представление,
вы также можете передать необязательные параметры этим представлениям.
Как мы узнали на предыдущем слайде,
Угловой маршрутизатор использует URL-адрес для того, чтобы
позволить ему распознавать необходимость навигации между серединой.
Итак, здесь Угловой маршрутизатор использует то, что
уже поддерживается в HTML5 через API истории?
Итак, что позволяет нам делать API истории?
Это дает разработчикам возможность изменять URL-адрес сайта
, не вызывая обновления страницы.
Теперь, если вы привыкли посещать различные веб-сайты в вашем браузере,
вы обычно либо нажимаете на панель закладок, либо
по ссылке на странице, либо явно вводите URL-адрес в адресную строку вашего браузера.
Теперь, когда вы это делаете, вы явно указываете URL там.
Теперь, когда вы указываете URL,
вы запускаете ваш браузер, чтобы автоматически перейти на сервер и
получить эту новую страницу и отобразить страницу в окне браузера.
Теперь, если он может подавить эту необходимость, чтобы перейти на сервер и получить информацию, но
вместо этого изменить URL-адрес, не вызывая обновления этой страницы,
, тогда мы можем воспользоваться этим, чтобы позволить нам иметь возможность перемещаться
среди представлений, которые являются частью одного приложения и
это то, где мы берем преимущество HTML5.
API истории, который поддерживает такие методы, как pushState и replaceState.
Таким образом, pushState позволяет добавлять запись истории в историю браузера
без фактического обновления страницы.
Аналогично, replaceState изменит
существующую запись истории в истории вашего браузера.
Таким образом, вы даже можете использовать кнопку Назад и
вперед вашего браузера, чтобы иметь возможность двигаться назад и
вперед среди URL-адресов, не вызывая обновления страницы.
Теперь, здесь вам нужно указать что-то в индексе HTML
страницы, называемой базой.
Поэтому, когда API истории HTML использует эти методы,
, то для модификации вам нужно указать базу
местоположение, откуда вы указываете дополнительные части
вашего URL-пути, что не приведет к обновлению страницы.
Так что в этом случае, для нашего углового приложения,
это всегда начинается с корня.
Итак, вот почему мы указываем базу как href=»/».
Все остальное, что приходит после этого в URL-адресе, будет обрабатываться
в вашем угловом приложении как что-то, что
вызывает навигацию, которая обрабатывается самим угловым маршрутизатором
, не заставляя ваш браузер нуждаться в обновлении с сервера.
Таким образом, угловой маршрутизатор использует преимущества API истории HTML5.
Теперь, если у вас нет API истории,
другой способ сделать навигацию - использовать хэштеги.
Вы уже знаете, что в HTML, если вы укажете какую-либо ссылку, начинающуюся
с хэштега, которая ссылается на ссылку на той же странице.
Поэтому, когда вы нажимаете на такие ссылки, это не вызовет обновления страницы.
Вместо этого он перенаправит вас в другое место на той же странице.
Итак, это еще один способ делать вещи.
Но для чистого рендеринга HTML5 API поддерживает этот API истории
, который позволяет вам манипулировать историей
вашего браузера, не вызывая обновления страницы.
После этого длинного объяснения
давайте возьмем пример, чтобы помочь нам понять это еще дальше.
Предположим, вы определяете свой URL, как это скажем, например, example.abc.com/home.
Теперь с API истории HTML5,
вы можете просто взять эту последнюю часть URL и
изменить это на другой URL, как я показал здесь с example.abc.com/menu.
Таким образом, вы видите, что URL-адрес теперь был изменен от косой черты до слэша меню,
это изменение может быть вызвано с помощью метода push state API истории HTML5
без, как я уже упоминал, без перезагрузки страницы.
Вместо этого это будет внутренний триггер для навигации
, который Угловой маршрутизатор явно использует преимущества для
, поддерживая навигацию между различными представлениями вашего углового приложения.
Теперь, очевидно, вы должны быть заинтересованы в том, как Угловой маршрутизатор использует
этого.
Таким образом, здесь Угловой маршрутизатор использует манипуляцию историей
для изменения URL-адреса браузера без запуска обновления страницы.
Давайте возьмем пример.
Предположим, что у вас есть угловое приложение, проживающее по этому конкретному URL-адресу.
Теперь так бывает, что угловое приложение, над которым вы работаете
, отображается в браузере, обратившись к нему по этому конкретному URL-адресу.
Таким образом, это поможет нам быстро понять, что позволяет нам делать угловой маршрутизатор.
Таким образом, в этом случае, когда вы вводите это в свой URL-адрес браузера,
вы можете легко настроить, чтобы перенаправить вас
на местоположение по умолчанию в вашем угловом приложении.
Как правило, напомни мне, что что-то вроде дома.
Так что приведет вас к точке входа по умолчанию для
вашего углового приложения, которое для
ради легкого понимания, я пометку его как /home.
Поэтому, если ваш URL-адрес содержит локальный хост: 4200/home,
это означает, что вы находитесь в своем домашнем местоположении по умолчанию.
Теперь, когда эта навигация запускается,
вы можете позволить своему угловатому маршрутизатору автоматически вывести вас в представление, например
, которое поддерживается этим домашним компонентом.
Таким образом, когда URL становится локальным: 4200/home,
вы автоматически визуализируете вид домашнего компонента на экране браузера.
Очень точно, когда вы разместите представление, которое мы рассмотрим на следующем слайде и
в следующем упражнении.
Аналогично, вы можете иметь другие представления в вашем приложении Angular
, которые также могут поддерживаться через другие URL-адреса
, которые являются расширениями localhost:4200.
Так, например, если URL локальный: 4200/aboutus, то это
может привести вас к отображению представления, которое отображается AboutComponent.
И так же, меню покажет вам MenuComponent и так далее.
Итак, что это позволяет нам сделать, это
в зависимости от того, что URL используется в вашем браузере
вы будете использовать это для автоматического перемещения между различными видами
ваших различных компонентов вашего углового приложения.
Теперь вам не нужно явно беспокоиться об этом.
Если настроить Угловой маршрутизатор таким образом, чтобы заботиться обо всем этом, то маршрутизатор
автоматически позаботится о том, чтобы обеспечить вам навигацию между этими компонентами
, как мы видим в упражнении, которое следует за этой конкретной лекцией.
Теперь, прежде чем перейти к упражнению, где мы узнаем больше об
угловом маршрутизаторе, позвольте мне быстро обратить ваше внимание на несколько терминов
в Угловом маршрутизаторе, с которыми вы столкнетесь во время упражнения и
Я хотел бы, чтобы вы уделили особое внимание этим терминам
, потому что они имеют решающее значение для понимания того, как на самом деле работает Угловой маршрутизатор.
Таким образом, вы сначала увидите, что при разработке углового маршрутизатора
мы будем использовать эту помощь модуля маршрутизатора, который
является частью библиотеки углового косой черты маршрутизатора.
Итак, мы собираемся импортировать модуль маршрутизатора в или угловое приложение
в модуль приложения, а затем мы также будем импортировать маршруты.
Таким образом, маршруты позволяют нам определить различные маршруты, которые использует наше
Angular приложение или Angular Router.
Таким образом, в этом случае мы будем указывать маршруты в виде пути и
соответствующего компонента.
Итак, как вы видели на предыдущем слайде, вы видели, что каждое из этих расширений URL
сопоставляется с представлением конкретного компонента.
Таким образом, такая информация предоставляется этому Угловому маршрутизатору
через маршруты, и все эти маршруты указаны с использованием
объекта JavaScript, как этот путь с двумя свойствами.
Путь и компонент и некоторые дополнительные свойства, которые мы не встретим
прямо сейчас, но мы увидим в некоторых из последующих упражнений.
Кроме того, второй вопрос, который вы хотели бы спросить, где это представление будет отображаться
в вашем угловом приложении?
Это где в нашем шаблоне нашего компонента приложения
мы будем включать директиву называется routerOutlet, который указан как вы
видите как и.
Это будет включено в файл шаблона компонента приложения,
теперь ваш Угловой маршрутизатор переходит в
различные представления различных компонентов.
Соответствующее представление компонента будет включено в представление приложений
, где бы вы ни указали эту конкретную розетку маршрутизатора.
Итак, следите за этим в следующем упражнении.
Кроме того, чтобы вызвать навигацию, вы увидите, что
со многими тегами, которые используются в приложении.
Так, например, я бы включу настройку тегов с кнопкой MD
Компонент углового материала на панели инструментов,
в компоненте заголовка нашего углового приложения.
Я бы связал теги с другой директивой,
директива атрибута под названием routerLink.
routerLink является фактической директивой, что модуль маршрутизатора предоставляет нам.
Эта ссылка маршрутизатора позволяет нам указать путь, как, например,
написанные коды, я вижу «/menu».
Вы можете иметь более подробную информацию, чем это для routerLink.
Но для упражнения, мы начнем с простого примера, где мы бы имели,
например, /menu косой чертой дома связаться с нами и поэтому
на указано, используя атрибут routerLink напрямую.
Поэтому, когда вы нажимаете на ссылку, подобную этой на панели инструментов,
, это вызовет угловой маршрутизатор, чтобы вызвать изменение или
навигацию к определенному виду, который поддерживается модулем Угловой маршрутизатор.
Таким образом, сопоставление между этой ссылкой и соответствующими компонентами
уже указано в маршруте, который мы даем нашему угловому приложению.
Итак, следите за всеми этими вещами, когда вы делаете упражнение.
Я объясню некоторые из этих вещей и причину
делать их, пока мы делаем шаги упражнения, которое следует за этим уроком.
[МУЗЫКА]