Статьи

PhoneGap Goodies для Angular — первая часть нашего праздничного подарка для вас

Февраль 24, 2018

В этот праздничный сезон мы хотели бы поделиться с вами некоторыми работами, которые мы проделали. Это первая часть серии из трех частей: приложения для кодирования с PhoneGap и AngularJS для кросс-платформенной разработки. Эти советы помогут вам избежать распространенных ошибок при разработке мобильных приложений. Мы расскажем о хорошем настроении в следующем посте с более подробными фрагментами кода (в том числе для директив, представлений и т. Д.) Для PhoneGap и Angular. Возвращайтесь в ближайшее время, чтобы не пропустить эти праздничные вкусности.

 PhoneGap

PhoneGap  — это хорошо известная инфраструктура для создания многоплатформенных мобильных приложений с использованием веб-технологий (HTML, JavaScript и CSS). Одностраничная архитектура (SPA) для приложения PhoneGap обладает значительными преимуществами, такими как упрощение поддержки глобального контекста. Асинхронные вызовы лучше обрабатываются с использованием такого глобального контекста. Поэтому переходы между переключениями экрана выполняются путем замены видов и, следовательно, выполняются намного быстрее.

AngularJS

AngularJS  — это клиентский MVC, ставший выдающейся средой для SPA. AngularJS обеспечивает двустороннюю привязку данных между представлениями и моделями, а также маршрутизацию представления с использованием ‘ngRoute’ . Вы можете легко анимировать действия приложения, такие как переходы просмотра, используя ‘ngAnimate’ .

PhoneGap с AngularJS

Объединение PhoneGap и AngularJS для мобильных приложений кажется естественным, особенно с учетом того, что AngularJS может улучшить взаимодействие с Angular Touch . Например, PhoneGap взаимодействует с возможностями мобильного устройства, такими как местоположение GPS, с помощью плагинов. ngCordova  представляет собой набор расширений AngularJS поверх API PhoneGap, которые облегчают создание приложений PhoneGap с AngularJS.

Архитектура

После объединения нескольких проектов была разработана общая структура приложения PhoneGap с использованием AngularJS и ngCordova.

Структура папок www:

    js
        app.js
        directives.js
        controllers.js
        services.js
        filters.js
    partials
        topbar.html
        bottombar.html
    sass
        style.scss
    css
        style.css
    img
       view1
           img11.png
           img12.png
           ...
       view2
           ...
       ...
    views
       view1
           view1.js
           view1.html
       view2
           view2.js
           view2.html
       ...
    index.html
    bower.json

Чтобы не загромождать папки ‘views’ и ‘img’, делите их в соответствии по экранам.

Рамки

Как описано выше, вы будете использовать AngularJS, ngRoute, ngAnimate, ngCordova и Angular Touch.

UX Frameworks

В наших предыдущих проектах мы использовали  Foundation , но   вместо этого можно использовать Bootstrap . Мы также использовали Font Awesome  для обычных значков и угловую  полосу загрузки, чтобы автоматически отображать счетчик и индикатор выполнения, подключившись к «$ http».

Полезные инструменты разработки

Чтобы упростить разработку, мы использовали Bower  для включения зависимостей JavaScript и Sass   для генерации CSS. Для получения дополнительной информации см. Этот пост: Полезные инструменты для приложений PhoneGap .

Беседка

Вот полезный ‘bower.json’, включающий все вышеперечисленные фреймворки. Это также включает в себя другие, которые будут подробно описаны в последующей записи

    {
      "name": "myHybrid",
      "description": "PhoneGap mobile App",
      "version": "1.0.0",
      "homepage": "http://yoramkornatzky.com",
      "license": "MIT",
      "private": true,
      "dependencies": {
        "angular": "latest",
        "angular-route": "latest",
        "angular-animate": "latest",
        "angular-touch": "latest",
        "ngCordova": "latest",

        "ngstorage": "latest",
        "taffydb": "latest",

        "foundation": "latest",
        "fontawesome": "latest",
        "angular-loading-bar": "latest",

        "underscore.number": "latest", 
        "underscore": "latest",
        "underscore.string": "latest",

        "validator-js": "latest"
      }
    }

Приложение AngularJS

Приложение имеет стандартную структуру AngularJS:

    angular.module('myApp', [
      'ngRoute',
      'ngCordova',
      'ngTouch',
      'angular-loading-bar', 
      'myApp.view1',
      'myApp.view2',
      'myApp.filters',
      'myApp.controllers',
      'myApp.services',
      'myApp.directives'
    ]).
    config(['$routeProvider', function($routeProvider) {
      $routeProvider.otherwise({redirectTo: '/entrance'});
    }]);

Начальная загрузка приложения

Подключившись к событию «deviceReady», вы загружаете приложение:

    var onDeviceReady = function() {
	    console.log("onDeviceReady");
	    angular.bootstrap(document, ['myApp']);
    };
    document.addEventListener('deviceready', onDeviceReady);

Не используйте ng-app !!!

Единственная страница

Единственный index.html включает необходимые файлы стандартным способом AngularJS.

Создайте свое приложение Angular и подключите его к любой базе данных с помощью Backand уже сегодня. —  Начни сейчас.

46
Share: