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>
This example will show you how to push notification to your IONIC app. Please make sure you have chosen “Y” when creating the app: Make sure you have signup the IONIC account, and you should be able to login https://apps.ionic.io/ : After sign-up the account, please follow the below steps: npm install –g bower ionic
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’ } } })
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
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
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
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,
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
Let’s try with Chrome first. Turn on opening developer tools by pressing Ctrl + Shift + I . Then, press Ctrl + Shift + M, you can switch to different device, e.g. iPhone 5, so that you can make sure the layout is working fine to any device you want. Please rate this Useful?
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