Category: IONIC with Restful API

Installation of Node.js (Windows) No ratings yet.

Download and install Node.js version 4.X from Run “cmd”, and using it to install Cordova and Ionic Install Cordova by “npm install -g cordova” Install Ionic by “npm install -g ionic” Cordova and Ionic will be installed under C:\Users\{your_window_username}\AppData\Roaming\npm\ Install Git from Setup PATH by: a. Right-click on “Computer”, and click on “Properties”. b. Click on “Change Settings” c.

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

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

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,

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

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 account and please register, because we

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=””></script> after <!– cordova script (this will be a 404

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(‘’   .state(‘app.productlists’,             { url: ‘/productlists’,                                         views: { ‘menuContent’: { templateUrl: ‘templates/productlists.html’,         controller: ‘ProductListsController’ } } })