Tutorials Archives - Page 2 of 2

Simple Method to Localize your Angularjs Project

Localize your Angularjs Project is so simple, Angularjs has its own l10n & i18n scripts which are responsible for localizing the date, number and currency into your project but it has some restrictions with it. If you want to load specific locale library from angular js it can be done it by adding the corresponding locale via the script tag. But in case if you want to change the locale or language inside the application while it is running without reloading the page then here comes a simple solution.

Mission

The mission is to implement localization into the project without injecting any third party modules “angular-translate” into our application.

Mission Accomplished

Now am going to brief how I implemented localization manually

Creating resource.json for the different language which holds all your translation as a json object.
Get the JSON data using “$resource” and assign it to an object under “$rootScope”.
Copy new locale object of corresponding to the language to $locale.

Creating separate resource JSON

I created a separate folder which holding the localization object for the different object. The final level holds the name of the Locale Id, which is going to decide in what language our application renders.

This is how the folder Structure for resource.json created

This resource.json holds all the static value of my app. In all my HTML I use the key to rendering corresponding value.

whenever the user changes the language I get the unique language ID and make a $resource call and get the appropriate resource.json to render the values in selected language.

The same resource.json holds my locale object which is responsible for the date, number & currency formats.

Angular Js localization module on GitHub

Access the above mention URL and open the required language JS and copy the locale object from corresponding js to your resource.json

sample resource.json with Static & locale values for the German language.

{
 "indexPage": {
    "welcomeNote": "Willkommen bei icodefy",
    "followUs": "Folge uns"
    },
 "homeMenu": {
    "home": "Zuhause",
    "aboutUs": "Über uns"
    },
"locale": {
"DATETIME_FORMATS": {
"AMPMS": [
"vorm.",
"nachm."
],
"DAY": [
"Sonntag",
"Montag",
"Dienstag",
"Mittwoch",
"Donnerstag",
"Freitag",
"Samstag"
],
"ERANAMES": [
"v. Chr.",
"n. Chr."
],
"ERAS": [
"v. Chr.",
"n. Chr."
],
"FIRSTDAYOFWEEK": 0,
"MONTH": [
"Januar",
"Februar",
"M\u00e4rz",
"April",
"Mai",
"Juni",
"Juli",
"August",
"September",
"Oktober",
"November",
"Dezember"
],
"SHORTDAY": [
"So.",
"Mo.",
"Di.",
"Mi.",
"Do.",
"Fr.",
"Sa."
],
"SHORTMONTH": [
"Jan.",
"Feb.",
"M\u00e4rz",
"Apr.",
"Mai",
"Juni",
"Juli",
"Aug.",
"Sep.",
"Okt.",
"Nov.",
"Dez."
],
"STANDALONEMONTH": [
"Januar",
"Februar",
"M\u00e4rz",
"April",
"Mai",
"Juni",
"Juli",
"August",
"September",
"Oktober",
"November",
"Dezember"
],
"WEEKENDRANGE": [
5,
6
],
"fullDate": "EEEE, d. MMMM y",
"longDate": "d. MMMM y",
"medium": "dd.MM.y HH:mm:ss",
"mediumDate": "dd.MM.y",
"mediumTime": "HH:mm:ss",
"short": "dd.MM.yy HH:mm",
"shortDate": "dd.MM.yy",
"shortTime": "HH:mm"
},
"NUMBER_FORMATS": {
"CURRENCY_SYM": "\u20ac",
"DECIMAL_SEP": ",",
"GROUP_SEP": ".",
"PATTERNS": [{
"gSize": 3,
"lgSize": 3,
"maxFrac": 3,
"minFrac": 0,
"minInt": 1,
"negPre": "-",
"negSuf": "",
"posPre": "",
"posSuf": ""
}, {
"gSize": 3,
"lgSize": 3,
"maxFrac": 2,
"minFrac": 2,
"minInt": 1,
"negPre": "-",
"negSuf": "\u00a0\u00a4",
"posPre": "",
"posSuf": "\u00a0\u00a4"
}]
},
"id": "de-de",
"localeID": "de_DE"
}
}

Get resource.json Data using $resource and copy to $locale

Whenever the user changes the value in the language dropdown I call the appropriate file URL using $resource request and get the resource.json and reassign it back the $rootScope.l10n which hold all the static value of the application.

Here $rootScope.lang is the value bind from the language dropdown which is changed by user.

