Category: IONIC with Restful API

Example 5: Client Login / Logout With $http.post() No ratings yet.

This example will show you how to post data to Restful server by using $http.post() in order to demonstrate login and logout functions. Besides, it will use window.localStorage to store the login information. Please follow below steps: Update C:\workspace_ionic\itBlogsApp\www\templates\menu.html by changing: <ion-item menu-close ng-click=”login()”>Login</ion-item> to <ion-item menu-close ng-click=”login()”>{{loginout}}</ion-item>   Update C:\workspace_ionic\itBlogsApp\www\templates\login.html by changing: <h1 class=”title”>Login</h1>

Example 3: Products Show Room With Searching and Sorting No ratings yet.

For this example, we will show you how to list the records in table format with header sorting and keyword auto-complete searching functions. Please follow below steps: Update C:\workspace_ionic\itBlogsApp\www\js\app.js , add below code after .state(‘app.shop’   .state(‘app.productlists’,             { url: ‘/productlists’,                                         views: { ‘menuContent’: { templateUrl: ‘templates/productlists.html’,         controller: ‘ProductListsController’ } } })  

Example 2: Listing Shop Integrating With Google Map No ratings yet.

After the first example, you know how to $http.get() data from Restful server. This example will show you how to list your records in listing format and show with Google Map. Please follow below steps: Under C:\workspace_ionic\itBlogsApp\www\index.html , add: <!– Google map js –> <script src=”http://maps.googleapis.com/maps/api/js”></script> after <!– cordova script (this will be a 404

Example 1: Show Company Background With Simple $http.get() No ratings yet.

This example will show you how to get JSON data from Restful server by using $http.get(), you can download the ionic workspace here. Let’s create a new app by “ionic start itBlogsApp sidemenu” under C:/workspace_ionic/ , it will generate the new project – itBlogsApp. Enter “Y” to create the ionic.io account and please register, because we

Restful API Server No ratings yet.

Before working on Ionic UI, let’s setup the restful API server first, you can follow “Spring Restful + Hibernate with AngularJS” to setup the restful server. Or, you can download SpringRestfulExample for Tomcat server and Spring4Restful_v01_schema.sql for MySQL database. Then, you can follow the below procedures: Install JDK from Oracle (using JDK 1.7 for our

App Folder Structure No ratings yet.

workspace – AppFolder                                 – hooks – platforms                                 – plugins – resources – scss – www      (you will most likely work on this folder for your development) – css – img – js – lib – templates   You can find an index.html under “www” folder, it is the default page for the project,

Simulate and Build with Platform-Specified SDK No ratings yet.

If you need to use platform-specified features like camera, network and Bluetooth from your Ionic app, you need to build with specified platform SDK. Besides, you can also simulate with specified platform SDK by: cd C:\workspace_ionic\myApp1\ running the below commands for Android => “ionic platform add android” for IOS => “ionic platform add ios” for Windows

Ionic Templates No ratings yet.

There are three different template layouts for building up your app: Layouts blank sidemenu tabs Commands 1.       Open a command prompt 2.       Under your ionic working folder 3.       Create app by “ionic start myApp1 blank” 4.       Then, it will generate the new project – myApp1 under your ionic working folder 5.       Running the app by “ionic serve