#Frequently asked questions
##How do I manage libraries with Bower?
Install a new front-end library using bower install --save to update your bower.json file.
bower install --save lodash
This way, when the Grunt bower-install task is run it will automatically inject your front-end dependencies inside the bower:js block of your app/index.htmlfile.
##Can I manually add libraries?
Of course! If a library you wish to include is not registered with Bower or you wish to manually manage third party libraries, simply include any CSS and JavaScript files you need inside your app/index.html usemin build:js or build:css blocks but outside the bower:js or bower:css blocks (since the Grunt task overwrites the Bower blocks' contents).
##How do I use the Ripple Emulator? Be Advised: Ripple is under active development so expect support for some plugins to be missing or broken.
Add a platform target then run grunt ripple to launch the emulator in your browser.
grunt platform:add:ios
grunt ripple
Now go edit a file and then refresh your browser to see your changes. (Currently experimenting with livereload for Ripple)
Note: If you get errors beginning with Error: static() root path required, don't fret. Ripple defaults the UI to Android so just switch to an iOS device and you'll be good to go.
##Why is Cordova included and how do I use it?
To make our lives a bit simpler, the cordova library has been packaged as a part of this generator and delegated via Grunt tasks. To invoke Cordova, simply run the command you would normally have, but replace cordova with grunt and spaces with : (the way Grunt chains task arguments).
For example, lets say you want to add iOS as a platform target for your Ionic app
grunt platform:add:ios
and emulate a platform target
grunt emulate:ios
or add a plugin by specifying either its full repository URL or namespace from the Plugins Registry
grunt plugin:add:https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
grunt plugin:add:org.apache.cordova.device
grunt plugin:add:org.apache.cordova.network-information
##How do I build assets for Cordova?
Once you're ready to test your application in a simulator or device, run grunt cordova to copy all of your app/ assets into www/ and build updated platform/ files so they are ready to be emulated / run by Cordova.
To compress and optimize your application, run grunt build. It will concatenate, obfuscate, and minify your JavaScript, HTML, and CSS files and copy over the resulting assets into the www/ directory so the compressed version can be used with Cordova.
##How do I configure my icons and splash screens?
Properly configuring your app icons and splash screens to work with Cordova can be a pain to set up, so we've gone ahead and including an after_prepare hook that manages copying these resource files to the correct location within your current platform targets.
To get started, you must first add a platform via grunt platform:add:ios. Once you have a platform, the packaged icons_and_splashscreens.js hook will copy over all placeholder icons and splash screens generated by Cordova into a newly created top-level resources/ directory inside of your project. Simply replace these files with your own resources (but maintain file names and directory structure) and let the hook's magic automatically manage copying them to the appropriate location for each Cordova platform, all without interrupting your existing workflow.
To learn more about hooks, checkout out the README.md file inside of your hooks/ directory.
##What are the benefits of local browser development?
Running grunt serve enhances your workflow by allowing you to rapidly build Ionic apps without having to constantly re-run your platform simulator. Since we spin up a connect server with watch and livereload tasks, you can freely edit your CSS (or SCSS/SASS files if you chose to use Compass), HTML, and JavaScript files and changes will be quickly reflected in your browser.
##How do I add constants?
To set up your environment specific constants, modify the respective targets of the ngconstant task located towards the top of your Gruntfile.
ngconstant: {
options: {
space: ' ',
wrap: '"use strict";\n\n {%= __ngModule %}',
name: 'config',
dest: '<%= yeoman.app %>/<%= yeoman.scripts %>/configuration.js'
},
development: {
constants: {
ENV: {
name: 'development',
apiEndpoint: 'http://dev.your-site.com:10000/'
}
}
},
production: {
constants: {
ENV: {
name: 'production',
apiEndpoint: 'http://api.your-site.com/'
}
}
}
},
Running grunt serve will cause the development target constants to be used. When you build your application for production using grunt compress or grunt serve:compress, the production constants will be used. Other targets, such as staging, can be added, but you will need to customize your Gruntfile accordingly. Note that if you change the name property of the task options, you will need to update your app.js module dependencies as well. If you want to compress and build and use production constants, you will need to first run grunt compress and then use ionic or cordova commands to build, for example: ionic build ios.
##How is this used inside Angular?
A configuration.js file is created by grunt-ng-constant depending on which task target is executed. This config file exposes a config module, that is listed as a dependency inside app/scripts/app.js. Out of the box, your constants will be namespaced under ENV, but this can be changed by modifying the ngconstant targets. It is important to note that whatever namespace value is chosen is what will need to be used for Dependency Injection inside your Angular functions.
The following example shows how to pre-process all outgoing HTTP request URLs with an environment specific API endpoint by creating a simple Angular $http interceptor.
// Custom Interceptor for replacing outgoing URLs
.factory('httpEnvInterceptor', function (ENV) {
return {
'request': function(config) {
if (!_.contains(config.url, 'html')) {
config.url = ENV.apiEndpoint + config.url;
}
return config;
}
}
})
.config(function($httpProvider) {
// Pre-process outgoing request URLs
$httpProvider.interceptors.push('httpEnvInterceptor');
})
##What else does this generator do to help me? While building your Ionic app, you may find yourself working with multiple environments such as development, staging, and production. This generator uses [grunt-ng-constant] (https://github.com/werk85/grunt-ng-constant) to set up your workflow with development and production environment configurations right out of the box.