Ionic starter project based on generator-gulp-angular generated code. When in doubt how to use this project reference Gulp Angular Generator documentation.
Install the necessary dependencies in the project folder.
$ npm install $ bower install
App module name is "starter". If you want to use this as a skeleton for your Ionic project
- Find all occurrences of
starterin JS and JSON files
starterthem with your project name.
ng-app="starter"with your project name.
Since Ionic 2 and Angular 2 are just around the corner I don't see the need to create a Yeoman generator.
- The project uses "Best Practice Recommendations for Angular App Structure". It's important to read the recommendations. Don't omit this step.
- Unit tests are named *.specs.js and *.mock.js and are located in the respective components folders.
- You'll have the default Ionic Starter Project implemented in the Angular best practices. Do follow this structure. You'll find it rewarding when working on large projects.
Warning: the first file of a type in a folder is often missed by the Gulp watch, try to relaunch Gulp if it happens.
List of features included in the project:
- bower to manage dependencies
- ng-cordova (no cordova plugins installed, only the js library)
- Unit tests with Karma and Jasmine
Bower JSON is updated to include all the necessary overrides for the project to work out of the box without the need for you to change anything.
Use Gulp tasks
gulp buildto build an optimized version of your application in /dist
gulp serveto launch a browser sync server on your source files
gulp serve:distto launch a server on your optimized application
gulptest to launch your unit tests with Karma
gulp test:autoto launch your unit tests with Karma in watch mode
gulp protractorto launch your e2e tests with Protractor
gulp protractor:distto launch your e2e tests with Protractor on the dist files
More information on the gulp tasks in Gulp Angular Generator User Guide .
You can test locally by using
gulp serve. It runs with BrowserSync.
There is a mocked cordova.js in
src/mocks folder. It will be served instead of the original cordova.js when testing in the browser.
When developing a Cordova app you'll need CORS turned off. On Chrome you can do this in 2 ways:
--disable-web-security --user-data-dirto you Chrome shortcut. Before testing kill all chrome tasks and then run the browser again
Install a CORS disabling extension from the Chrome Store.
You'll notice that
www folder doesn't exist. This folder is required for your Cordova app to run.
gulp build to generate the
You'll need to always run
gulp build before running ionic run or build tasks.
$ gulp build $ ionic run ios
There is included support for angular-translate if you need localization. To use angular-translate
- Install the library:
$ bower install angular-translate --save
- For each language create a locale JSON. Name format is
gulp serve. There is already an existing
You don't need to load the JSON files manually.
Mocking Cordova Plugins
As already mentioned, there is a mocked cordova.js -
Mock any Cordova module you need in this file. This will ensure you can continue testing in the browser without errors.
There is one mocked Cordova plugin used by $cordovaAppVersion.