69 lines
2.3 KiB
Markdown
69 lines
2.3 KiB
Markdown
|
---
|
|||
|
|
title: Hello World In Ionic
|
|||
|
|
localeTitle: Hello World In Ionic
|
|||
|
|
---
|
|||
|
|
# Hello World in Ionic !!
|
|||
|
|
|
|||
|
|
### Это редакторская статья, которая пройдет через вас для создания простой программы Hello World в Ionic.
|
|||
|
|
|
|||
|
|
### меры
|
|||
|
|
|
|||
|
|
#### 1\. Установите `ionic` , `npm` , `angular` и `cordova` если он не установлен. \[См. [Первое](https://guide.freecodecamp.org/ionic) введение для получения дополнительной информации\]
|
|||
|
|
|
|||
|
|
```shell
|
|||
|
|
sudo apt-get install nodejs
|
|||
|
|
sudo apt-get install npm
|
|||
|
|
sudo npm install -g ionic cordova
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 2\. Создайте папку с именем `helloworld`
|
|||
|
|
|
|||
|
|
```shell
|
|||
|
|
ionic start helloworld blank
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Заметка: Поскольку это небольшой проект, введите No или N, когда будет предложено во время выполнения программы.
|
|||
|
|
|
|||
|
|
#### 3\. Измените каталог на `helloworld` \[это ваш ионный каталог\]
|
|||
|
|
|
|||
|
|
```shell
|
|||
|
|
cd helloworld
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 4\. Откройте папку в текстовом редакторе. вы увидите различные файлы и подпапку.
|
|||
|
|
|
|||
|
|
Не паникуйте, эти файлы генерируются автоматически с помощью npm для вас. Просто перейдите на `page` `src` -> `page` -> `home` -> `home.html` .
|
|||
|
|
|
|||
|
|
#### 5\. Основной формат файла
|
|||
|
|
```
|
|||
|
|
`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\. Удалите шаблон и добавьте синтаксис html, как показано на изображении.
|
|||
|
|
|
|||
|
|
```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. Save the code and run
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
оболочка ионная подача \`\` \`
|
|||
|
|
|
|||
|
|
#### 8\. Чтобы увидеть, как работает ваш код, перейдите в браузер и откройте localhost: 8100 в URL-адресе.
|