dwayne/00-ionic-notes.md

## 00-ionic-notes.md

      
    Raw
  

              00-ionic-notes.md
            
          
    Ionic Notes

Ionic: Advanced HTML5 Hybrid Mobile App Framework. It is built with HTML5 technologies on Apache Cordova and AngularJS.

Ionic's ultimate goal is to make it easier to develop native mobile apps with HTML5, also known as Hybrid apps.

Learn Ionic. Read the Docs and join the Forum. Keep up to date with the Blog. View the Source.
Resources for Getting Started


Getting Started
Ionic Crash Course

Node.js is becoming one of the more popular ways to build command-line utilities
README.md useful in git repo or otherwise to explain the project
bower.json for specifies script dependencies, see Bower. Make it easy to update ionic without having to change your project
config.xml a config file for Cordova
gulpfile.js Gulp is a JavaScript build tool similar to Grunt, it's (Gulp) a newcomer that's getting popularity and they like it
hooks/ can be ignored, but it's a Cordova folder in case you were interested
Other files/folders that can be ignored: ionic.project, package.json
platforms/ and plguins/ are both Cordova folders
www/ most important folder, it's the root of your application
The development cycle

www/js/app.js is the starting point for our app, so start with this
Specify the routes using Angular UI Router
The routes then specify the templates and controllers to use


You can use Sass to customize look & feel


Debugging AngularJS Apps from the Console

Angular UI Router


UI Router Wiki
UI Router API Reference
$urlRouterProvider

Default Plugins

These plugins are added to an initial Ionic application:

org.apache.cordova.device
org.apache.cordova.console
ionic-plugins-keyboard

Questions


How to build a custom ready-made app template?

Contribution Ideas


Show how to install node.js on Ubuntu 14.04
Show how to install the Android SDK on Ubuntu 14.04
Show how to speed up the Android emulator

Resources


Apache Cordova
Apache Cordova Core Plugin APIs
Apache Cordova Plugins Registry
Ionic on CodePen


## icons-and-splash-screens.md

      
    Raw
  

              icons-and-splash-screens.md
            
          
    Icons and Splash Screens

Icons for Android

Iconography
We simply need to replace the default Android icons with our custom icons.

platforms/android/res/drawable/icon.png - 96x96
platforms/android/res/drawable-ldpi/icon.png - 36x36
platforms/android/res/drawable-mdpi/icon.png - 48x48
platforms/android/res/drawable-hdpi/icon.png - 72x72
platforms/android/res/drawable-xhdpi/icon.png - 96x96

N.B. It is not the case that you can always create the 96x96 image and then scale to get the others. Especially when the icon has text.
Splash Screen For Android


Add the SplashScreen and SplashScreenDelay preferences.
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="10000" />

N.B. The SplashScreenDelay should be the worst-case expected start time.


Replace the default splash screens with your custom splash screens.

Portrait Mode

platforms/android/res/drawable-port-ldpi/screen.png - 200x320
platforms/android/res/drawable-port-mdpi/screen.png - 320x480
platforms/android/res/drawable-port-hdpi/screen.png - 480x800
platforms/android/res/drawable-port-xhdpi/screen.png - 720x1280


Landscape Mode

platforms/android/res/drawable-land-ldpi/screen.png - 320x200
platforms/android/res/drawable-land-mdpi/screen.png - 480x320
platforms/android/res/drawable-land-hdpi/screen.png - 800x480
platforms/android/res/drawable-land-xhdpi/screen.png - 1280x720


As a best practice, the splash screen should be present only as long as necessary. When your app has started and the webview has loaded, your app should hide the splash screen so that your main view is visible as soon as it is ready.
$ cordova plugin add org.apache.cordova.splashscreen
angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // ...
    // Hide the splash screen as soon as the device is ready
    if(window.navigator && window.navigator.splashscreen) {
      window.navigator.splashscreen.hide();
    }
  });
});
How to force an orientation?

To force an orientation you need to set the orientation preference in config.xml.
<preference name="orientation" value="portrait" />
<!-- or -->
<preference name="orientation" value="landscape" />
Resources


Icons and Splash Screens
Customizing the Splash Screen
What splash screen sizes do you use and how to you incorporate them in your project?
A simple guide to 9-patch for Android UI
Draw 9-patch


## ionic.bash
# Useful Ionic Aliases
alias iba='ionic build android'
alias ira='ionic run android'
alias ibra='iba && ira'
	# Useful Ionic Aliases
	alias iba='ionic build android'
	alias ira='ionic run android'
	alias ibra='iba && ira'