Please find encoded: January 2016

Sunday 24 January 2016

Post 42: Internationalization ionic app

Create a blank ionic project

Download angular-translate zip-file from here:
https://github.com/angular-translate/bower-angular-translate/releases

Extract and put the angular-translate.min.js file in the following path:
/www/js/angular-translate.min.js

Open www/index.html and add the script tag between bundle.js and app.js
<script src="js/angular-translate.min.js"></script>

Add the plugin:
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-globalization.git

Open /www/js/app.js and insert the following lines:

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngCordova',  'pascalprecht.translate']) .run(function($ionicPlatform, $translate) {

inside run() inside ready() function add this:

if(typeof navigator.globalization !== "undefined") {

                navigator.globalization.getPreferredLanguage(function(language) {

                    $translate.use((language.value).split("-")[0]).then(function(data) {

                        console.log("SUCCESS -> " + data);

                    }, function(error) {

                        console.log("ERROR -> " + error);

                    });

                }, null);

            }

add config:

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

        $translateProvider.translations('en', {

            hello_message: "Howdy",

            goodbye_message: "Goodbye"

        });

        $translateProvider.translations('es', {

            hello_message: "Hola",

            goodbye_message: "Adios"

        });

        $translateProvider.preferredLanguage("en");

        $translateProvider.fallbackLanguage("en");

    });

In index.html you can use it the following way:

<ion-view title="Example">

    <ion-content>

        <h1>{{"hello_message" | translate}}</h1>

        <h2>{{"goodbye_message" | translate}}</h2>

    </ion-content>

</ion-view>

Credits: https://blog.nraboy.com/2014/08/internationalization-localization-ionicframework-angular-translate/

Friday 22 January 2016

Post 41: Play sound/audio in ionic app

In one of my last post I described how to play sound on ionic app. If you have updated your ionic framework to 1.7.x, then chances are that that tutorial isn't working for you anymore, since the cordova-media plugin is not compatible with newer versions of ionic.

That's why I want to show you another way that also works for newer ionic versions:

First create an ionic project

cordova plugin add cordova-plugin-nativeaudio

Install ng-cordova:

bower install ngCordova --save

Go to www/index.html and add this script tag after bundle.js and cordova.js

<script src="lib/ngCordova/dist/ng-cordova.js"></script>

Go to www/js/app.js and inject the dependency "ngCordova":

angular.module('starter', ['ionic', 'ngCordova'])

In your www/index.html file replace this with the body:

<body ng-app="starter">  
    <ion-pane>
      <ion-header-bar>
        <h1 class="title">Native Audio</h1>
      </ion-header-bar>
      <ion-content ng-controller="SoundController as vm">
        <p><button ng-click="vm.play('bass')" class="button icon-left ion-play button-assertive">Play Bass</button></p>
        <p><button ng-click="vm.play('hi-hat')" class="button icon-left ion-play button-balanced">Play Hi-Hat</button></p>
        <p><button ng-click="vm.play('snare')" class="button icon-left ion-play button-energized">Play Snare</button></p>
        <p><button ng-click="vm.play('bongo')" class="button icon-left ion-play button-positive">Play Bongo</button></p>
      </ion-content>
    </ion-pane>
</body>

In your www/js/app.js file add the controller:

.controller('SoundController', ['$ionicPlatform', '$timeout',  '$cordovaNativeAudio', SoundController]);

function SoundController($ionicPlatform, $timeout, $cordovaNativeAudio) {  
    var vm = this;

    $ionicPlatform.ready(function() {

        // all calls to $cordovaNativeAudio return promises

        $cordovaNativeAudio.preloadSimple('snare', 'audio/snare.mp3');
        $cordovaNativeAudio.preloadSimple('hi-hat', 'audio/highhat.mp3');
        $cordovaNativeAudio.preloadSimple('bass', 'audio/bass.mp3');
        $cordovaNativeAudio.preloadSimple('bongo', 'audio/bongo.mp3');
    });

    vm.play = function(sound) {
        $cordovaNativeAudio.play(sound);
    };

    return vm;
}

Go to your /www-folder and create a new folder called "audio". In this audio-volder put in some mp3 files (and name them snare.mp3, bass.mp3, bongo.mp3, etc.).

Build and run your project. Click here to see how to build and run your ionic project.

Credits: http://gonehybrid.com/how-to-add-sound-effects-to-your-ionic-app-with-native-audio/

Post 40: How to check for integer in JavaScript

In JavaScript there is no better way:

var isInt = function (x) {
return (typeof Number(x) === 'number') && (x % 1 === 0);
}

Tuesday 19 January 2016

Post 39: Add audio to ionic app

ionic start IonicProject blank
cd IonicProject
ionic platform add android
cordova plugin add org.apache.cordova.media
ng-cordova.js in your www/js folder

Inject the dependency:
var example = angular.module('starter', ['ionic', 'ngCordova'])

Add a new controller in app.js:
example.controller("ExampleController", function($scope, $cordovaMedia, $ionicLoading) { $scope.play = function(src) { var media = new Media(src, null, null, mediaStatusCallback); $cordovaMedia.play(media); } var mediaStatusCallback = function(status) { if(status == 1) { $ionicLoading.show({template: 'Loading...'}); } else { $ionicLoading.hide(); } } });

in index.html add in the header:

In Index.html add in the body (you have to use "android_asset"):

<ion-content ng-controller="ExampleController"> <button class="button" ng-click="play('/android_asset/www/test.mp3')">Play from file system</button> </ion-content>