https://github.com/reislcb/approute-top
Repositório destinado a ensinar e disponibilizar soluções para projetos ionic ao 3º ano de informática para auxiliar nas disciplinas de Tópicos em programação e do Projeto Integrador.
https://github.com/reislcb/approute-top
angular app application html5 ifsp informatica instituto-fede ionic ionic-framework javascript typescript web-app
Last synced: about 1 month ago
JSON representation
Repositório destinado a ensinar e disponibilizar soluções para projetos ionic ao 3º ano de informática para auxiliar nas disciplinas de Tópicos em programação e do Projeto Integrador.
- Host: GitHub
- URL: https://github.com/reislcb/approute-top
- Owner: ReisLcb
- Created: 2025-03-06T15:11:05.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-20T15:31:39.000Z (about 1 year ago)
- Last Synced: 2025-03-20T16:37:06.933Z (about 1 year ago)
- Topics: angular, app, application, html5, ifsp, informatica, instituto-fede, ionic, ionic-framework, javascript, typescript, web-app
- Language: TypeScript
- Homepage:
- Size: 261 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Clonando repósitório em sua máquina
- Para clonar este repositório em sua máquina, utilize o seguinte comando:
```bash
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:
```bash
git clone -b https://github.com/ReisLcb/appRoute-TOP.git
## pode ser substituido por 'exercicio-cadastro'
```
- Para instalar as dependências, basta executar no terminal dentro da pasta local do projeto:
```bash
npm install
- Ao final da instalação, execute o projeto:
```bash
ionic serve
```
# Criando projeto Ionic
## Iniciando projeto
- Primeiro, devemos verificar se o ionic CLI está instalado verificando sua versão:
```bash
ionic -v
## Ultima versão: 8.4.x
- Caso não esteja instalado, instale o ionic CLI com o seguinte comando:
```bash
sudo npm install -g @ionic/cli
- Para iniciar, iniciaremos o nosso terminal (pode ser **Linux**, **PowerShell** ou **WSL**):
```bash
ionic start nome-do-seu-projeto
```
- Para uma inicialização mais rápida, podemos preencher todos os argumentos com o seguinte comando:
```bash
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=, --cordova, --capacitor e --id=
```
- Como usaremos o angular standalone, podemos escrever:
```bash
ionic start meuApp blank --type=angular-standalone
## Considerando que nosso projeto será Blank
```
- Navegue até a pasta do projeto:
```bash
cd nome-do-seu-projeto
- Para executar seu projeto, execute:
```bash
ionic serve
- E para abrir seu projeto no Visual Studio Code, execute:
```bash
code .
# Definindo novas páginas e rotas
- Para definir uma nova página, basta executar:
```bash
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:
```Bash
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](https://ionicframework.com/docs/cli)__**