Páginas no Ionic
Fala galerinha, blz? Hoje vamos dar continuidade ao assunto e neste artigo entenderemos como as Páginas funcionam no Ionic com Angular. Partindo de um novo projeto igual o da aula passada, vamos entender como elas são criadas, como é a sua estrutura e vamos implementar um pequena lógica a partir deles.
Como vocês já sabem, o Ionic é um framework amplamente utilizado para o desenvolvimento de aplicativos, mas o que ainda não sabem é que uma das partes mais importantes de um projeto Ionic é como criamos e navegamos pelas páginas, pois elas são a parte lógica da aplicação.
Antes de mais nada, vocês precisam entender que como estamos usando o Angular no projeto, toda página será um componente Angular.
Criando página com o Ionic CLI
Primeiramente, em todos os projetos Ionic, usaremos a ferramenta Ionic CLI para criar componentes, páginas, serviços e etc. Com ela não precisamos nos preocupar com a estrutura dos arquivos gerados, pois ela adiciona o mesmo ao projeto já com um código inicial automaticamente.
Uma pagina pode ser criado de forma bastante simples, utilizando o comando ionic generate page <nome da pagina>.
Exemplo de uso:
O comando acima gerará uma nova página dentro da pasta “src/app” chamado “HomePage”, dentro de uma pasta chamada “home”. O resultado da execução desse comando é:
Observe que além de criar um novo diretório e os seis arquivos necessários para uma página, esse comando também atualiza o arquivo app-routing.module.ts, com o objetivo de incluir nele os dados necessárias para informar ao Ionic sobre essa nova página.
Essa nova pagina que foi criada será composta pelos arquivos “home.page.html”, “home.page.scss”, “home.page.ts”, “home.module.ts” e “home-routing.module.ts”, que contém a estrutura da página.
Como vocês irão ver, o Ionic CLI facilita muito na criação de novos elementos, sejam eles páginas, componentes, módulos, serviços e etc, pois além de criar os arquivos que o compõem, também registra o componente ou modulo a nível de projeto.
Como estamos usando o Angular no projeto, devemos seguir as mesmas regras, então toda página precisa ser registrada em módulo de rotas antes de ser utilizado. O Ionic CLI, ao criar a página, também configura a referência para ele no arquivo app-routing.modules.ts, conforme Código 1, de modo que não precisamos nos preocupar com esse passo.
No código acima vemos a referência a página dentro da variável routes. É nela que, a princípio, ficarão quase todas as rotas e referências da nossa aplicação.
Antes que me perguntem “O que é route?”, são rotas da nossa aplicação pelas quais vamos navegar para ir de uma página para outra.
Estrutura de uma Página
Como dito anteriormente, neste projeto, as páginas no Ionic são componentes Angular com mais um arquivo de controle de rotas. Esses componentes são classes escritas em Type Script que recebem o decorator @Component, assim como mostra no Código 2. Vamos analisar esse código juntos ao longo dessa seção, portanto não se preocupe em entendê-lo completamente agora. Atente-se apenas para o fato dele ser uma classe com um decorator, por enquanto.
Para analisarmos esse código precisamos pensar nele como um componente Angular, para isto vamos dividi-lo em duas partes:
- Metadata: são definições que iremos informar ao Angular que a nossa classe é um componente, por meio de decorators, nesse caso @Component
- Classe: assim como em qualquer linguagem de programação que utiliza o paradigma da orientação a objeto, possui suas propriedades e métodos
Um componente é um tipo de classe existente em uma aplicação Angular, eles são identificados com o decorator @Component. Neste decorator existem algumas propriedades mais utilizadas como: selector, templateUrl e style. Vamos especificá-las:
- selector é como identificamos o nosso componente. Para todo o componente existe um elemento único associado que permite que ele seja adicionado em um documento HTML. Nesse caso, o nome do elemento desse componente é “app-header” e deve ser escrito como <app-header></app-header>
- templateUrl é o nome do documento HTML que será a parte visual do componente. Nele podemos ter código em HTML juntamente com todos os bindings e diretivas necessários para a exibição do componente no navegador
- template também usado para descrever a parte visual do componente, porém nesse caso podemos fornecer código HTML “hard coded”, como texto
- styleUrl é onde informamos quais folhas de estilo contêm o código CSS que será aplicado ao template do componente.
Com isso podemos concluir que a estrutura de um componente Angular deve ser formada por esses três elementos, template (HTML), estilo (CSS) e classe (TypeScript). Essas partes são organizadas em arquivos separados e unidas nos metadados do componente através do decorator @Component.
Navegando entre páginas
Considerando que o Ionic já se encontra instalado no seu sistema operacional, iremos em um terminal, no caso do Windows o cmd e no caso do Linux e MacOS o terminal, para criar um projeto de exemplo com o nome “aula2”. Para isso usamos o comando ionic start representado no Terminal 3 para criação do projeto.
Durante a execução do comando, dependendo da versão do Ionic CLI instalada em seu computador, podem aparecer algumas perguntas relacionadas a criação do projeto, conforme a Figura 1 e Figura 2.
Para este projeto, não precisaremos utilizar o capacitor, que tem a ver com a utilização de recursos nativos do dispositivo no projeto. Portanto, na primeira pergunta informe N para o capacitor não ser instalado no projeto. Posteriormente você será questionado se deseja criar uma conta Ionic, mas isso é opcional e não influenciará em nada no nosso projeto. Para este caso informe N e prossiga com a instalação.
Durante o processo de criação do projeto será criada uma pasta chamada “aula2” no diretório atual com toda estrutura do projeto. No final da instalação irá aparecer uma mensagem dizendo que o seu aplicativo Ionic está pronto e dará uma sequencia de passos para fazer a aplicação funcionar no browser conforme a Figura 3.
Quando terminar, vamos seguir os passos recomendados e entrar na pasta criada para executarmos o comando no Terminal 4. Esse comando vai iniciar a aplicação na porta padrão, 8100.
Se ao digitar ionic serve não ocorrer nenhum erro, será aberta uma pagina no seu browser padrão no endereço “http://localhost:8100”, conforme é ilustrado na Figura 4.
No projeto que criamos já existe um componente criado por padrão, Figura 5.
Analisando a Figura 5 podemos identificar dentro da pasta chamada “app” o arquivo “app.component.ts”, criado automaticamente. Se o abrirmos veremos que a sua estrutura é igual a do Código 2, apenas um classe decorada.
Agora podemos usar o comando do Terminal 1 para criarmos uma página qualquer. Quando criamos um projeto Ionic por padrão ele já implementa uma página básica chamada “home”, Figura 5. É ela que é renderizada na tela quando demos o comando do Terminal 4, ilustrado na Figura 4.
Por esse motivo vamos criar outra página e navegar entre elas. Para não ficar muito repetitivo, vamos pular o que já sabemos e criar uma página com o nome “tela”. Agora, utilizaremos a página “tela” para navegar entre a página “home” e ela.
Após a criação da pagina “tela” o arquivo “app-routing.module.ts” é atualizado automaticamente conforme o Código 3.
Neste momento já podemos navegar entre as páginas, pois a rota para nossa pagina “tela” já esta feita, para testar se esta tudo bem, digite “http://localhost:8100/tela” em seu navegador para visualizarmos a pagina que criamos, Figura 6.
No Ionic existe pelo menos duas maneiras de se navegar pelas páginas. Uma delas é usando uma classe chamada Route, a outra é usando o binding [routerLink] na tag de um elemento.
Para facilitar o processo vamos usar binding, pois também é mais fácil de entender.
Para se usar o binding precisamos colocá-lo em uma tag que quisermos usar como link para a outra página. Vamos criar um botão na página “home” e usar o botão para navegar até a página “tela”, para isso, vamos alterar o arquivo “home.component.html”, conforme o Código 4.
Com isto nossa navegação já esta funcionando, mas ainda temos o problema de que quando entramos na página “tela” não temos como voltar para a página “home”. Para resolvermos isto, precisamos incluir a tag <ion-back-button> no arquivo “tela.componente.html”, conforme o Código 5.
Este é o resultado da adição deste código:
Agora temos um botão de voltar para a página “home”, e com isto criamos a navegação entre nossas páginas.
Conclusão
Neste artigo vimos como as páginas são criados, estruturados e como implementá-los em um projeto. Também vimos como podemos configurar uma navegação entre páginas e fazer um botão que faz o link dessa navegação.
Deixo como referência para vocês um outro artigo que eu fiz bem parecido com este, mas com foco em componentes, aconselho dar uma lida nele para entender como criar além das paginas, criar componentes também. link aqui.
