Установка Ionic

В примерах на этом сайте используется ionic v1.3.2, а используемый адрес CDN-библиотеки:

<link href="https://cdn.staticfile.org/ionic/1.3.2/css/ionic.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/ionic/1.3.2/js/ionic.bundle.min.js"></script>

Адрес загрузки последней версии ionic:http://ionicframework.com/docs/overview/#download。

После загрузки и распаковки архива он содержит следующие каталоги:

css/               =>     样式文件
fonts/             =>     字体文件
js/                =>     Javascript文件
version.json       =>     版本更新说明

Вы также можете скачать следующие файлы ресурсов на Github:https://github.com/driftyco/ionic(в каталоге release).

Далее нам нужно только включить файлы css/ionic.min.css и js/ionic.bundle.min.js из вышеуказанных каталогов в проект, чтобы создать приложение Ionic.

Этот учебник посвящен применению фреймворка Ionic. Большинство примеров работают в браузере. Работу на мобильных устройствах можно подробно изучить в следующем руководстве по установке из командной строки.

Примечание:В мобильных приложениях, таких как PhoneGap, нам просто нужно добавить соответствующие файлы js и css в библиотеку ресурсов.

---

Установка из командной строки

Сначала вам нужно установитьNode.js, его инструмент NPM понадобится нам при дальнейшей установке. Для более подробного знакомства с NPM вы можете обратиться к нашемуВведению в использование NPM。

Затем с помощьюинструмента командной строкиустановите последнюю версию cordova и ionic. Обратившись кAndroidиiOSофициальной документации для установки.

В Windows и Linux откройте инструмент командной строки и выполните следующие команды:

$ npm install -g cordova ionic

В системах Mac используйте следующие команды:

sudo npm install -g cordova ionic

Совет: iOS необходимо устанавливать и использовать в среде Mac OS X и Xcode.

Если вы уже установили вышеуказанное окружение, можете выполнить следующие команды для обновления версии:

npm update -g cordova ionic

или

sudo npm update -g cordova ionic

Создание приложения

Используйте готовые шаблоны приложений, предоставленные официальными разработчиками Ionic, или пустой проект для создания приложения Ionic:

$ ionic start myApp tabs

Запустите проект Ionic, который мы только что создали

Используйте инструмент ionic для создания, тестирования и запуска ваших приложений (или создавайте напрямую через Cordova).

Создайте приложение для Android

$ cd myApp
$ ionic cordova platform add android
$ ionic cordova build android
$ ionic cordova emulate android

Если всё пройдёт хорошо, появится эмулятор, интерфейс будет таким:

Создайте приложение для iOS

$ cd myApp
$ ionic cordova platform add ios
$ ionic cordova build ios
$ ionic cordova emulate ios

Если возникнет ошибка "ios-sim was not found.", можно выполнить следующие команды:

npm install -g ios-sim

Если всё пройдёт хорошо, появится эмулятор, интерфейс будет таким:

---

Ionic Lab

Ionic Lab больше не обновляется.

Ionic Lab — это настольная среда разработки. Если вам не нравится использовать командную строку, Ionic Lab удовлетворит ваши потребности.

Ionic Lab предоставляет разработчикам более простой способ запускать, компилировать, выполнять и эмулировать приложения Ionic.

Ionic Lab поддерживает платформы: Windows, Mac OS X, Linux. Адрес для загрузки:http://lab.ionic.io/, после загрузки просто установите его. Весь интерфейс работы выглядит следующим образом:

С помощью вышеуказанного интерфейса вы можете выполнить следующие операции:

• Создать приложение
• Предпросмотр приложения
• Компилировать приложение
• Запустить приложение
• Загрузить приложение
• Просмотреть журналы запуска
……

Рекомендуется использовать Sublime Text в качестве редактора для проектов Ionic. Мы можем напрямую открыть проект в Sublime Text через Ionic Lab, как показано ниже:

Демонстрация работы с GIF

Другие расширения