Clonando repósitório em sua máquina

• Para clonar este repositório em sua máquina, utilize o seguinte comando:

  cd pasta-desejada 
  git clone https://github.com/ReisLcb/appRoute-TOP.git

  • Caso queira clonar a resolução do exercício ou alguma outra branch específica, execute:

    git clone -b <branch-name> https://github.com/ReisLcb/appRoute-TOP.git
    ## <branch-name> pode ser substituido por 'exercicio-cadastro'

• Para instalar as dependências, basta executar no terminal dentro da pasta local do projeto:

  npm install
  

• Ao final da instalação, execute o projeto:

  ionic serve

Criando projeto Ionic

Iniciando projeto

• Primeiro, devemos verificar se o ionic CLI está instalado verificando sua versão:

  ionic -v 
  ## Ultima versão: 8.4.x

• Caso não esteja instalado, instale o ionic CLI com o seguinte comando:

  sudo npm install -g @ionic/cli
  

• Para iniciar, iniciaremos o nosso terminal (pode ser Linux, PowerShell ou WSL):

  ionic start nome-do-seu-projeto

  • Para uma inicialização mais rápida, podemos preencher todos os argumentos com o seguinte comando:

    ionic start [nome] [template] [opções]
    ## [nome] será o nome do projeto desejado (ex. meuApp)
    ## [template] pode ser: 'blank', 'tabs', 'sidemenu', 'list' ou 'my-first-app' (depende do framework)
    ## [opções] podem ser: --list, --type=<tipo>, --cordova, --capacitor e --id=<id>

  • Como usaremos o angular standalone, podemos escrever:

    ionic start meuApp blank --type=angular-standalone
    ## Considerando que nosso projeto será Blank

• Navegue até a pasta do projeto:

  cd nome-do-seu-projeto

• Para executar seu projeto, execute:

  ionic serve

• E para abrir seu projeto no Visual Studio Code, execute:

  code .

Definindo novas páginas e rotas

• Para definir uma nova página, basta executar:

  ionic generate
  ## Usar este comando sem argumentos te dará uma tela para escolher o que deseja gerar

  • Para usar esse comando de forma mais rápida, pode executar:

    ionic generate [schematic] [name]
    ## [schematic] pode ser: 'page', 'directive', 'component' ou 'service' 

  • Neste caso, no lugar de [schematic] escrevemos page, e para [name] escrevemos o nome da nossa nova página

Arquivo de rotas

Solução simples

• Caso a navegação seja entre páginas fixas, podemos usar:

  

Solução programática

• Se precisar de mais controle, como redirecionamento condicional, podemos utilizar o Router no arquivo .ts

  1°: importamos o Router para o nosso projeto.

  

  2°: Injetamos o Router na nossa página.

  

  3° criamos um método para nos enviar para a página desejada.

  4°: No arquivo .html de nossa página/componente, Chamamos nosso método abrirAbout() com a diretiva click

  
  
  \

Mais informações podem ser obtidas no site Ionic Framework