YG's Programming Blog: 10월 2015

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

YG's Programming Blog

2015년 10월 2일 금요일

[ionic-mcs-part01] - create ionic application

Create New Ionic Application

Edit www/index.html

Refactor Code

Edit www/templates/menu.html

Ionic MCS Utility Sample

Edit www/js/app.js

Edit www/templates/about.html

Edit www/templates/preferences.html

Resources

[ionic-mcs-part02] - i18n

Localization

Install angular-translate

Edit www/index.html

Edit www/js/app.js

www/languages/en_US.json

www/languages/ko_KR.json

Edit www/templates/menu.html

{{ 'MENU_TITLE' | translate }}

Result

Resources

프로필

블로그 보관함