How to quickly prepare a cross-platform mobile application. Part 1: Adobe Phonegap + AngularJS

Anyone who has met a girl (s) knows how these beautiful creatures love compliments in their address. And we, the male population of planet Earth, do not always have enough words to express their feelings or just say something beautiful. Understanding this problem prompted us to create ~~another~~ generator of compliments ... the simplest one, ideally with one button and full-screen text.
In the first part I will talk about the goals that we set (application concept), and the means to achieve these goals that we chose (Phonegap + Ionic + Restangular + Phonegap Plugin Magic). This post will be useful for both beginners and experienced mobile software developers.

Note: Links to the final version of the application and on GitHub can be found in the basement of the post.

Training

Since there was little time (a week), and it was necessary to do a lot (and you don’t immediately get to the AppStore), the goal was clear from the very beginning: we are doing a cross-platform application to collect from one place at once and for everything. Chose Phonegap . And, since it is now possible to write in HTML + JS + CSS, then you can use the framework. AngularJS will do. The generator itself will spin on a separate server (we will consider it in this post) - we will communicate with it via REST. Excellent library for this purpose - Restangular .

Quick start to Phonegap + AngularJS

( source )
On Habré there are several articles on the development of mobile applications on AngularJS. For example, here . But in them usually, as in a dream, the action begins from the middle: “You have a prototype on NodeJS by Yeoman with already connected AngularJS - I will tell you how to add support for touch and gestures to it”, etc. We will try to start in this post first: you have a computer with an operating system (in our case, windows 8) and JDK , Git , NodeJs , Python and IDE (in our case, IntelliJ IDEA 13 ) installed on it. If any of this is not, then buy or install - all the information on the links.
')

First, install Phonegap CLI on the system.

With the help of NodeJS, everything is done very quickly via the command line:

npm install -g phonegap

After the script is completed, your system will be able to use the Phonegap CLI from any place due to global linking (the -g attribute in the installation command). Now create a directory for the project and go to it.

 cd D:\workspace\march8\modules\

Now create a mobile application project using the Phonegap CLI:

 phonegap create client com.somecompany.compliments Compliments

where client is the name of the mobile application location directory on Phonegap, com.somecompany.compliments is the package containing the main Activity , and Compliments is the name of the application.
Hooray! Now we have a project on Phonegap. Let's collect and test it on Android. Connect a test device (in our case, this is Samsung Galaxy S III and Samsung Galaxy Tab 10.1) or configure the emulator and run the following code in the command line:

 cd client phonegap run android

This script will add the project for Android to the platforms folder, compile it and install it on the device or emulator.

Device Screenshot

Now you need to clean the project from unnecessary files:

 del www\spec.html rmdir /s www\spec del www\img\logo.png del www\css\index.css cd www rename index.html index-old.html

We connect AngularJS to the project

The simplest solution to this problem (as described in the above source ) is to use the Angular Seed project — upload it to the modules directory:

 cd ../../ git clone https://github.com/angular/angular-seed.git

After executing the script, you will see a new angular-seed directory. Extract the files we need from it:

 copy angular-seed\app\js\* client\www\js\ copy angular-seed\app\css\* client\www\css\ xcopy angular-seed\app\lib client\www\lib\ /e xcopy angular-seed\app\partials client\www\partials\ /e copy angular-seed\app\index.html client\www\index.html

