Getting started with ionic-framework
Ionic templates are dynamic and responsive and adapt to their environment to provide a native "look and feel". This adaptation includes layout, style, and icons. Ionic makes independent platform customization available as well. Because Ionic apps use front end web technology, they can also be viewed in a browser for faster development.
Ionic apps are built on top of Apache Cordova by default. They have access to all Cordova Plugins which let you use native functionality, such as push notifications, camera, accelerometer, etc. Cordova apps work on multiple platforms and devices (phones, tablets, etc.) with very little extra effort. Cordova may be switched out with other cross-platform technologies such as trigger.io.
|1.3.1 "el salvador"||2016-05-12|
Installation or Setup
1. Install the Ionic Framework and Cordova (since Ionic apps are based on Cordova) using npm (the Node Package Manager):
Make sure you have an up-to-date version of Node.js installed on your system. If you don't have Node.js installed, you can install it from here.
Also, for Mac users, having the latest Xcode version installed on your system brings to you command-line-tools and iOs Simulator, download here.
Open a terminal window (Mac) or a command window (Windows), and install Cordova and Ionic:
On a Mac, you may have to use sudo depending on your system configuration:
If you already have Cordova and Ionic installed on your computer, make sure you update to the latest version:
Note: iOS development requires Mac OS X. iOS simulator through the Ionic CLI requires the ios-sim npm package, which can be installed with the command:
2. Start a new Ionic project:
Create an Ionic project using one of the ready-made app templates, or a blank one to start fresh.
3. Test the Ionic app:
To test your Ionic app in a desktop browser on both iOS and Android platforms:
To test your Ionic app in an emulator:
Substitute ios with android for Android emulator testing:
To test your Ionic app in an Android device connected via USB:
To test your Ionic app in an iOS device connected via USB:
Ionic Framework Hello World App
After All the setup, To make Hello World App
- To create Simple Blank App, run below command on terminal :
- open the HelloWorld Project in subline/webstrome IDE :
- Edit index.html, in www/ ditectory
- To run in browser from terminal :
- To add platform :
- To run on device :
- To run in livereload :
Ionic Framework Introduction and Installation and Setup
A Cross-platform mobile application development framework using Angular JS and Front End web technologies.
Official website: http://ionicframework.com/
Installation and Setup
Installation Ionic required NPM(Node Package Manager) and Cordova.
You can download and install Npde JS from here which comes with NPM out of the Box.
To download Apache Cordova you can use NPM from command line
If you already have NPM and Cordova then you can install ionic framework from Command line using following command.
This will install and setup ionic framework for you to use it from command line.
Note* Based on your system environment you might need to execute with Admin privileges.
Starting A New Project
To Start a new Ionic Framework Project you can use following command
Ionic allows You to create project using some built in templates
tabs(default): which will create a simple app with tab view.
sidemenu: which will create ionic app with side menu.
blank: which will create a blank ionic app.
which will create a new folder named
myproject with all the ionic project files.
to test project in your browser you can use following command
Run an Emulate To execute or test app on emulator or phone first you will have to add platform for that you can use following command
Platform Names you can directly mention android and ios for respective Platforms you can mention multiple platform names also separated by space.
To run your app you can use
For help you can use
Refer this link for detailed explanation of ionic cli.
Refer this link for CSS components available in ionic.
For quicker development with ionic you can try ionic Playground also.
Best of luck with ionic framework...
Ionic Platform (Ionic Cloud) for Yo (Yeoman) Ionic Projects
Build, push, deploy, and scale your Ionic apps, the easy way.
The Ionic Platform is a cloud platform for managing and scaling cross-platform mobile apps. Integrated services enable you and your team to build, deploy, and grow your apps efficiently.
Ionic Platform works well with the standard Ionic projects. But projects following any Non-standard Directory Structure may face a few hurdles. This documents provides the steps to use Ionic Platform in the Ionic projects created using Yeoman.
This document covers the basic steps for creating an Ionic project using Yeoman and integrating it with Ionic Platform using the Ionic Platform Web Client. This document covers the basic steps to utilize Ionic Deploy, Ionic Analytics and Ionic Push.
The intended audience for this document is Web/Mobile App developers, with both beginner and expert level expertise, who are familiar with the below Prerequisites.
You should be familiar with the following frameworks/tools before trying this document.
- AngularJs: https://docs.angularjs.org/guide
- IonicFramework: http://ionicframework.com/docs/guide
- Yeoman: http://yeoman.io/codelab/index.html
- Ionic Generator: https://github.com/diegonetto/generator-ionic
- Ionic Platform: https://ionic.io/platform
Ionic Framework generator
A generator for the Ionic Framework from Yeoman, the Web's Scaffolding tool for modern webapps
Yeoman helps you to kick-start new projects, prescribing best practices and tools to help you stay productive.
In package.json include the following in devDependencies
In bower.json include the following in dependencies
In Gruntfile.js change the scripts folder to ‘js’. Change in index.html too if required.
A web client that provides interactions with the Ionic platform.
We need some code to let your app talk to the Ionic Platform. We need to add the Ionic platform web client for the Ionic app to interface with the plugins and the Ionic.io platform.
In your app.js add the ‘ionic.service.core’ module dependency. In Gruntfile.js add the grunt task ‘ionicSettings’ as given below.
Add the 'ionicSettings' in init and compress tasks after copy. In index.html move the below tag after all the tag declarations.
Push real-time updates to your production apps, and manage version history.
Ionic Deploy lets you update your app on demand, for any changes that do not require binary modifications, saving you days, or even weeks, of wait time. Follow the below procedure to configure Ionic Deploy for your App.
In Gruntfile.js add the grunt task ‘deploy’ as given below.
Ionic Deploy Code:
Send out new code for your app.
Create an apk and install your app. Make few changes in your code and deploy the changes using 'grunt deploy'. Then update it from your app.
You can also deploy it from the apps.ionic.io dashboard. You can deploy the app without the deploy parameter. Then, in the dash board you can add the metadata and versioning details and deploy the app from there.
View the live feed of events or the raw / unique number of events / users over time.
How many users are on your app right now? How many of those will use your app tomorrow, or next week? Without information, you have no way of telling if your app is being used in the ways that you expect. Follow the below procedure to configure Ionic Analytics for your App.
In your app.js add the ‘ionic.service.analytics’ module dependency after the ionic.service.core Run the analytics register method in our module's run function.
In Ionic Analytics, each tracked action a user makes in your app is represented by an event object. An event is a single action done at a specific point in time. To track your own events, call
$ionicAnalytics.track(eventType, eventData) whenever an action occurs.
The ion-track-tap directive sends an event when its host element is tapped. The associated ion-track-data directive attaches event data.
In the apps.ionic.io dashboard you can view the following analytics data,
Events: View the raw number of events over time, or the number of unique users who completed an event. An event can be anything from a user loading the app, to confirming a purchase.
Funnels: A funnel is a sequence of actions that you expect users to take in your app, leading up to a defined goal. Thoughtful use of funnels will let help you improve conversion rates.
Segments: View events over time, grouped by a specified property. Or, calculate the percentage of events that match a given property. Segments helps you understand your user base and see how properties change over time.
Retention: Track how long users are active on your app before they stop using it. Or, identify how long it takes for users to reach a defined goal, like a completed sale.
Pulse: A live feed of events coming in from your users.
Send targeted and automated push notifications to your users.
Ionic Push lets you create targeted push notifications through a simple dashboard that will be sent automatically when users match specific criteria, and offers a simple API to send push notifications from your own servers.
Android Push Profiles:
Android push notifications use the Google Cloud Messaging (GCM) service. Open the Google Developers Console and create a project. Copy down your project number. This will be the GCM sender ID or GCM Project Number.
In the API Manager section, enable the Google Cloud Messaging API. Then navigate to Credentials section and select Create credentials, then choose API Key, then Server Key. Name your API key and leave the Accept requests from... field blank and click Create. Save your API key!
Go to your app's dashboard on the Ionic Platform and navigate to Settings -> Certificates. If you haven't already, create a new security profile, then hit edit. Note down the Profile Tag.
Now, click the Android tab and find the section marked Google Cloud Messaging, enter the API Key you generated on the Google Developer Console, then click Save. Go to Settings -> API Keys. Under API Tokens, create a new token and copy it. This will your API Token.
Note: phonegap-plugin-push requires Android Support Repository version 32+
In your app.js add the ‘ionic.service.push’ module dependency after the ionic.service.core
Ionic Push Code:
Initialize the service and register your device in your module's run function. You'll need the device token that is registered by the user for sending notification to the user.
Ionic Push lets you create targeted push notifications through the dashboard. You can also send notifications from the server in the below format.
Note: The steps to configure Ionic Push for iOS is the same except for creating the Push Profiles. To create iOS push profiles refer http://docs.ionic.io/v2.0.0-beta/docs/ios-push-profiles
A Sample app is attached here for reference.
Note: This is not a standalone project. The code given is only for comparison against a project created and implemented using the procedures given above in this document, in case of any issues or errors.