Use Localstorage for ionic with ngStorage





Local storage is supported by almost all of browsers these days, that makes it very easy to integrate local storage into the Ionic app. As usual, we can access it this way:
window.localStorage
Practically, to add, update or remove an item, we do this:
window.localStorage.setItem( ‘awesome-key’, ‘awesome-value’ );
window.localStorage.getItem( ‘awesome-key’ );
That’s good enough for simple data structure. When data structure gets more complicated, I mean JSON, then it’s gonna be something like this:

var appData = {
name: ‘Awesome App’,
version: ‘1.0.0’,
description: ‘My first awesome app’
};

/* LATER ON */
// save it
window.localStorage.setItem( ‘app-name’, JSON.stringify(appData));
// retrieve it
var appData = JSON.parse( window.localStorage.getItem( ‘app-name’ ));

Basically, it is fine, but keep dealing with JSON.stringify() and JSON.parse() is very very very annoying and inconvenient.
Luckily, there has an Angular module that helps dealing with this, ngStorage. Since Ionic is based on Angular, we can use it in the application freely. Let’s use it to create a very simple Ionic application, a simple anything app.
Create a new blank Ionic project.

$ ionic start AnythingApp blank

Check whether project is working properly.

$ cd AnythingApp
$ ionic serve

View in browser to see whether it works fine or not. It is a good habit to always verify a good-working initialized project to start with. If any error occurs at this step, you might wanna to re-create project again.
Next step is to install ngStorage as I mentioned above.

$ bower install ngstorage

According to the pre-configuration in .bowerrc, the library is installed at www/lib directory. Okay, we need to include this library into the app, by adding a line in the main www/index.html file.

<! — ionic/angularjs js →<! — add more libraries →<! — cordova script (this will be a 404 during development) →

Add you notice, I add the library right after adding the ionic.bundle.js library, that is the appropriate place to add more libraries into Ionic project.
To use the service, as mentioned in the ngStorage usage guide, we need to inject ngStorage module and the appropriate service when we need.
Next, let’s draft the basic UI for the main view:


Anything App

 

 

{{thing}}

Okay, the template also does mention the method to add new thing model to the app, and display it on the list below. We will work on this.
To separate concerns on controller, we will create a factory to handle add, remove data from local storage, where ngStorage module is in use.
Inject to main module at first hand,

// Inject ngStorage
angular.module(‘starter’, [‘ionic’, ‘ngStorage’])
and then create the factory,
// create a new factory
.factory (‘StorageService’, function ($localStorage) {
var _getAll = function () {
return $localStorage.things;
};
var _add = function (thing) {
$localStorage.things.push(thing);
}
var _remove = function (thing) {
$localStorage.things.splice($localStorage.things.indexOf(thing), 1);
}
return {
getAll: _getAll,
add: _add,
remove: _remove
};
})

You might wonder, what that $localStorage.things is about. Yay, that’s the cool thing ngStorage provides, we can use the Javascript dot-notation to access the object, which helps us to avoid writing the basic getItem, setItem.
Since, we keep every entry in local storage, we use a single key to keep them as an array. Hence, push() is applied for $localStorage.things.
Following step is to create the controller, which is MainCtrl as we specified earlier in the view.
// controller

.controller( ‘MainCtrl’, function ($scope, StorageService) {
$scope.things = StorageService.getAll();
$scope.add = function (newThing) {
StorageService.add(newThing);
};
$scope.remove = function (thing) {
StorageService.remove(thing);
};
})

Almost done, you can try on browser and see what happens when you try to add a new entry, you’ll get an error…

