Follow

Few tips from our Ionic & Angular JS experience

1. Screen Resize

IONIC allows to adjust the screen height whenever the current view is updated, either by loading a new screen or by inducing dynamic HTML. If the screen height adjustment is not handled properly, user will perceive a long delay before they can scroll to the end of the view. It is observed that; such height adjustment can take up to 10 to 15 seconds which is bad UX. To handle this gracefully, snippet similar to the below can be used, where ‘.element’ has to be replaced with the actual Id/CSS class name of the UI element.

This code will direct scrollview to adjust the size of the container.

2. Home Screen – Prevent Back Navigation

It is common practice to present a login screen to authenticate before accessing the main features of the app. When the user is authenticated, login screen should not be visible unless they logout first. But, login screen can still be visible even when the user didn’t logout:

  • By tapping on back button on header.
  • Tapping the device back button (applicable to Android devices only).

Simple code can be used to prevent the backward navigation when the user is going back to home screen.

3. iOS 9 and Radio Button Issue

On iOS 9 devices, selection of radio button has an issue when using IONIC version lower than 1.1.1. Radio button will not show the selected state, to fix this download the files: ionRadio.js and radio.css from https://gist.github.com/mlynch/064d27912b511a63caa3.

Replace all ion-radio tags with ion-radio-fix, which should fix the Radio Button selection issue in iOS 9.

4. OAuth and Unauthorized Access Error

APIs exposed by Social Networking Sites don’t accept tokens such as Authorization. If a request contains such token, usually they are not honored with a message: Unauthorized access error

ang_01

Authorization token has to be removed from the request header, which can be done with the help of below code:

After deleting the token from header, it should look like below.

ang_02

5. IONIC and Styling Based on Mobile Platform

IONIC exposes utility methods to determine which platform the mobile device is on: Android / IOS / Windows. Based on that further customizations can be implemented to mimic the styles of the platform.

This code will return the value as true/false

This will return what kind of platform the app is currently installed on.

5.1 Use different fonts as per Mobile Platform :

It’s very easy to define fonts according to the device’s platform. Consider a case where you want to use Corbel Font on Android and Calibri in iOS:

That’s all!!! Only caveat is that the selected font should be available on the target mobile device. One way to tackle is to include the Font in your solution itself.

5.2 Styling with Angular JS:

It’s synch to retrieve the platform using Angular JS code:

And then use that to style the UI:

Above piece of code applies the class: tabs-positive only when the platform equals Android, but the same piece of code can be adjusted to other platforms quite easily.

6. Angular JS Filters

Angular JS provides filters to transform the data.

6.1 Currency: Format a number to a currency format.

Ex 1:
<h1>Price: {{ price | currency }}</h1>
$scope.prices = 20;
Result : Price : $20.00

Ex 2:
In Html:
{{ price | currency : $ : 0}}
Result : Price : $ 100

In JS :
$filter(‘currency’)(amount, symbol, fractionSize)
 Result : Price : $ 100

6.2  Date: Format a date to a specified format.

Ex :
In Html:
<span>{{1288323623006 | date:’yyyy-MM-dd HH:mm:ss Z’}}</span>
Result : 2010-10-29 09:10:23 +0530

In JS:
$filter(‘date’)(1288323623006 , yyyy-MM-dd HH:mm:ss Z, UTC/GMT )
Result : 2010-10-29 09:10:23 +0530

6.3  Lowercase: Format a string to lower case.

Ex :
In Html:
Syntax: {{ lowercase_expression | lowercase}}
{{ ABCDEF | lowercase}}
Result : abcdef

In JS:
Syntax: $filter(‘lowercase’)()
$filter(‘lowercase’)(ABCDEF )
Result : abcdef

6.4  Number: Format a number to a string.

Ex :
In Html:
Syntax: {{ number_expression | number : fractionSize}}
{{ 20.37589 | number : 3}}
Result : 20.375

In JS:
Syntax: $filter(‘number’)(number, fractionSize)
$filter(‘number’)(20.37895, 3)
Result : 20.375

6.5  orderBy: Orders an array by an expression.

Ex:
In Html:
Syntax: {{ orderBy_expression | orderBy : expression : reverse : comparator}}
{{ friend in friends | orderBy : ‘-age’}}

In JS:
Syntax: $filter(‘orderBy’)(collection, expression, reverse, comparator)
$filter(‘orderBy’)(friends , expression, reverse)

6.6  Uppercase: Format a string to upper case.

Ex:
In Html:
Syntax: {{ uppercase_expression | uppercase}}
{{ abcdef | uppercase}}
Result : ABCDEF

In JS:
Syntax: $filter(uppercase)()
$filter(uppercase)(abcdef )
Result : ABCDEF

About the Author:
Anvesh.P, has one year of experience in Ionic framework. He loves to build hybrid apps and see them work simultaneously on different mobile operating systems and various mobile models.

Are you interested? follow us and get notified of new posts

3 thoughts on “Few tips from our Ionic & Angular JS experience

  1. Nice blog. It has explained useful tips for us. I have got issue with OAuth and Unauthorized Access Error, it helped me easily to get rid of issue.

Leave A Reply

eight + 19 =