$resource('/app/l10n/' + $rootScope.lang + '/resources.json')
  .get(function (data) {
            $rootScope.l10n = data;
            // inject LocaleFactory in controller
            LocaleFactory.setLocale($rootScope.l10n.locale);
        });

LocaleFactory is created for the component reusability. The angular.copy function can also call directly.

.factory('LocaleFactory', function ( $locale ){
 return {
  setLocale: function (currentLocaleObj) {
  angular.copy(currentLocaleObj, $locale);
 }
};

Drop your valuable comments and improvement suggestions in the comment section.

Turn Google Bar chart into Tornado Chart (Butterfly Chart)

Google chart visualization provide multiple varieties of charts to addressing your data visualization needs. The good things about the Google chart are it had lots of customization option and also it is absolutely free to integrate and use with your web application. Google chart includes lots of inbuilt customization options, these options allow you have the better visualization. Even though it doesn’t have any Tornado chart in its library. But we can customize the google bar chart into Tornado Chart with some work around.

As I got unique requirement from one of the projects, which is a rating and review kind of stuff developed with HTML5 & Jquery for frontend and Laravel 5 & SQL for the backend services.

Mission

Here mission is to show the user’s top 3 positive & negative ratings in a single chart. That Chart contains most liked components on its right and most disliked element on its left along with its average rating and element name as a label. While creating it with the google bar chart the challenge we faced is to make positive and negative values bar at the same level as shown in the figure below.

Mission Accomplished

While implementing google bar chart with negative values it’s not displayed as expected. so we need a workaround to make the chart look like as expected. By default, it displays the chart as shown below with positive and negative values at different levels of the y axis.

Default google chart with negative values

Work Around in Google Bar Chart

To make this default bar chart to visualize like a required Tornado chart (Butterfly Chart) we need to do some work around. I will explain those option attribute added to the default chart option.

you can refer the JS part of the code snippet below in which the variable “option” inside “drawbarChart” function holds the additional options for chart visualization.

If you refer that variable in which we added the “isStacked” attribute to make the negative and positive values at the same level

isStacked: true,

we are getting data in ascending order from backend which holds smaller value at the first. But as per the requirement, we need to show the top rated value at first in the google Tornado chart. For invert the chart value we added the another attribute to the option “vAxis” object.

vAxis: {
direction: -1 ,
}

Code Snippet

See the Pen Customize Google Barchart into Tornado Chart (Butterfly Chart) by icodefy (@icodefy) on CodePen.

You can find the working code snippet above. Our comment box is open. Drop your valuable comments

Post Feeds to Facebook wall from Web / Mobile Application.

Under this topic, Am sharing that how I implemented a functionality to post feed to users Facebook wall. I used javascript HTTP post method and Facebook Graph API to achieve this.

Am taking a hybrid mobile application was developed using Ionic and AngularJs as an example. That application has the option to share user check-ins, favorites & activity kind of stuff.

Mission

The mission is to post the recent activity of the user to the Facebook wall if share to Facebook option is enabled. The another task is to display posted via “App_Name” and the link to the respective web page in the bottom of the feed.

Mission accomplished

To accomplish the mission of posting the user data to Facebook wall I used the HTTP post method and the Facebook Graph API as I mentioned above.

Code snippets

try {
 $cordovaFacebook.getLoginStatus()
 .then(function(success) {
   // save access_token
   var accessToken = success.authResponse.accessToken;
   var app_id = "Your App ID";
   var content = '&message=YOUR_CUSTOM_MESSAGE&link=YOUR_TARGET_LINK&caption=POST_VIA_NAME&picture=PICTURE_URL';
   var url = "https://graph.facebook.com/me/feed?app_id=" + app_id + "&access_token=" + accessToken + content;
   $http.post(url).then(function(response) {
    // success action
   });
  });
} catch (_error) {
  // Error action
}

The above example of the application using Ionic & AngularJS

Note: you can use the url variable on any HTTP post or ajax calls

Code Brief

Getting the user login status before posting the feed

on success am getting the user auth token from facebook.

app_Id = facebook developer application ID.
YOUR_CUSTOM_MESSAGE : The message to display in the feed
YOUR_TARGET_LINK: The URL to navigate if the user click on the Facebook post
POST_VIA_NAME : Application / Website name.
PICTURE_URL: URL of the picture to post along with message

constructing an URL to use with HTTP post method.

Call HTTP post method. Do the success action id the call succeed else it end with “Error action”.

Drop your valuable comments in the Comment box.