2015년 10월 2일 금요일

[ionic-mcs-part01] - create ionic application


Over a series of articles, I am going to show you how to develop an ionic mobile app using Oracle MCS(Mobile Cloud Service) APIs such as Platform APIs including storage services, user management services and push notification services and Custom APIs which are implemented by mobile developers.

In this article, I am going to tell you how to create a simple ionic app that has multiple languages feature and app preferences feature.

Create New Ionic Application


$ ionic start MCSSample sidemenu --id com.archnal.mobile.MCSSample --appname 'MCS Sample'

$ cd MCS-Sample

$ ionic platform add android

$ ionic platform list

$ ionic run

$ bower install ngCordova --save


Edit www/index.html


<!DOCTYPE html>
<html>
  <head>
    
    
    

    
    

    

    
    

 
 

 

    
    

    
    
    
  </head>

  <body ng-app="starter">
    
  </body>
</html>
Notice line 21. ngCordova should be between ionic.bundle.js and cordova.js reference. This is very important.


Refactor Code

Edit www/templates/menu.html



  
    
      
      

      
        
      
    
    
  

  
    
      

Ionic MCS Utility Sample

About Login Preferences Logout

Edit www/js/app.js



// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a  attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

    .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  })

  .state('app.about', {
    url: '/about',
    views: {
      'menuContent': {
        templateUrl: 'templates/about.html'
      }
    }
  })

  .state('app.preferences', {
      url: '/preferences',
      views: {
        'menuContent': {
          templateUrl: 'templates/preferences.html'
        }
      }
    });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/about');
});


Edit www/templates/about.html



 
 



Edit www/templates/preferences.html




 
 







Resources

Starting an Ionic App
Getting Started with ngCordova
Easy global i18n angularJS language translations for your Angular app

[ionic-mcs-part02] - i18n


Localization




Install angular-translate


$ bower install angular-translate 

$ bower install angular-translate-loader-static-files


Edit www/index.html



    

    
    
    

add two java script files right after ionic.bundle.js



Edit www/js/app.js


// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a  attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'pascalprecht.translate'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider, $translateProvider) {
    $translateProvider.useStaticFilesLoader({
      prefix: 'languages/',
      suffix: '.json'
    });
    //$translateProvider.preferredLanguage('ko_KR');
    $translateProvider.determinePreferredLanguage();

  $stateProvider

    .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  })

  .state('app.about', {
    url: '/about',
    views: {
      'menuContent': {
        templateUrl: 'templates/about.html'
      }
    }
  })

  .state('app.preferences', {
      url: '/preferences',
      views: {
        'menuContent': {
          templateUrl: 'templates/preferences.html'
        }
      }
    });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/about');
});



In the above source code, at the line 7, please notice that 'pascalprecht.translate'  is added. And you should take a close look at from line 25 to 31. At Line 25, don't miss that $translateProvider is injected as a function parameter. In this case, you need some json files to handle multi-languages.

I will add two json files that contain local messages. If you need to support some other languages, you can add

  • www/languages/en_US.json
  • www/languages/ko_KR.json


Those JSON files look like as follows



www/languages/en_US.json


{
  "MENU_TITLE": "Ionic MCS Utility Sample",
  "MENU_ABOUT": "About",
  "MENU_PREFERENCES": "Preferences",
  "MENU_LOGIN": "Login",
  "MENU_LOGOUT": "Logout"

}


www/languages/ko_KR.json


{
  "MENU_TITLE": "Ionic MCS Utility Sample",
  "MENU_ABOUT": "About",
  "MENU_PREFERENCES": "환경설정",
  "MENU_LOGIN": "로그인",
  "MENU_LOGOUT": "로그아웃"

}


You might not understand Korean labels, but don't worry about it. I believe you can change it into your own language. Anyway now let's apply localised message to our mobile app.

Edit www/templates/menu.html




  
    
      
      

      
        
      
    
    
  

  
    
      

{{ 'MENU_TITLE' | translate }}

{{ 'MENU_ABOUT' | translate }} {{ 'MENU_LOGIN' | translate }} {{ 'MENU_PREFERENCES' | translate }} {{ 'MENU_LOGOUT' | translate }}

You can see {{ 'MENU_TITLE' | translate }} at line number 17 and it means that the value of 'MENU_TITLE' saved in {langKey}.json file in www/languages directory will be shown on the screen of your phone.


Result

Menu Labels when you set the language configuration of your phone as "Korean"

Menu labels when you set the language configuration of your phone as "English"


Resources


Easy global i18n angularJS language translations for your Angular app