ionic

Advanced HTML5 Mobile App Framework. A beautiful front-end framework for developing hybrid mobile apps in HTML5
23 people use it
Author: 3171503? driftyco
Submitted by: 11214? mlynch

The best place to start with Ionic is our documentation page.

Note: Ionic currently best supports iOS 6+ and Android 4.1+, with limited support for Android 2.3. Ionic is changing quickly as we work towards the beta.

What is Ionic?

Ionic is the open source HTML5 Mobile Framework for building amazing, cross-platform hybrid native apps with HTML, JavaScript, and CSS. Just like this one:

Weather Demo

We built Ionic because we wanted a framework that focused on building hybrid native apps, rather than mobile websites. We wanted this framework to be obsessive about great design and performance. A framework that left the past behind and focused on the future where mobile devices could make HTML5 feel native.

It's important to realize that Ionic is not a replacement for frameworks used for building mobile web apps. There are a lot of great solutions that work well for websites, like jQuery Mobile.

Ionic is also not a good solution if you need to support older generation devices. Our compatibility starts at iOS 6 and Android 4.1. We will never support versions earlier than those. This is a framework for the future. Learn more: Where does the Ionic Framework fit in?

Quick Start

To start using ionic, you have two options: copy over the built JS and CSS files, or use the ionic tool (ionic-cli) which can be installed through npm:

Then, you can start a new ionic project by running:

Manual Start

  • Download the latest stable release from:
    • The release folder of this repository
    • The Ionic CDN: Latest Release
    • bower install ionic
  • Download the bleeding edge just-from-master release from:
    • The Ionic CDN: Nightly Build
    • Look in the ionic-bower Repository for the latest version, and do for example bower install driftyco/ionic-bower#0.9.23-alpha-652 (bower install ionic will have the latest available soon)

Once you have a release, use js/ionic.js, js/ionic-angular.js, and css/ionic.css.

For most cases, you'll need AngularJS as well. This is bundled in js/angular/ and js/angular-ui-router/.

Demos

Community

Authors

Max Lynch

Ben Sperry

Adam Bradley

Andy Joslin

Development

  • npm install && npm install -g gulp protractor to setup
  • (if you wish to run end-to-end tests): webdriver-manager update --chrome to install the webdriver.
  • gulp or gulp build to build
  • gulp docs to generate docs (read Documentation below for how to test docs locally).
  • gulp build --release to build with minification & strip debugs
  • gulp watch to watch and rebuild on change
  • gulp karma to test one-time
  • gulp karma-watch to test and re-run on source change
  • gulp protractor to test e2e tests locally
  • gulp cloudtest to run e2e tests in the cloud

Documentation

  • To test documentation, follow these steps:
    1. Clone ionic-site to ./tmp/ionic-site - this is where the gulp docs task builds to. ./tmp is the folder that travis uses to do all of its tasks.
    2. mkdir tmp && git clone git@github.com:driftyco/ionic-site tmp/ionic-site
    3. Make jekyll rebuild whenever you change the site.
    4. cd tmp/ionic-site && jekyll serve -w
    5. Go back to project root and build the docs
    6. gulp docs
    7. Open localhost:4000 and see your changes! Re-run gulp docs again whenever you change something, and jekyll will update the site.

Commit Conventions

Pushing New Release of Ionic

  • Almost all of the logic for releasing Ionic is done on the Travis server
  • To push a new release:
    1. Update package.json version to new version
    2. Update package.json codename to new codename
    3. Generate changelog with gulp changelog and make sure it is OK
    4. Commit these and push to master
  • Travis will detect that this commit changed the version in package.json and push out all necessary for this new release (tags, release files, site config, ...)

LICENSE

Ionic is licensed under the MIT Open Source license. For more information, see the LICENSE file in this repository.

comments powered by Disqus
This page was last updated almost 3 years ago.