Ionic 2 is the next generation of Ionic, the open-source mobile app development SDK that makes it easy to build top quality mobile apps with web technologies.
Ionic 2 is based on the new 2.x version of AngularJS, and comes with many significant performance, usability, and feature improvements.
See Adam Bradley's Building apps with Ionic 2 slides for a quick overview of Ionic 2.
To try Ionic 2 today, visit the Ionic 2 Docs. We would love any feedback you have or to know when you encounter issues, by filing an issue report on this repo.
There are a few real Ionic 2 apps in the wild. The most complete is the Ionic Conference App, a perfect starting point for building your own conference app.
We are also building out a number of starter projects, including the Ionic 2 starter:
https://github.com/driftyco/ionic2-starter
The ionic-framework package comes with both frontend dependencies, located in 'dist', and a Node API, located in 'tooling'.
css/- the Ionic CSS stylesheet
fonts/- Ionicons and Roboto fonts
js/ionic.jsthe Ionic module, in System register formationic.bundle.jsthe Ionic bundle, contains:- es6-module-loader.js
- system.js
- angular2.dev.js
- router.dev.js (angular2 router)
- ionic.js
- web-animations.min.js
web-animations.min.jsweb animations API polyfill
src/es5- Ionic ES5 source files in both CommonJS and System module formatssrc/es6- Ionic ES6 source filessrc/ts- Ionic TypeScript source files (typings still missing)scss- Ionic Sass source files
At the moment, ionic-framework exports one function, generate, that can be used to scaffold new pages in an Ionic app. It is used by the Ionic CLI's generate command.
generate(config)
Creates the js, html, and scss file for a new page, based on the supplied Generator.
- config (Object) Config object, with the following options:
appDirectory- root directory of the Ionic projectgenerator- which generator to use, default ispage.name- the name of the component to generate.
Example:
var ionic = require('ionic-framework');
ionic.generate({ appDirectory: process.cwd(), generator: 'tabs', name: 'MyTabsPage' })
page, a blank pagetabs, a page with tab navigation