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>
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 AppGetting Started with ngCordova
Easy global i18n angularJS language translations for your Angular app
댓글 없음:
댓글 쓰기