Few fix the code of the new index.html inserts from the index-old.html (for now index-old.html 's use the notepad):

Source code index.html

 <!doctype html> <html lang="en" ng-app="myApp"> <head> <meta charset="utf-8"> <title>My AngularJS App</title> <link rel="stylesheet" href="css/app.css"/> </head> <body> <ul class="menu"> <li><a href="#/view1">view1</a></li> <li><a href="#/view2">view2</a></li> </ul> <div ng-view></div> <div>Angular seed app: v<span app-version></span></div> <!-- In production use: <script src="//ajax.googleapis.com/ajax/libs/angularjs/xxx/angular.min.js"></script> --> <script src="lib/angular/angular.js"></script> <script src="lib/angular/angular-route.js"></script> <script src="js/app.js"></script> <script src="js/services.js"></script> <script src="js/controllers.js"></script> <script src="js/filters.js"></script> <script src="js/directives.js"></script> </body> </html>

Source code index-old.html

 <!DOCTYPE html> <!-- Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 --> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <title>Hello World</title> </head> <body> <div class="app"> <h1>PhoneGap</h1> <div id="deviceready" class="blink"> <p class="event listening">Connecting to Device</p> <p class="event received">Device is Ready</p> </div> </div> <script type="text/javascript" src="phonegap.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript"> app.initialize(); </script> </body> </html> in writing, <!DOCTYPE html> <!-- Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 --> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <title>Hello World</title> </head> <body> <div class="app"> <h1>PhoneGap</h1> <div id="deviceready" class="blink"> <p class="event listening">Connecting to Device</p> <p class="event received">Device is Ready</p> </div> </div> <script type="text/javascript" src="phonegap.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript"> app.initialize(); </script> </body> </html>

Let's pull out the viewport settings (lines 23-25):

 <meta name="format-detection" content="telephone=no" /> <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 --> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

Let's transfer also the lines connecting and initiating Phonegap:
- lines 37-38 need to be moved to connect AngularJS
- lines 39-41 need to be inserted before the closing tag

Modified index.html file

 <!doctype html> <html lang="en" ng-app="myApp"> <head> <meta charset="utf-8"> <meta name="format-detection" content="telephone=no" /> <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 --> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <title>My AngularJS App</title> <link rel="stylesheet" href="css/app.css"/> </head> <body> <ul class="menu"> <li><a href="#/view1">view1</a></li> <li><a href="#/view2">view2</a></li> </ul> <div ng-view></div> <div>Angular seed app: v<span app-version></span></div> <script type="text/javascript" src="phonegap.js"></script> <script type="text/javascript" src="js/index.js"></script> <!-- In production use: <script src="//ajax.googleapis.com/ajax/libs/angularjs/xxx/angular.min.js"></script> --> <script src="lib/angular/angular.js"></script> <script src="lib/angular/angular-route.js"></script> <script src="js/app.js"></script> <script src="js/services.js"></script> <script src="js/controllers.js"></script> <script src="js/filters.js"></script> <script src="js/directives.js"></script> <script type="text/javascript"> app.initialize(); </script> </body> </html>

Now we don’t need the index-old.html file - we delete it:

 del client\www\index-old.html

Finally, index.js edit the index.js , which is responsible for initializing Phonegap.

Source code index.js

 /* * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file * distributed with this work for additional information * regarding copyright ownership. The ASF licenses this file * to you under the Apache License, Version 2.0 (the * "License"); you may not use this file except in compliance * with the License. You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, * software distributed under the License is distributed on an * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY * KIND, either express or implied. See the License for the * specific language governing permissions and limitations * under the License. */ var app = { // Application Constructor initialize: function() { this.bindEvents(); }, // Bind Event Listeners // // Bind any events that are required on startup. Common events are: // 'load', 'deviceready', 'offline', and 'online'. bindEvents: function() { document.addEventListener('deviceready', this.onDeviceReady, false); }, // deviceready Event Handler // // The scope of 'this' is the event. In order to call the 'receivedEvent' // function, we must explicity call 'app.receivedEvent(...);' onDeviceReady: function() { app.receivedEvent('deviceready'); }, // Update DOM on a Received Event receivedEvent: function(id) { var parentElement = document.getElementById(id); var listeningElement = parentElement.querySelector('.listening'); var receivedElement = parentElement.querySelector('.received'); listeningElement.setAttribute('style', 'display:none;'); receivedElement.setAttribute('style', 'display:block;'); console.log('Received Event: ' + id); } };

You need to modify the receivedEvent function (line 39 and on) so that it looks like this:

 receivedEvent: function(id) { console.log('Received Event: ' + id); angular.bootstrap(document, ["myApp"]); }

Modified index.js

 /* * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file * distributed with this work for additional information * regarding copyright ownership. The ASF licenses this file * to you under the Apache License, Version 2.0 (the * "License"); you may not use this file except in compliance * with the License. You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, * software distributed under the License is distributed on an * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY * KIND, either express or implied. See the License for the * specific language governing permissions and limitations * under the License. */ var app = { // Application Constructor initialize: function() { this.bindEvents(); }, // Bind Event Listeners // // Bind any events that are required on startup. Common events are: // 'load', 'deviceready', 'offline', and 'online'. bindEvents: function() { document.addEventListener('deviceready', this.onDeviceReady, false); }, // deviceready Event Handler // // The scope of 'this' is the event. In order to call the 'receivedEvent' // function, we must explicity call 'app.receivedEvent(...);' onDeviceReady: function() { app.receivedEvent('deviceready'); }, // Update DOM on a Received Event receivedEvent: function(id) { console.log('Received Event: ' + id); angular.bootstrap(document, ["myApp"]); } };

Good to know : since the project on the Phonegap initialization event performs the initialization of AngularJS through a call

 angular.bootstrap(document, ["myApp"]);

, then the tag

ng-app , AngularJS .

! Android . :
cd client phonegap run android
, :


view , . , - AngularJS .

. , , Ionic Framework .

!


Play Market: 
AppStore: - !
GitHub:

in index.html

ng-app , AngularJS .

! Android . :
cd client phonegap run android
, :


view , . , - AngularJS .

. , , Ionic Framework .

!


Play Market: 
AppStore: - !
GitHub:

ng-app , AngularJS .

! Android . :
cd client phonegap run android
, :


view , . , - AngularJS .

. , , Ionic Framework .

!


Play Market: 
AppStore: - !
GitHub:

      ng-app ,      AngularJS  . 
 
   !      Android     .  : 
 cd client phonegap run android 
  ,       : 
     
 
     view    ,     . ,  -  AngularJS      . 
 
         .       ,        ,   Ionic Framework     . 
 
   ! 
 
   
   Play Market:  
   AppStore:    -      ! 
   GitHub:

ng-app , AngularJS .

! Android . :
cd client phonegap run android
, :


view , . , - AngularJS .

. , , Ionic Framework .

!


Play Market: 
AppStore: - !
GitHub:

ng-app , AngularJS .

! Android . :
cd client phonegap run android
, :


view , . , - AngularJS .

. , , Ionic Framework .

!


Play Market: 
AppStore: - !
GitHub:

ng-app , AngularJS .

! Android . :
cd client phonegap run android
, :


view , . , - AngularJS .

. , , Ionic Framework .

!


Play Market: 
AppStore: - !
GitHub:

ng-app , AngularJS .

! Android . :
cd client phonegap run android
, :


view , . , - AngularJS .

. , , Ionic Framework .

!


Play Market: 
AppStore: - !
GitHub:

`ng-app , AngularJS . ! Android . : cd client phonegap run android , : view , . , - AngularJS . . , , Ionic Framework . ! Play Market: AppStore: - ! GitHub:`

ng-app , AngularJS .

! Android . :
cd client phonegap run android
, :


view , . , - AngularJS .

. , , Ionic Framework .

!


Play Market: 
AppStore: - !
GitHub:

Source: https://habr.com/ru/post/215407/

All Articles