A generator for the Ionic Framework
Yeoman generator for creating Ionic hybrid mobile applications using AngularJS and Cordova - lets you quickly set up a project with sensible defaults and best practices.
- Scaffolding projects with Yeoman
- Integrated with the ionic-cli
- Browser LiveReload
- Emulator LiveReload
- Sass stylesheets compilation
- Handles AngularJS dependency injection annotations
- Icons and Splashscreens support
- Cordova plugin management hooks
- Environment Specific Configuration for AngularJS
- Running unit tests
- Code coverage reporting with istanbul
- Bundled ripple emulator
Make a new directory, and
cd into it
mkdir my-ionic-project && cd $_
yo ionic, optionally passing an app name:
yo ionic [app-name]
grunt for building / compressing your Ionic app,
grunt serve for a browser preview, and
grunt serve:compress for a preview of the optimized application.
Make sure you've committed (or backed up) your local changes and install the latest version of the generator via
npm install -g generator-ionic, then go ahead and re-run
yo ionic inside your project's directory.
The handsome devil is smart enough to figure out what files he is attempting to overwrite and prompts you to choose how you would like to proceed. Select
Y for overwriting your
bower.json to stay up-to-date with the latest workflow goodies and front-end packages.
├── Gruntfile.js - Configuration of all Grunt tasks ├── package.json - Dev dependencies and required Cordova plugins ├── bower.json - Lists front-end dependencies ├── config.xml - Global Cordova configuration ├── .gitignore - Best practices for checking in Cordova apps ├── resources/ - Scaffolded placeholder Icons and Splashscreens │ ├── ios/ │ ├── android/ ├── app/ │ ├── index.html - Main Ionic app entry point │ ├── lib/ - Libraries managed by Bower │ ├── scripts/ - Custom AngularJS Scripts │ ├── styles/ - Stylesheets │ ├── templates/ - HTML views ├── platforms/ - Targeted operating systems ├── plugins/ - Native plugins ├── hooks/ - Cordova lifecycle hooks ├── merges/ - Platform specific overrides ├── coverage/ - Istanbul reports ├── test/ - Unit tests │ ├── spec/ ├── www/ - Copied from app/ to be used by Cordova
Run a local development server with built in filesystem watching support integrated with LiveReload so you can develop your Ionic app in a browser. Since this command uses the
ionic-cli under the hood, you can specify any command line flags / options shown here.
$ grunt serve --consolelogs $ grunt serve:compress
Add a supported Cordova platform as a build target for this project.
$ grunt platform:add:ios $ grunt platform:add:android
Install a native Cordova plugin either by registry name or repository URL.
$ grunt plugin:add:https://github.com/driftyco/ionic-plugins-keyboard.git $ grunt plugin:add:org.apache.cordova.device $ grunt plugin:add:org.apache.cordova.network-information
emulate your Ionic app inside a simulator or
run it on a connected device, optionally enabling LiveReload support to supercharge your development speed and enhance productivity. Note: Any changes to native plugins will still require a full rebuild. This command also uses the
ionic-cli under the hood, so these additional flags can be specified.
$ grunt emulate:ios --livereload $ grunt emulate:ios --lc $ grunt emulate:ios --target=iPad -lc $ grunt emulate:android --consolelogs $ grunt run:ios $ grunt run:android
Run your Ionic application files located in
app/ through the concatenation, obfuscation, and minification pipelines and write the optimized assets to the
www/ directory, which allows them to be consumed by either the
ionic command line tools for packaging.
grunt compress to optimize your Ionic app assets and then immediately launches a local development server so that you can preview the compressed application in a browser.
Build your Ionic application for the targeted platform.
$ grunt build:ios --device --release $ grunt build:android --debug
grunt serve or
Launches the configured
karma test running framework using PhantomJS.
Generates a static site containing code coverage reports for your unit tests using Istanbul.
Launch the bundled Ripple emulator by first adding a platform via
grunt platform:add:<platform> and then running this command.
For a Getting Started guide, FAQ, and helpful tips, please see the documentation.