16 ИЮНЯ 2015 Г.
Многое происходит вокруг Ionic Framework. Ionic — это инфраструктура пользовательского интерфейса, в которой очень легко настроить и создать собственный пользовательский интерфейс для создания мобильного приложения. Создание пользовательского интерфейса недостаточно, когда нам нужно читать и записывать динамические данные из и в базу данных соответственно.
Ionic не поставляется с какой-либо серверной структурой, но имеет возможность передавать данные из пользовательского интерфейса непосредственно в базу данных при использовании с любыми адаптерами js, такими как firebase. Это нарушает шаблон проектирования MVC. Для реализации нам нужен фреймворк на стороне сервера, который может маршрутизировать запрос с помощью контроллера и хранить данные с помощью модели.
Сегодня существуют различные серверные фреймворки, такие как expressjs, hapi.js, которые работают на Nodejs. Поэтому одним из моих любопытств было заставить Ionic работать с expressjs, чтобы предоставить окончательное решение для тех, кто хочет реализовать. Есть несколько предварительных требований, которые нужно выполнить, прежде чем я действительно дам вам идеи.
- Установите базу данных mongoDB (необязательно, если вы хотите сохранить ее).
- Создайте документ в mongoDB для хранения списка дел (необязательно, если вы хотите сохранить его).
- Установить Ионик
- npm установить экспресс – сохранить
- npm установить мангуст – сохранить
- npm установить тело-парсер – сохранить
Из вышеизложенного body-parser — это промежуточное программное обеспечение, входящее в состав экспресс, которое анализирует json из объекта запрос, отправленного в экспресс. См. документ Начало работы. установить и создать пример приложения. Перейдите по этой ссылке для быстрой установки и инициализации. Когда ionic и express работают независимо друг от друга, вы заметите, что они подключены к двум разным портам и открыты для связи. Это явно означает, что нам нужно что-то, что позволит им взаимодействовать между разными портами.
Поскольку Ionic использует angularjs (очень популярный javascript-фреймворк MVC), он поставляется с модулем под названием ngResource. Модуль ngResource обеспечивает поддержку взаимодействия со службами RESTful через службу $resource. Итак, продолжайте и добавьте свой ngResource в файл Ionic app.js.
angular.module(‘IonicTodo’,[‘ionic’,’todo.controller’,’todo.services’,’ngResource’])Теперь «ngResource» доступен как «$ ресурс» в угловом контроллере и службах. «$resource» — это фабрика, которая создает объект ресурса, который позволяет вам взаимодействовать с источниками данных RESTful на стороне сервера.
Итак, введите ‘$resource’ в контроллер как:
.controller(‘UITodoController’, [‘$scope’, ‘$rootScope’, ‘$window’,‘UITodoServices’, ‘$resource’, function ($scope, $rootScope, $window, UITodoServices, $resource){
…
}}Вставьте ‘$resource’ в сервисы как:
.factory (‘UITodoServices’, function($resource, $q){ })Возвращенный объект $resource имеет методы действия, которые обеспечивают высокоуровневое поведение без необходимости взаимодействия с низкоуровневым сервисным объектом $http. Наконец, все готово для получения ссылки на модель, которую вы создали в экспрессе. Вот как это сделать.
var baseURL = ‘http://localhost:3000/';
var todo = $resource(baseURL + ‘api/todos’);Теперь используйте объект todo для запроса, сохранения или обновления таблицы базы данных. Вы можете скачать полное приложение с GitHub здесь.
