Ionic 3: Criando um projeto do zero com rotas


Ionic 3: Criando um projeto do zero com rotas

Veja nesse artigo como criar um novo projeto utilizando o Ionic Cli

Esse será o primeiro artigo da minha serie sobre Aprendendo Ionic do Zero, caso tenha interesse em aprender como criar um app do zero e subir nas principais lojas, eu irei demonstrar esses passos.

Criação do projeto

O primeiro passo será a criação de um novo projeto. Para isso, execute o comando abaixo no seu terminal:

ionic start navigationApp blank -ts

A execução do comando acima irá criar um projeto com o nome navigationApp, execute o comando cd navigationApp para que você possa navegar pela estrutura criada para esse projeto.

Para os próximos passos será necessário um editor de textos, para quem acompanha os meus artigos sabe da minha preferência pelo VS Code, mas todos os exemplos demonstrados aqui e nos outros artigos, podem ser seguidos utilizando outros editores de textos.

Com o projeto aberto no seu editor de textos, vamos navegar pela estrutura para conhecer ele um pouco melhor.

estrutura do projeto

Basicamente todo desenvolvimento do projeto fica concentrado no diretório src. Nesse diretório você tem:

  • providers: funciona como os services do Angular, você pode utilizar ele para requisições HTTP, serviço de mensagens … etc
  • pages: as páginas do seu projeto, mesmo um app simples pode conter mais de uma página
  • modules: o seu app pode ter mais de um modulo, esse modulo pode ter uma ou mais páginas. Nós próximos artigos eu irei demonstrar melhor como se trabalhar com mais de um module no projeto
  • assets: arquivos .css, .js e images que você queira adicionar e deixar genérico no projeto

Agora para testar o projeto, execute o comando ionic serve -l no seu terminal, note que ele irá abrir o seguinte endereço no seu navegador: http://localhost:8100/.

Abaixo você tem uma imagem demonstrando esse passo:

ionic serve -l

O comando anterior abriu no seu navegador o projeto com as duas plataformas mais utilizadas no mercado: o Android e o IOS. Caso você tenha interesse em testar o Windows Phone, basta ir no select-box que está no canto superior direito em plataforms e selecionar ele.

Criação de um nova página

Agora que você já sabe o básico sobre o scaffold do projeto, vamos criar uma nova página. Para isso, execute o comando abaixo no seu terminal:

ionic g page sobre

O comando acima irá criar um novo diretório no seu projeto dentro de pages.

nova página

Agora para navegar entre a nossas páginas home e sobre, será necessário importar AboutPage dentro do arquivo home.ts. Para isso, siga os passos abaixo:

Atualize o seu arquivo home.ts com o trecho de código abaixo:

Passando rapidamente pelo código acima você pode observar que eu importei a página SobrePage na linha 3, em seguida e passei ela para variável sobrePage na linha 11.

Agora adicione um novo botão no seu arquivo home.html

<button ion-button  [navPush]="sobrePage">Sobre</button>

Antes de testar o passo anterior, adicione a linha abaixo no seu arquivo sobre.html dentro de ion-content:

<h1>Página sobre</h1>

Agora execute o comando ionic serve -l no seu terminal novamente. Abaixo você tem uma imagem demonstrando esse passo:

routas ionic 3

Com isso nós finalizamos esse primeiro artigo, a ideia aqui foi criar um novo projeto e navegar pela estrutura básica. Nós próximos artigos eu irei evoluir ele. Caso tenha interesse em baixar o código desenvolvido nesse artigo, segue o seu link no GitHub: Ionic-Introduction.

Compartilhe:

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn

Table of Contents

Postagens Relacionadas

Maze Runner – Correr ou Morrer

Maze Runner – Correr ou Morrer O filme mostra o jovem Thomas (Dylan O’Brien), que vai parar em um lugar desconhecido, sem memória que o
TheWildsVidasSelvagens

the wilds: vidas selvagens

The Wilds: Vidas Selvagens The Wilds: Vidas Selvagens é uma série dramática de TV americana criada por Sarah Streicher que foi lançada no Prime Video
RockBottomRiser

Rock Bottom Riser

Rock Bottom Riser 01/03/2021(US) – Documentário – 1h 10min –   Nota: 0/10   Sinopse     Elenco Nainoa Thompson Como – master navigator Moses
SaferatHome

Safer at Home

Safer at Home 26/02/2021(US) – Filmes – 0h 0min –   Nota: 0/10   Sinopse     Elenco Mais informações Título Original Safer at Home