Angular Basics: Uma vez que juntar roteamento

Ir de uma página para outra é uma tarefa bastante fundamental para um webapp. Felizmente, o Angular tem um magnífico suporte para roteamento.

Se você estiver criando um aplicativo Angular com várias páginas, precisará usar o roteamento para velejar entre elas. Você pode fazer isso criando uma lista de rotas com um caminho para cada página no módulo de roteamento.

Você pode logo rotear para outras páginas dentro de um registro HTML usando uma marca de âncora. Você também pode rotear para outras páginas dentro de um registro TypeScript, usando o método router.navigate().

Uma vez que gerar uma novidade página em um aplicativo angular

Primeiro, crie um novo aplicativo Angular. Você também pode usar um já existente. Se você não estiver familiarizado com a geração de um novo aplicativo Angular, poderá aprender sobre ele junto com outros conceitos introdutórios usados ​​no Angular.

1. Crie um novo componente em seu aplicativo Angular usando o ng gerar componente comando:

   ng generate component home

2. Abra o src/app/home/home.component.html registro e substitua o texto atual pelo novo texto.

   <div class="content">
   <h2> Home </h2>
   <p>
   I am a photographer that does wedding photography. Check out my projects!
   </p>
   <div class="card">
   <h4> John & Amy </h4>
   <p> Blue Mountains, Australia </p>
   </div>
   <div class="card">
   <h4> Ross & Rach </h4>
   <p> Hunter Valley Gardens, Australia </p>
   </div>
   </div>

3. Preencha o src/app/home/home.component.css registro com estilo para o texto HTML.

   .content {
   line-height: 2rem;
   font-size: 1.2em;
   }
   .card {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   width: 400px;
   padding: 16px;
   margin: 24px 0px;
   background-color: whitesmoke;
   font-family: sans-serif;
   }

4. Crie outro componente usando o ng gerar componente comando no terminal. Você usará o novo componente uma vez que uma página sobre.

   ng generate component about

5. Abra o src/app/about/about.component.html registro e substitua o texto atual pelo novo texto.

   <div class="content">
   <h2> About Me </h2>
   <p>
   I'm John, and I love taking photos. I have been taking photos for over 25 years. Visit me on my social media:
   </p>
   <a href=""> Facebook </a> <br>
   <a href=""> LinkedIn </a> <br>
   <a href=""> Instagram </a> <br>
   </div>
   

6. Preencha o src/app/about/about.component.css registro com estilo para o texto HTML.

   .content {
   line-height: 2rem;
   font-size: 1.2em;
   }
   

Uma vez que velejar entre as duas páginas

Você pode usar o roteamento para velejar de uma página para outra. Você pode configurar isso em um registro de roteamento. Oriente exemplo terá um registro de roteamento para todo o aplicativo, localizado em src/app/app-routing.module.ts.

1. Se seu aplicativo ainda não tiver o registro de módulo de roteamento de aplicativo, você poderá gerar um usando o ng gerar módulo comando. Em uma traço de comando ou terminal, navegue até a pasta raiz do aplicativo e execute o seguinte comando:

   ng generate module app-routing --module app --flat

2. Isso criará um registro app-routing.module.ts em seu src/aplicativo pasta.

3. Na segmento superior do registro, adicione importações adicionais para os componentes Home e About. Certifique-se de importar também RouterModule e CommonModule; em última estudo, suas instruções de importação devem se parecer com:

   import { CommonModule } from '@angular/common';
   import { Routes, RouterModule } from '@angular/router';
   import { HomeComponent } from './home/home.component';
   import { AboutComponent } from './about/about.component'; 

4. Subordinado das importações, adicione uma novidade matriz de rotas para armazenar os caminhos que você usará ao rotear para cada página.

   const routes: Routes = [
   { path: '', component: HomeComponent },
   { path: 'about', component: AboutComponent }
   ];

5. Substitua o conjunto NgModule pelo seguinte, que adiciona o RouterModule à matriz de importações e exportações.

   @NgModule({
   declarations: [],
   imports: [
   CommonModule,
   RouterModule.forRoot(routes)
   ],
   exports: [RouterModule]
   })

