Phonegap project with AngularJS

     AngularJS is an open source web application framework. It is the automatic synchronization of data between model and view components. These are objects that refer to the model.  They act as a glue between controller and view. These are JavaScript functions that are bound to a particular scope and It has the concept of switching views. With AngularJS, developer write less code and produce more functionality and essential usage in user interface data reflection. So, some of the developers use the AngularJS in Phonegap projects.

  • Manage Folder Structure:.
  • Module file Creation.
  • Controller file Creation.
  • Service file Creation.

Manage Folder Structure:

            After creation of phonegap app. We have a default structure of folders. Before adding the AngularJS, we need to create the some of the folder with the file. Below, I showed it by an image. In ‘js’ folder contains angular and lib folder. Angular folder contains ‘controllers.js’,’routies.js’,’service.js’ files and lib has the library files. It’s based on that touch,routes  and other functionality are working. In ‘app.js’ module and configuration details. So individually accessible from the ‘js’ folder. And, In this ‘views’ folder has No.of html view files located through path access it.

screen-shot-2017-02-17-at-12-06-01-pm
Fig-1. folder structure

Module Generation:

                   In this ‘module’ is the most essential part of the angular. Which is used to access the controllers,routes, touch and add some dependencies for the require application.The module is a container for the different parts of an application. The module is a container for the application controllers. Controllers always belong to a module.

Note : Replace the ‘index.js’ to ‘app.js

In ‘app.js’ to add the module on top of the file like below syntax:

// Create a new module
var app = angular.module('myModuleName',[]);
// Within the '[ ]' added the need of dependencies to the your module.
// For example : 
// If you need touch event. add '[ng-touch]'
// If you need route the view. add '[ng-route]'

In the above syntax, have the ‘myModuleName’, that module name and the variable name ‘app’ used to access the controllers, routes and other file.

Create Controller :

                Consider, each and every view as a controller. So, add the  ‘ng-controller’ name to handle the view through the controller file. Can you take the attached code, then compare it. After that you can able to understand.

controller.js

app.controller('controllername', function($scope) {
// add statement and function to handle

//sample function
$scope.samplefunction = function(){
}
//In this file you will call the like below
$scope.samplefunction();
});

// If you try to call it in view side. Like below style.
samplefunction()

Service file: 

                  In this file, you will access the API to post and get value. In ‘service.js’ file, can you add the below code.use the angular ‘factory’ method to achieve the service API call.

 
app.factory('factoryName',function($http) {
       var baseURL = "http://localhost/";
       var loginURL ="login.php";
       var raspAPI = {};
       Object.toparams = function ObjecttoParams(obj) {
         var p = [];
         for (var key in obj) {
            p.push(key + '=' + encodeURIComponent(obj[key]));
         }
           return p.join('&');
        };

        // get method to get/send the data
        raspAPI.getMethod = function() {
           return $http({
                   method: 'GET',
                   url: baseURL+getTempURL,
            });
        }
         // post method to get/send the data
        raspAPI.postMethod = function(objs) {
           return $http({
                   method: 'POST',
                   url: baseURL+getTempURL,
                   data: Object.toparams(objs),
                   headers: {'Content-Type': 'application/x-www-form-urlencoded'}
         });
       }

});

Thanks for reading this blog. I hope it will help us. Any feedback, could you share it in the comment. Always welcome!. After a few days I will upload the sample project can you verify it. Very soon…

Advertisements

One Comment Add yours

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s