aws partner logo
ibm partner logo
googlecloud partner logo
microsoft partner logo
Partners
Blogs

An Introduction to Ionic Framework

03/Dec/2015 Posted By admin no comments.
Tags

Ionic is a complete open-source SDK for Hybrid Mobile App Development with web technologies. Built on top of AngularJS and Apache Cordova, Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by leveraging Cordova. As such, apps will need to be built speedily and inexpensively. Ionic is an incredibly efficient way to build these apps and offers the full native support you need to access all the different device features. You can build an app in familiar technologies and deploy it to multiple platforms simultaneously. Fast development time means lower costs and increased efficiency. Ionic is the brainchild of Drifty a company based out in Wisconsin, USA.

Advantages of using Ionic Framework:

Some of the core advantages of using Ionic Framework are listed below:
  • Ionic lets you package applications into multiple frameworks once you're done developing, which saves time that might be spent rewriting code.
  • Its cross-platform and lets you write the same app once for multiple platforms.
  • It gives you a lot of pre-generated app setups that can get you started quickly with a simple layout application.
  • It's easy to hook it up to common back-end technologies like Node/Express or Ruby.

 interest-over-time

Although the company was formed in January 2014, it still has received widespread popularity. Here is a chart showing the Interest over time of Ionic framework.

Features offered:

They have recently come out with Ionic Creator 1.1 which is an updated version and is much more user-friendly. Some of the other features which developers can utilize of Ionic framework are:

Scroll

Creates a scrollable container for all content inside. Note that it’s important to set the height of the scroll box as well as the height of the inner content to enable scrolling. This makes it possible to have full control over scrollable areas. If you’d just like to have a center content scrolling area, use ionContent instead. Here is a code snippet which explains how to use it while building your app.


code-1

List

The List is a widely used interface element in almost any mobile app, and can include content ranging from basic text all the way to buttons, toggles, icons, and thumbnails. Both the list, which contains items, and the list items themselves can be any HTML element. The containing element requires the list class and each list item requires the item class.


code-2

Modal

The Modal is a content pane that can go over the user’s main view temporarily. Usually used for making a choice or editing an item. Put the content of the modal inside of an  element. Here is a code snippet which explains how to use it while building your app.


code-3

Ion-Slide-Box

The Slide Box is a multi-page container where each page can be swiped or dragged. Here is a code snippet which explains how to use it while building your app.


code-4

Here is the Dashboard which you can make easily with a few clicks and by using some of the features mentioned above. Ionic framework developers claim that anyone can make an app in just 5 minutes using the Ionic creator.

dashboard

I hope this blog will help you in developing your app on ionic. Wait for the next blog in this series where I will be discussing more about the features of Ionic framework. Any comments or suggestions are most welcome.

Category : App Development