TypeError: Cannot read property ‘push’ of undefined
at Object._add [as add] (http://localhost:8100/js/app.js:16:25)
at Scope.$scope.add (http://localhost:8100/js/app.js:35:20)
at fn (eval at (http://localhost:8100/lib/ionic/js/ionic.bundle.js:21972:15), :4:279)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:57514:9
at Scope.$eval (http://localhost:8100/lib/ionic/js/ionic.bundle.js:24673:28)
at Scope.$apply (http://localhost:8100/lib/ionic/js/ionic.bundle.js:24772:23)
at HTMLButtonElement. (http://localhost:8100/lib/ionic/js/ionic.bundle.js:57513:13)
at HTMLButtonElement.eventHandler (http://localhost:8100/lib/ionic/js/ionic.bundle.js:12098:21)
at triggerMouseEvent (http://localhost:8100/lib/ionic/js/ionic.bundle.js:2865:7)
at tapClick (http://localhost:8100/lib/ionic/js/ionic.bundle.js:2854:3)

It happens because we didn’t initialize the key to be used and be watched by $localStorage. Fixing it by initializing the default value for the keys we want to use in the app. Add the following line at beginning of the factory,

$localStorage = $localStorage.$default({
things: []
});

That’s it for the use of ngStorage. Actually, there are more methods provided by ngStorage, but I guess you will find it very interesting when discovering something useful about ngStorage. Be sure to follow the guide in the ngStorage usage section.
The full source code for this demo: https://github.com/petehouston/ionic-anything-app
Check out if you need a reference or have any trouble.

Why Hybrid Mobile Apps Development





When developing an app you have three choices:

1. Native mobile app
2. Mobile web app
3. Hybrid mobile app

From a business viewpoint, one of the reasons to consider a hybrid mobile app is you don’t have to develop a full app for every mobile platform. Since, Web browser or the UI Web View is not identical to the all browser. A hybrid app is cross-platform by design and it solves some of the issues that some experience with full web apps.

A hybrid app is a web app built using HTML5 and JavaScript, wrapped in a native container which loads most of the information on the page as the user navigates through the application. Hybrid apps make us possible to embed HTML5 apps that combining the both best and worst elements of native and HTML5 apps. Hybrid apps provide the best of both worlds i.e. Native and HTML worlds.

How To Make Side Menus In Ionic





There is two side menus in ionic, one is left side menu and another one is right side menu. We can design our side menus as our wish.

For Left Side Menu

<ion-side-menus>

<ion-side-menu side=”Left” width=”myWidthvalue+20 is-enabled=”shouldLeftsideMenuBeEnabled”

“>

 

<ion-side-menu-content>

Your menu content goes Here

</ion-side-menu-content>

</ion-side-menu>

</ion>

UI-Router To Navigate In Ionic Framework





 

In this post we will learn how UI router to navigate in ionic framework. Ionic comes with the Angular UI router with it, thus we can directly use $stateProvider and $urlRouterProvider to create routes. We need to inject $stateProvider and $urlRouterProvider in our config method to make use of the Angular UI router.

We are going to build a simple two-page view, and a navigation button to navigate between the views. This is a simple example to understand syntax and setup of the router. Lets open www/js/app.js, and then just start coding by using config method like below :


.config (function ($stateProvider , $urlRouterProvider){
$stateProvider
.state('' , {

});

$urlRouterProvider.otherwise('');
});

Or follow this picture:
UI-Router To Navigate In Ionic Framework

As you can see, $stateProvider and $urlRouterProvider are injected as dependencies to the config method.


.state('page1', {
url: "/page1",
templateUrl: 'templates/page1.html'
})

.state(‘page2’, {
url: “/page2”,
templateUrl: ‘templates/page2.html’
})


Or follow this picture:

angularjs routing

The state method of $stateProvider are used to declare the routes. The first argument of the state method is the name of the state whereas second argument contains route configuration. Route configuration has URL and Template.

url : The URL route that can be accessed via href properties

templateUrl : The path to the view template HTML file

Next we have $urlRouterProvider which provide the default URL as shown below.

Like:
$urlRouterProvider.otherwise('/page1');

See Full code :


.config (function ($stateProvider , $urlRouterProvider){
$stateProvider
.state('page1', {
url: "/page1",
templateUrl: 'templates/page1.html'
})

.state('page2', {
url: "/page2",
templateUrl: 'templates/page2.html'
})

$urlRouterProvider.otherwise('/page1');

});

Or follow this picture:

angular ui router

Our index.html will look like below, where we are adding a back button which will be displayed when we go in any other view than the default view. We also have to tell the router which portion of the page should be updated with the contents of the state, this is done by adding <ion-nav-view>.


follow this picture:

ui router

The contents of page1.html are :

angularjs routing

The contents of page2.html are :

UI-Router To Navigate In Ionic Framework

Hope, it was very helpful for you.

How to use Cordova sqlite plugin in ionic





In this short tutorial , I am going to write how to use cordova sqlite plugin in ionic framework.

Before starting, its better to explain what elements are needed for successful implementation of cordova sqlite plugin. So , let’s start by creating fresh ionic project.

If you are new to ionic and dont know how to install it then read the this post

 

Start Git bas or NodeJs Command promt and type the following code

  • $ ionic start myApp blank

After download finished, type

  • cd myApp

Now its time to install cordova sqlite plugin . For this run the following code into cli or Command prompt.

  • cordova plugin add https://github.com/litehelpers/Cordova-sqlite-storage.git

After this , install ngCordova from bower by following command.

  • bower install ngCordova

let’s Start with our ionic project

Now open the app folder into your favourite text editor, mine is sublime text.

Open the www folder there you can  find four subfolders and index.html file.

Open the index.html file into text editor and you can see the code like

  • <!DOCTYPE html>
  • <html>
  •   <head>
  •     <meta charset=”utf-8″>
  •     <meta name=”viewport” content=”initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width”>
  •     <title></title>
  •     <link href=”lib/ionic/css/ionic.css” rel=”stylesheet”>
  •     <link href=”css/style.css” rel=”stylesheet”>
  •     <link rel=”stylesheet” href=”css/ionicons.css”>
  •     <!– IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
  •     <link href=”css/ionic.app.css” rel=”stylesheet”>
  •     –>
  •     <!– ionic/angularjs js –>
  •     <script src=”lib/ionic/js/ionic.bundle.js”></script>
  •     <!– cordova script (this will be a 404 during development) –>
  •     <script src=”cordova.js”></script>
  •     <!– your app’s js –>
  •     <script src=”js/app.js”></script>
  •     <script src=”js/controllers.js”></script>
  •   </head>
  •   <body ng-app=”starter”>
  •     <ion-nav-view></ion-nav-view>
  •   </body>
  • </html>

You have to link the ng-Cordova.min.js above the <script src=”cordova.js”></script>  file from lib/ngCordova/dist/ng-Cordova.min.js

And the final index.html looks like

  • <!– ionic/angularjs js –>
  •     <script src=”lib/ionic/js/ionic.bundle.js”></script>
  •     <!– cordova script (this will be a 404 during development) –>
  •     <script src=”js/ng-Cordova.min.js”></script>
  •     <script src=”cordova.js”></script>
  •     <!– your app’s js –>
  •     <script src=”js/app.js”></script>

Now, open the app.js  from js subfolder of www folder. And replace  with following code.

  1. var db=null;
  2. angular.module(‘starter’, [‘ionic’,’ngCordova’])
  3. .run(function($ionicPlatform,$cordovaSQLite) {
  4.   $ionicPlatform.ready(function() {
  5.     if(window.cordova && window.cordova.plugins.Keyboard) {
  6.       // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
  7.       // for form inputs)
  8.       cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
  9.       // Don’t remove this line unless you know what you are doing. It stops the viewport
  10.       // from snapping when text inputs are focused. Ionic handles this internally for
  11.       // a much nicer keyboard experience.
  12.       cordova.plugins.Keyboard.disableScroll(true);
  13.     }
  14.     if(window.StatusBar) {
  15.       StatusBar.styleDefault();
  16.     }
  17.        //db = $cordovaSQLite.openDB({ name: “my.db” });
  18.        db= window.openDatabase(“sql.db”,”1″,”example of sqlite”,”2000″);
  19.       // for opening a background db:
  20.       // db = $cordovaSQLite.openDB({ name: “my.db”, bgType: 1 });
  21.       $cordovaSQLite.execute(db,”CREATE TABLE IF NOT EXISTS people (id integer primary key, firstname text, lastname text,address text)”);
  22.   });
  23. })
  24. .controller(‘dataCtrl’, function($scope,$cordovaSQLite){
  25.   $scope.add= function(user){
  26.     console.log(user.firstname);
  27.     var query=”INSERT INTO people(firstname,lastname,address) VALUES (?,?,?)”;
  28.     $cordovaSQLite.execute(db,query,[user.firstname,user.lastname,user.address]).then(function(res){
  29.       $scope.load();
  30.     });
  31.   }
  32.   $scope.load=function(){
  33.     $scope.alldata=[];
  34.      $cordovaSQLite.execute(db,”SELECT * FROM people”,[]).then(function(result){
  35.       if(result.rows.length>0){
  36.         for(var i=0; i<result.rows.length;i++){
  37.         $scope.alldata.push(result.rows.item(i));
  38.         }
  39.          $scope.$apply();
  40.       }else{
  41.           console.log(“No data Found”);
  42.         }
  43.     },function(err){
  44.       console.log(“error”+err);
  45.     });
  46.   }
  47. });

To insert and populate data from controller,  insert following code between <ion-content></ion-content> of index.html. You should apply ng-controller to your app .

  • <div class=”list”>
  •         <label class=”item item-input”>
  •           <input type=”text” placeholder=”First Name” ng-model=”user.firstname”>
  •         </label>
  •         <label class=”item item-input”>
  •           <input type=”text” placeholder=”Last Name” ng-model=”user.lastname”>
  •         </label>
  •         <label class=”item item-input”>
  •           <input type=”text” placeholder=”Address” ng-model=”user.address”>
  •         </label>
  •         <button class=”button button-positive button-block” ng-click=”add(user)”>Add People</button>
  •       </div>
  •       <div class=”list”>
  •           <div class=”item” ng-repeat=”item in alldata”>
  •            {{item.id}}     {{item.firstname}}
  •           </div>
  •       </div>

If you get any error in running this code, feel free to comment.

Installing Cordova And Ionic Framework





Installing Cordova and ionic Framework

  • Download and install Node.js from https://nodejs.org/en/
  • Press open your command prompt or press(windowkey+r, type cmd and press enter)
  • Enter npm install –g cordova ionic command for installing cordova from npm
  • Download and install git bash from https://git-scm.com/download

Creating projects in ionic

  • Create a folder named ionic_training in your htdocs inside the xampp folder
  • Open this folder and right click in blank spaces
  • Choose Git Bash Here option from the list. Then git bash command promt is open.
  • For creating ionic project use $ ionic start <your project name > <feature>. For example:

$ ionic start myApp blank (this command create a blank ionic project named myApp )

$ionic start myApp tabs (crate an ionic project named myApp with tabs)

$ionic start myApp sidemenu (crate an ionic project named myApp with sidebar menu)

for more visit: http://ionicframework.com/getting-started/

 

  • For the output run $ ionic serve –lab This command show the lab view of your application.

Ionic CSS Component

Header component

Headers are fixed regions at the top of a screen that can contain a title label, andleft/right buttons for navigation or to carry out various actions.

Headers come in a variety of default color options.

 

 

Copyright © 2016 InfoxIT Portal. All rights reserved.
Seo wordpress plugin by www.seowizard.org.
Scroll To Top
Visit Us On FacebookVisit Us On Google PlusVisit Us On YoutubeCheck Our Feed