Руководство для начинающих для настройки ионного проекта правильный путь

Автор оригинала: Jad Salhani.

Вступление

Ionic – это кроссплатформенная каркас развития мобильных приложений, построенная на вершине Angularjs.

Рамка предоставляет компоненты и инструменты, которые позволяют создавать кроссплатформенные приложения, которые будут выглядеть и чувствовать себя очень похожи на нативные приложения.

Убежденный? Давайте начнем.

Настройка среды

Перед началом, пожалуйста, убедитесь, что у вас есть стабильное подключение к Интернету, поэтому узел устанавливает все необходимые модули.

Во-первых, создайте каталог, чтобы загрузить исходный код приложения, затем запустить:

• NPM установить -G ионные
• NPM установить -G Cordova

Это установит Ionic и Cordova CLI глобально в вашей системе. Нам нужна Кордова, потому что Ionic CLI построен на вершине Cordova.

Следующий,

• CD в вашу папку
• Ionic Start Testapp Blank

Последний аргумент, используемый в приведенной выше команде, является шаблон приложения, который мы хотим использовать; Он варьируется от приложения с вкладками, один с боковым меню, даже один с геолокацией (Google Maps).

После завершения команды запуска и создана папка, CD в ваш Testapp папка и запустить NPM установить Отказ Это установит все узловые модули, указанные в Package.json (Подробнее об этом позже)

Исследуя структуру проекта

Когда ты CD TestApp , вы увидите много новых папок, с которыми вы могли бы не быть знакомы. Давайте сделаем быстрый протягивание того, что каждый для:

• Readme.md : Простой файл readme, используемый кодовой базой
• config.xml : Cordova Config файл, который указывает имя приложения, версию и предпочтения. (См. config )
• крючки : Папка Cordova крючки, которая позволяет вам выполнить код JavaScript во время нескольких фаз построения вашего приложения (См. крючки )
• платформы : Папка платформы, которая удерживает нативную добавленную платформу файлы проекта (Android или iOS). (См. платформы )
• плагины : Папка сгенерирована и используется Cordova для хранения установленных плагинов. (См. плагины )
• Bower.json : Файл, используемый менеджером Package Bower, который содержит ссылку на наши установленные пакеты и где мы можем добавить пакеты в наше приложение. (См. Bower )
• Gulpfile.js : Файл конфигурации задач, используемый заглажителем Gupp; Здесь вы можете определить такие задачи, как копирование JS в другую папку, минияцию CSS и JS и многое другое. (См. Gulp )
• Package.json : Файл определения, используемый NPM (другой менеджер пакета), где мы определяем пакеты для установки и могут указывать сценарии для запуска. (См. Узел )
• www : Папка, где все HTML, JavaScript и CSS вашего приложения хранятся и RAN. (Сгенерировано Ionic App Starter)
• SCSS : Папка, где хранятся файлы SASS, которые компилируются во время выполнения. (См. Sass )

Чтобы проверить, что все работает нормально, бегите Ионическая подача В вашем CLI, и он должен открыть новую вкладку/окно браузера с URL http://localhost: 8100 Отказ Этот URL является URL-адресом сервера по умолчанию и порт, который Ionic использует для запуска своего сервера приложений.

Проект территории

Теперь, когда у нас есть основанные основы, давайте изменим пару вещей, чтобы сделать проект и его структуру более дружелюбны.

Изменение структуры папки

Проект Ionic Starter предоставляет основы для разработки любого типа приложения. Тем не менее, любой разработчик, который стоит его соль знает, что структура проекта является одним из важнейших строительных блоков развития проекта.

Папка по структуре функции

Угловой проект может иметь много разных структур папок, наиболее рекомендуемый – это Папка по функциям

Эта структура состоит из создания папки для каждой главной «функции» нашего приложения. Например, если хотите создать страницу входа в систему, мы создадим папку Вход и внутри мы создадим наше login.html , login.controller.js и login.scsss Отказ

Мы будем адаптировать эту структуру папки во всем руководстве, если вы предпочитаете пробовать другую структуру, не стесняйтесь экспериментировать с Структуры папок Angularjs Отказ

Начнем с одной страницы входа в систему, поэтому давайте создадим файлы для этого:

• CD TestApp
• MKDIR приложение
• CD приложение/
• mkdir login.
• CD Логин
• Нажмите Login.html login.controller.js login.scssss

Нам нужно переместить index.html от www/ Папка к нашему приложение Папка и очистить папки проекта, Итак, давайте сделаем следующее;

• Скопировать index.html к приложение/ папка.
• Создать main.js в приложение/ Чтобы определить угловой главный модуль и его зависимость (подмодуль).
• Удалить lib папка внутри www/.
• Удалить .bowerrc Это определило путь загрузки для файлов Bower. (См. Конфигурация Bower )
• Беги Bower Установите Чтобы установить ионные все свои «зависимости».
• Makekir Temp Чтобы держать файлы поставщиков и внутри этого MKDIR JS и MKDIR CSS.

Задача бегуна и настройка

Глоток

Основной кусок, который отсутствует ионный стартовый проект, это Гульп задачи. Для удобства этого учебника я уже подготовил Gulpfile.js Это содержит все задачи, нам нужно будет чистить и оптимизировать код.

Посетите это Гист и скопируйте содержимое Gulpfile.js Внутри того, у вас есть в вашем проекте, заменяя любой код там.

Прежде чем мы сможем начать использовать GulpFile, нам нужно установить несколько новых зависимостей, используемых для объединения, оптимизации и минимизации нашего кода, а также исправить некоторые пути к файлам с начальными ионами.

Во-первых, в вашем терминале выполните следующие действия:

• NPM установить --save-dev Gulp-Ulify
• NPM установить --save-dev main-bower-файлы

Во-вторых, открыть Bower.json Файл с тем же текстовым редактором и изменением DevDependonds к зависимости Отказ Это важный шаг для выполнения, потому что библиотека Gulp, которая объединяет файлы Bower, работает на библиотеках, объявленных как зависимости Отказ

Последние штрихи

Открыть SCSS/Ionic.app.scsss С вашим любимым текстовым редактором и замените путь и импортировать путь к итоге со следующими:

// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "bower_components/ionic/fonts" !default;
//Include all of Ionic
@import 'bower_components/ionic/scss/ionic';

Наконец, убедитесь, что ваш Приложение/index.html Файл и App/main.js Файл выглядит как те, которые в Гист Отказ

Заключение

Теперь мы настроили все, что нам нужно иметь приличную структуру проекта Хорошая автоматизация сборки, мы, наконец, можем запустить часы глотания и Ионическая подача От нашего терминала (в этом порядке) и увидеть волшебство!

Вкладка «Окна/вкладка» будет открыта с помощью стержней заголовка, содержащей «Iонный пустой стартер» отсюда, вы можете начать строить свое приложение и погрузиться в славную царство развития Ionic и Angularjs!