Getting Started

Welcome to Ionic! Ionic is a powerful HTML5 native app development framework that helps you build native-feeling mobile apps all with web technologies like HTML, CSS, and Javascript.

Ionic is focused mainly on the look and feel, and UI interaction of your app. That means we aren't a replacement for PhoneGap or your favorite Javascript framework. Instead, Ionic tries to fit in well with these projects in order to simplify one big part of your app: the front end. We recommend reading Where does the Ionic Framework fit in? to get a good understand of the framework's goals.

You'll often use Ionic with your choice of Javascript framework, and your choice of native wrapper. We think AngularJS is one of the best javascript frameworks around, so we've also built easy-to-use AngularJS extensions to make integration incredibly easy. As of Ionic 0.9.0, Angular is the only supported way to build Ionic apps (we are working to change this though).

We will also be releasing Cordova/PhoneGap plugins in the future to expand the capabilities of your apps.

Download

To get the latest official release of Ionic, simply click the button below to download:
Download v0.9.04 Alpha

You can also clone it on GitHub to get the bleeding edge release.

What's Included

Ionic comes with compiled Javascript and CSS for your app, optional SASS files and JS Framework extensions, along with a great icon pack.

The project structure is organized as follows:

  • dist/ - compiled versions of Ionic JS and CSS, along with the required font files for the Ionicons icon pack.
  • example/ - examples of full-featured Ionic projects. Feel free to copy these and base your next project on them.
  • js/ - the Javascript code for the project and any framework extensions (like AngularJS) that we have provided.
  • scss/ - the raw SCSS files that can be used to integrate the Ionic SCSS into your own project. Or you can use the compiled CSS in the dist folder above.
  • test/ - Unit tests for the Javascript files, along with visual tests of components.
  • tools/ - Tools for creating and administering Ionic projects.

Basic Template

In the example below we have set the header, content and footer in logical order, but note that their order within the document does not matter. 

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>My App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href=/old?u=http%3A%2F%2Fionicframework.com%2Fdocs%2F%3C%2Fspan&y=1999>"css/ionic.css">
  <script src=/old?u=http%3A%2F%2Fionicframework.com%2Fdocs%2F%3C%2Fspan&y=1999>"js/ionic.js"></script>
  <script src=/old?u=http%3A%2F%2Fionicframework.com%2Fdocs%2F%3C%2Fspan&y=1999>"js/ionic-angular.js"></script>
</head>
<body>
  <header-bar title="'Hello'"></header-bar>
  <content has-header="true">
  </content>
</body>
</html>

CSS/SASS

The CSS can stand on its own, but it is also built to be enhanced by the developer. For simplicity you can always just add in your own CSS and override default properties. And for even more power and flexibility, the core is written with SASS and includes easily customized variables and mixins. While the default design is similar to iOS, we feel we’ve left the CSS in a state which can be easily extended to get your own look and feel.

To really integrate Ionic into your project, we recommend using and modifying the core SASS files. To do this, copy the scss/ folder into your project and simply @import 'ionic.scss' to import the SASS files into your project.

AngularJS

Ionic ships with some great AngularJS extensions by default. This makes it easy to use Angular directives instead of the raw HTML/CSS markup, and also makes it easy to use common Ionic services in your controllers and directives.

To use the AngularJS extensions, copy dist/js/ionic-angular.js and include it after dist/js/ionic.js in your app. See the Angular doc section for more details on using the extensions.

Ionic-Angular relies on Angular 1.2.1, and includes ngAnimate, ngTouch, ngSanitize, ngRoute, and ngResource by default.

PhoneGap/Cordova/Trigger.io

Our examples were tested on Cordova 3.1.0, but should work for any version since we aren't shipping plugins (yet). To add Ionic to your PhoneGap, Cordova, or Trigger.io project, just reference the Ionic CSS and JS files from the web root of your app.

Browser Support

Ionic is meant for building native mobile apps. That means we aren't focusing on web apps or desktop apps. Since mobile browsers often exhibit issues while in browsing mode that don't show while running under a "wrapped" native app, we recommend running all Ionic examples in a Desktop browser, PhoneGap or another native wrapper.

As such, our browser support tends to be whatever Web View API is available to native apps on a given platform. For Ionic 0.9.x beta, that means UIWebView for iOS 6 and 7, and Android 4.2+.

Examples

We have plenty of starter templates, live apps, and other examples to get you started. To view our Ionic examples, take a look at the Examples page.

License

Ionic is an open source framework released under a permisive MIT license. This means you can use Ionic in your own personal or commercial projects for free. MIT is the same license used by such popular projects as jQuery and Ruby on Rails.

Contribute to Ionic Development

We'd love to have you help improve Ionic. For more information on Contributing, check out our Contributor Guide.

About Ionic

Ionic was built by @helloimben, @adamdbradley, and @maxlynch at Drifty, an independent bootstrapped software company and makers of such fine products as Codiqa and Jetstrap.

Ionic was built to take HTML5 on mobile into the future. We wanted a mobile framework that not only looked and worked great, but was also powerful enough to build the amazing apps the best developers were creating. HTML5's time has arrived. Ionic is the framework that proves it.

We hope you love building with Ionic as much as we loved making it. Read more about why we built Ionic on our blog