[MÚSICA]
Vamos agora começar a falar sobre Roteamento Angular.
É roteamento ou está enraizando?
Eu vou estar torcendo para roteamento.
Então, daqui em diante, vou pronunciar todos estes como roteamento,
rotas, roteador e assim por diante.
Se acontecer de você ser de uma área onde em inglês você pronuncia como rota ou
roteador, por favor, tenha paciência comigo.
Então, o que exatamente é Roteamento Angular e como isso nos ajuda?
Em termos da aplicação Angular que vimos até
até agora, nunca vimos o uso para roteamento.
Vimos que podemos desenvolver uma aplicação angular com
múltiplos componentes e, em seguida, fazer uso deles um dentro do outro, e
desenvolver toda uma aplicação Angular sem sequer falar de roteamento.
Agora suponha que você tem vários componentes e
você quer ser capaz de navegar entre os componentes em
de uma forma que você pode fazer com que esta navegação através, por exemplo, clicando em links ou botões em sua interface do usuário e
ser capaz de renderizar diferentes visualizações na tela do seu aplicativo,
então
Roteamento Angular vem em seu resgate.
Vamos ver como podemos usar roteamento para desenvolver algo chamado aplicativos de página única
.
Falaremos sobre aplicativos de página única na próxima lição.
Mas no momento, vamos nos concentrar em Roteamento Angular e
especificamente o Route um módulo que está disponível em Angular.
O módulo de roteador em si é separado do módulo de núcleo angular, então
ele está disponível como um módulo separado e você precisará importá-lo explicitamente
em seu aplicativo Angular, a fim de fazer uso do modelo de roteador angular de
suportado fornece para você navegar entre raio
visualiza os componentes do raio que fazem parte da sua predação angular.
Então, como parte do exercício, vamos adicionar vários componentes e
vamos ver como podemos navegar entre eles usando o roteador angular.
Então, como já mencionei o roteador angular
permite a navegação entre várias visualizações.
De tal forma que você pode incluir esta navegação em
os links ou os botões baseados na barra de ferramentas e
assim por diante você pode incluir na interface do usuário do seu aplicativo Angular e
então você pode acionar a navegação de uma vista para outra view
clicando no link ou no botão em sua interface do usuário.
Aqui é onde o Roteador Angular aproveita o URL do navegador e
ele usa o URL do navegador como uma instrução para
ele navegar entre as visualizações geradas pelo cliente raio.
Essas exibições são normalmente suportadas pelos vários componentes
que formam o seu aplicativo Angular.
Agora, quando você navega de uma vista para outra,
você também pode passar parâmetros opcionais para essas exibições.
Como aprendemos nesse slide anterior,
o Roteador Angular aproveita o URL para
habilitá-lo a reconhecer a necessidade de navegar entre o meio.
Então, é aqui que Angular Router tira proveito do que
já é suportado em HTML5 através da API de histórico?
Então, o que a API de histórico nos permite fazer?
Ele dá aos desenvolvedores a capacidade de modificar
URL de um site sem causar uma atualização de página.
Agora, se você está acostumado a visitar vários sites em seu navegador,
você normalmente clicará na barra de favoritos ou
em um link em uma página ou você digitaria explicitamente em
o URL na barra de endereços do seu navegador.
Agora, quando você faz isso, você está especificando explicitamente o URL lá.
Agora, quando você especifica um URL,
você está acionando seu navegador para ir automaticamente para um servidor e
buscar essa nova página e renderizar a página na janela do navegador.
Agora, se ele pode suprimir essa necessidade de ir a um servidor e buscar informações, mas
em vez disso alterar o URL sem causar esta atualização de página,
então podemos aproveitar isso para nos permitir ser capaz de navegar
entre as visualizações que fazem parte de um único aplicativo e
este é o lugar onde tomamos vantagem do HTML5.API de histórico
que suporta métodos como PushState e ReplacEstate.
Então, o pushState permite que você adicione uma entrada de histórico ao histórico do seu navegador
sem realmente causar uma atualização de página.
Da mesma forma, um ReplacEstate modificará
a entrada do histórico existente no histórico do seu navegador.
Então, você pode até mesmo usar o botão voltar e
avançar do seu navegador para ser capaz de mover para trás e
para frente entre os URLs sem causar uma atualização de página.
Agora, este é o lugar onde você precisa especificar algo dentro do seu índice HTML
página chamada base.
Então, quando a API de histórico HTML faz uso desses métodos,
então para a modificação, você precisa especificar uma base
local de onde você está especificando as partes adicionais
do caminho de URL que não resultará em uma atualização de página.
Então, neste caso, para a nossa aplicação Angular,
isso sempre começa na raiz.
Então, é por isso que especificamos a base como href=”/”.
Tudo o resto que vem depois disso no URL será
tratado dentro do seu aplicativo Angular como algo que
aciona navegação que é tratado com o roteador Angular em si
sem fazer com que seu navegador precise de uma atualização de um servidor.
Então, é assim que o roteador angular aproveita a API de histórico HTML5.
Agora, se você não tem a API de histórico,
a outra maneira de fazer navegação é usando hashtags.
Você já sabe que em HTML, se você especificar qualquer link começando
com uma hashtag, que se refere a um link dentro da mesma página.
Então, quando você clica em tais links, isso não causará uma atualização de página.
Em vez disso, ele redirecionará você para outro local dentro da mesma página.
Então, essa é outra maneira de fazer as coisas.
Mas para renderização limpa, a API HTML5 suporta essa API de histórico
que permite manipular o histórico de
seu navegador sem causar uma atualização de página.
Depois dessa longa explicação,
vamos dar um exemplo para nos ajudar a entender isso ainda mais.
Suponha que você defina seu URL assim, digamos, por exemplo, example.abc.com/home.
Agora com a API de histórico HTML5,
você pode simplesmente pegar a última parte do URL e
modificá-la para outro URL como eu tinha mostrado aqui com example.abc.com/menu.
Então você vê que o URL agora foi alterado da barra inicial para o menu barra,
esta alteração pode ser acionada usando um método de estado push da API de histórico HTML5
sem como mencionei, sem recarregar a página.
Em vez disso, este será um gatilho interno para a navegação
que o Roteador Angular aproveita explicitamente para
suportar a navegação entre várias visualizações do seu aplicativo Angular.
Agora, obviamente, você deve estar interessado em como o Roteador Angular aproveita
disso.
Então é aqui que o Roteador Angular aproveita a manipulação de histórico
para modificar a URL do navegador sem acionar uma atualização de página.
Vamos dar um exemplo.
Suponha que você tenha seu aplicativo Angular residindo neste URL específico.
Agora, acontece que o aplicativo Angular que você está trabalhando em
está sendo renderizado para o navegador acessando-o neste URL específico.
Então, ele nos ajudará a entender rapidamente o que o Roteador Angular nos permite fazer.
Então, neste caso, quando você digita isso em seu URL do navegador,
you Angular Router pode ser facilmente configurado para redirecionar você
para um local padrão dentro de seu aplicativo angular.
Normalmente, me lembre que algo como casa.
Então, que irá levá-lo para o ponto de entrada padrão para
sua aplicação angular que para
bem de fácil compreensão, vou rotulá-lo como /home.
Portanto, se o seu URL contiver localhost:4200/home,
isso significa que você está em seu local inicial padrão.
Agora, quando esta navegação é acionada,
você pode então permitir que seu Roteador Angular o leve automaticamente para a exibição,
por exemplo, que é suportada por esse componente doméstico.
Então, quando o URL se torna localhost:4200/home,
você renderizará automaticamente a visualização do componente inicial na tela do navegador.
Muito exatamente quando você coloca a exibição que veremos no próximo slide e
no exercício que se segue.
Da mesma forma, você pode ter outras exibições dentro do aplicativo Angular
que também podem ser suportadas por meio de outros URLs
que são extensões para o localhost:4200.
Assim, por exemplo, se a URL for localhost:4200/aboutus, então essa
pode levar você a ser mostrada a exibição que é renderizada pelo AboutComponent.
E da mesma forma, o menu mostrará o MenuComponent e assim por diante.
Então o que isso nos permite fazer é,
dependendo do que o URL sendo usado em seu navegador
você vai usar isso para navegar automaticamente entre as várias visualizações
de seus vários componentes de seu aplicativo Angular.
Agora, você não precisa se preocupar explicitamente com isso.
Se você configurar o Roteador Angular para cuidar de tudo isso, então o roteador
cuidará automaticamente de fornecer a você a navegação entre esses componentes
, como veremos no exercício que segue esta palestra em particular.
Agora, antes de prosseguir para o exercício onde vamos aprender mais sobre
o roteador angular, deixe-me rapidamente chamar sua atenção para alguns termos
dentro do Roteador Angular que você encontrará durante o exercício e
Eu gostaria que você prestasse especial atenção a esses termos,
porque eles são cruciais para entender como o Roteador Angular realmente funciona.
Então você veria primeiro que quando projetamos o Roteador Angular,
estaremos tomando a ajuda do módulo de roteador que
faz parte da biblioteca de roteador de barra angular.
Então, vamos importar o módulo do roteador para ou aplicativo angular
para o módulo do aplicativo e, em seguida, também estaremos importando as rotas.
Assim, as rotas nos permitem definir as várias rotas que nosso aplicativo
Angular faz uso ou o Roteador Angular faz uso.
Então, nesse caso, estaríamos especificando as rotas na forma de um caminho e
o componente correspondente.
Então, como você viu no slide anterior, você viu que cada uma dessas extensões de URL
estava sendo mapeada para a exibição de um componente específico.
Então, esse tipo de informação é fornecida para que Angular Router
através de rotas e essas rotas são todas especificadas usando
um objeto JavaScript como este caminho com duas propriedades.
Caminho e componente e algumas propriedades adicionais que não vamos
encontrar agora, mas veremos em alguns dos exercícios posteriores.
Além disso, a segunda pergunta que você gostaria de saber é onde essa exibição seria
renderizada em seu aplicativo Angular?
Este é o lugar onde dentro do nosso modelo do nosso componente aplicativo,
vamos incluir uma diretiva chamada como o RouterOutlet que é especificado como você
ver como e.
Isso será incluído no arquivo de modelo de componente do aplicativo,
agora, em seguida, seu Roteador Angular navega para
as diferentes visualizações dos diferentes componentes.
A exibição correspondente do componente será incluída na exibição de aplicativos
sempre que você especificar essa saída de roteador específica.
Então, cuidado com isso no exercício que se segue.
Além disso, para acionar a navegação, você veria que
com muitas das tags a que são usadas dentro do aplicativo.
Assim, por exemplo, eu incluiria uma configuração de tags com o botão MD
componente material angular na barra de ferramentas,
no componente de cabeçalho da nossa aplicação Angular.
Eu associaria as tags a com outra diretiva,
uma diretiva de atributo chamada RouterLink.
O RouterLink é uma diretiva real que o módulo do roteador fornece para nós.
Este link de roteador nos permite especificar o caminho como, por exemplo,
códigos escritos, eu posso ver um “/menu”.
Você pode ter mais detalhes do que isso para o RouterLink.
Mas para o exercício, vamos começar com um exemplo simples onde teríamos,
por exemplo, /menu barra home barra entre em contato conosco e assim
em especificado usando o atributo RouterLink direto.
Então, quando você clica em um link como este em sua barra de ferramentas,
então que irá acionar o Roteador Angular para causar uma alteração ou
uma navegação para uma determinada visão que é suportada pelo módulo Roteador Angular.
Assim, o mapeamento entre este link e os componentes correspondentes
já está especificado na rota que damos à nossa aplicação Angular.
Então, cuidado com todas essas coisas enquanto você faz o exercício.
Vou explicar algumas dessas coisas e a razão para
fazê-las enquanto estamos fazendo os passos do exercício que segue esta lição.
[MÚSICA]