Skip to content

Instantly share code, notes, and snippets.

@dwayne

dwayne/00-ionic-notes.md

Last active January 31, 2025 09:00
Show Gist options
  • Save dwayne/308ed0f19eb1504aca43 to your computer and use it in GitHub Desktop.
Save dwayne/308ed0f19eb1504aca43 to your computer and use it in GitHub Desktop.
Download ZIP
My notes on the Ionic Framework.
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

Default Plugins

These plugins are added to an initial Ionic application:

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

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

  1. 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.

  2. 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

Raw
ionic.bash
# Useful Ionic Aliases
alias iba='ionic build android'
alias ira='ionic run android'
alias ibra='iba && ira'
@dwayne
Copy link
Author

dwayne commented Oct 13, 2014

Devgirl's Weblog

@dwayne
Copy link
Author

dwayne commented Oct 13, 2014

What I learned building an app with Ionic Framework

@jdnichollsc
Copy link

Hi friend, see my template 👯 https://github.com/jdnichollsc/Ionic-Starter-Template

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment