69 lines
1.7 KiB
Markdown
69 lines
1.7 KiB
Markdown
---
|
|
title: Hello World In Ionic
|
|
localeTitle: Olá Mundo em Ionic
|
|
---
|
|
# Olá Mundo no Ionic !!
|
|
|
|
### Este é o editorial que vai passar por você para fazer um programa Hello World simulado no Ionic.
|
|
|
|
### Passos
|
|
|
|
#### 1\. Instale `ionic` , `npm` , `angular` e `cordova` se não for instalado \[Veja a [primeira](https://guide.freecodecamp.org/ionic) introdução para mais informações\]
|
|
|
|
```shell
|
|
sudo apt-get install nodejs
|
|
sudo apt-get install npm
|
|
sudo npm install -g ionic cordova
|
|
```
|
|
|
|
#### 2\. Crie uma pasta chamada `helloworld`
|
|
|
|
```shell
|
|
ionic start helloworld blank
|
|
```
|
|
|
|
Nota: Como este é um projeto pequeno, insira Não ou N quando solicitado durante a execução do programa.
|
|
|
|
#### 3\. Mude o diretório para `helloworld` \[este é o seu diretório iônico\]
|
|
|
|
```shell
|
|
cd helloworld
|
|
```
|
|
|
|
#### 4\. Abra a pasta no seu editor de texto. você verá vários arquivos e subpastas.
|
|
|
|
Não entre em pânico, esses arquivos são gerados automaticamente pelo npm para você. Basta ir para `src` -> `page` -> `home` -> `home.html` .
|
|
|
|
#### 5\. Formato Básico de Arquivo
|
|
```
|
|
`home.html` is the html page where you can write html syntax.<br/>
|
|
|
|
`home.scss` is the css page to write css syntax.<br/>
|
|
|
|
`home.ts` is the typescript page to write typescript code.
|
|
```
|
|
|
|
#### 6\. Exclua o modelo e adicione a sintaxe html conforme mostrado na imagem.
|
|
|
|
```html
|
|
|
|
<ion-header>
|
|
<ion-navbar>
|
|
<ion-title>
|
|
Ionic Project
|
|
</ion-title>
|
|
</ion-navbar>
|
|
</ion-header>
|
|
|
|
<ion-content padding>
|
|
<h2>Hello World </h2>
|
|
</ion-content>
|
|
```
|
|
|
|
|
|
#### 7. Salve o projeto e rode no terminal de sua preferência
|
|
```shell
|
|
$ ionic serve
|
|
```
|
|
#### 8\. Para ver o seu código em execução, acesse o navegador e abra o host local: 8100 no URL.
|