6. No src/app/app.component.html registro, remova o texto atual e adicione a etiqueta de saída do roteador.

   <div class="container">
   <router-outlet></router-outlet>
   </div>
   

Uma vez que velejar para a novidade página em um registro HTML

Para velejar para uma página dentro de um registro HTML, use a marca âncora. No atributo href, adicione o caminho que você especificou na matriz de rotas.

1. No src/app/app.component.html registro, adicione duas tags âncora antes da div do contêiner. Isso permitirá que você navegue entre as páginas Home e About.

   <div class="navbar">
   <a class="link" href="">Home</a>
   <a class="link" href="/about">About</a>
   </div>
   

2. Adicione um pouco de estilo ao src/app/app.component.css Registo.

   .container {
   margin: 48px 35%;
   font-family: "Arial", sans-serif;
   display: flex;
   flex-direction: column;
   align-items: center;
   }
   .navbar {
   background-color: darkslategray;
   padding: 30px 50px;
   display: flex;
   align-items: center;
   font-family: sans-serif;
   }
   .link:first-of-type {
   margin-right: 32px;
   }
   .link {
   color: white;
   text-decoration: none;
   font-size: 14pt;
   font-weight: bold;
   }
   

3. Adicione qualquer estilo à margem universal da página em src/styles.css.

   body {
   margin: 0;
   padding: 0;
   }

4. Em um prompt de comando ou terminal, navegue até a pasta raiz do aplicativo Angular. Execute o aplicativo usando o ng servir comando e espere que ele termine de compilar.

   ng serve

5. Em um navegador, digite o localhost URL na barra de URL para visualizar seu aplicativo. Por padrão, geralmente é http://localhost:4200/.
6. Seu site será repleto na página inicial.

7. Você pode velejar para a página Sobre clicando no link Sobre na barra de navegação.

Uma vez que velejar para a novidade página em um registro TypeScript

Até agora, esta mostra usa links HTML padrão para fornecer navegação. Para velejar usando o registro TypeScript em vez do registro HTML, você pode usar roteador.velejar().

1. No src/app/app.component.html registro, remova as tags de âncora e substitua-as por tags de botão. Esses botões terão um evento click que aciona uma função chamada clickButton(). Ao invocar a função clickButton(), adicione o caminho da rota de URL uma vez que um argumento.

   <button class="link" (click)="clickButton('')">Home</button>
   <button class="link" (click)="clickButton('/about')">About</button>
   

2. Adicione qualquer estilo aos botões no src/app/app.component.css Registo.

   button {
   background-color: black;
   padding: 4px 8px;
   cursor: pointer;
   }

3. No topo do src/app/app.component.ts registro, importe o roteador.

   import { Router } from '@angular/router'; 

4. Adicione um novo construtor dentro da classe AppComponent e injete o roteador dentro dos parâmetros.

   constructor(private router: Router) {
   }

5. Subordinado do construtor, crie uma novidade função chamada clickButton(), que navegará para a novidade página com base na URL que você passar.

   clickButton(path: string) {
   this.router.navigate([path]);
   } 

   ​​​​​​

6. Execute novamente o comando ng serve no prompt de comando ou no terminal.

   ng serve

7. Navegue até seu site em um navegador. O href agora é substituído por dois botões.

8. Clique no Sobre botão. Ele será direcionado para a página Sobre.

Criando várias páginas em um aplicativo angular

Você pode rotear entre várias páginas em um aplicativo Angular usando roteamento. Se você tiver componentes separados para cada página, poderá configurar caminhos para suas rotas no módulo de roteamento.

Para velejar para outra página por meio de um registro HTML, use uma marca âncora com o atributo href uma vez que o caminho de roteamento para essa página. Para velejar para outra página por meio de um registro TypeScript, você pode usar o método router.navigate().

Se você estiver criando um aplicativo Angular, poderá utilizar as diretivas Angular. Eles permitem que você use instruções if dinâmicas, loops for ou outras operações lógicas dentro do registro HTML de um componente.