Manoj Shrestha's Blog: June 2014

Sunday, June 22, 2014

How to use AngularJS date filter?

date filter
Formats date to a string based on the requested format.

The following example depicts how to format the current date to a specified format.

Code:

<!DOCTYPE html>

<html>

<head>

<title>Using AngularJS Date Filter</title>

</head>

Current Date and Time: {{ today | date:'MM/dd/yyyy @h:mm a' }}

</div>

function DateController($scope) {

$scope.today = new Date();

}

</script>

</body>

</html>

Output:

Current Date and Time: {{ today | date:'MM/dd/yyyy @h:mm a' }}

date:

Formats date to a string based on the requested format.
Usage: {{ date_expression | date : format}}
Date to format either as Date object, milliseconds (string or number) or various ISO 8601 datetime string formats
In the above example, today represents the date_expression which is a Date object to be formatted.
date is the filter keyword

The following is the complete list of all date formats provided by Angular. The formats have been illustrated by displaying the formatted output of the current date.

'yyyy': 4 digit representation of year (e.g. AD 1 => 0001, AD 2010 => 2010)
{{ today | date:'yyyy' }}

'yy': 2 digit representation of year, padded (00-99). (e.g. AD 2001 => 01, AD 2010 => 10)
{{ today | date:'yy' }}

'y': 1 digit representation of year, e.g. (AD 1 => 1, AD 199 => 199)
{{ today | date:'y' }}

'MMMM': Month in year (January-December)
{{ today | date:'MMMM' }}

'MMM': Month in year (Jan-Dec)
{{ today | date:'MMM' }}

'MM': Month in year, padded (01-12)
{{ today | date:'MM' }}

'M': Month in year (1-12)
{{ today | date:'M' }}

'dd': Day in month, padded (01-31)
{{ today | date:'dd' }}

'd': Day in month (1-31)
{{ today | date:'d' }}

'EEEE': Day in Week,(Sunday-Saturday)
{{ today | date:'EEEE' }}

'EEE': Day in Week, (Sun-Sat)
{{ today | date:'EEE' }}

'HH': Hour in day, padded (00-23)
{{ today | date:'HH' }}

'H': Hour in day (0-23)
{{ today | date:'H' }}

'hh': Hour in am/pm, padded (01-12)
{{ today | date:'hh' }}

'h': Hour in am/pm, (1-12)
{{ today | date:'h' }}

'mm': Minute in hour, padded (00-59)
{{ today | date:'mm' }}

'm': Minute in hour (0-59)
{{ today | date:'m' }}

'ss': Second in minute, padded (00-59)
{{ today | date:'ss' }}

's': Second in minute (0-59)
{{ today | date:'s' }}

'.sss' or ',sss': Millisecond in second, padded (000-999)
{{ today | date:'.sss' }}

'a': am/pm marker
{{ today | date:'a' }}

'Z': 4 digit (+sign) representation of the timezone offset (-1200-+1200)
{{ today | date:'Z' }}

'ww': ISO-8601 week of year (00-53)
{{ today | date:'yyyy-MM-dd ww' }}

'w': ISO-8601 week of year (0-53)
{{ today | date:'w' }}

Format string can also be one of the following predefined localizable formats:

'medium': equivalent to 'MMM d, y h:mm:ss a' for en_US locale (e.g. Sep 3, 2010 12:05:08 pm)
{{ today | date:'medium' }}

'short': equivalent to 'M/d/yy h:mm a' for en_US locale (e.g. 9/3/10 12:05 pm)
{{ today | date:'short' }}

'fullDate': equivalent to 'EEEE, MMMM d, y' for en_US locale (e.g. Friday, September 3, 2010)
{{ today | date:'fullDate' }}

'longDate': equivalent to 'MMMM d, y' for en_US locale (e.g. September 3, 2010)
{{ today | date:'longDate' }}

'mediumDate': equivalent to 'MMM d, y' for en_US locale (e.g. Sep 3, 2010)
{{ today | date:'mediumDate' }}

'shortDate': equivalent to 'M/d/yy' for en_US locale (e.g. 9/3/10)
{{ today | date:'shortDate' }}

'mediumTime': equivalent to 'h:mm:ss a' for en_US locale (e.g. 12:05:08 pm)
{{ today | date:'mediumTime' }}

'shortTime': equivalent to 'h:mm a' for en_US locale (e.g. 12:05 pm)
{{ today | date:'shortTime' }}

Sunday, June 15, 2014

How to use AngularJS currency filter?

currency filter

Code:

<!DOCTYPE html>

<html>

<head>

<title>Using AngularJS Currency Filter</title>

</head>

<div>

Enter Amount:

<br>

default currency symbol ($): {{amount | currency}}

<br>

custom currency identifier (€): {{amount | currency:"€"}}

</div>

</body>

</html>

Output:

Enter Amount:
default currency symbol ($): {{currencyAmount| currency}}
custom currency identifier (€): {{currencyAmount| currency:"€"}}

currency:

Formats a number as a currency (i.e. $1,234.56)
Usage: {{ currency_expression | currency : symbol}}
In the above example, amount represents the currency_expression which is the value to be represented as a currency amount. The value is formatted to 2 decimal places.
currency is the filter keyword
"€" is a symbol which is an optional argument. It could be any currency symbols or identifiers.
When no currency symbol is provided, default symbol for current locale is used.

Saturday, June 14, 2014

Bootstrap Login Template Example ( Modal Dialog ) Code

The following login template is one of my favourite and simple bootstrap login forms using modal dialog.

Bootstrap Login Template

CODE:

<!DOCTYPE html>

<head>

<title>Bootstrap Login Template</title>

content="width=device-width, initial-scale=1, maximum-scale=1">

<link

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"

rel="stylesheet">

.modal-footer {

border-top: 0px;

}

</style>

</head>

<body>

<h2>Please sign in</h2>

</div>

<label class="checkbox"> <input type="checkbox"

value="remember-me" /> Remember me

</label>

</form>

</div>

<span class="pull-left"><a href="#">Forgot Password?</a></span>

<span><a href="#">Register</a></span>

</div>

</body>

</html>

Tuesday, June 10, 2014

Can AngularJS have multiple ng-app directives in a single page?

The answer is NO. The ng-app directive is used to auto-bootstrap an AngularJS application. And according to AngularJS Documentation, only one AngularJS application can be auto-bootstrapped per HTML document. I'd like to quote a section from the documentation here:

Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other.

I'm going to show three approaches, latter two being similar, to deal with the issue.

Before that let's take a look what the actual problem is.

<!DOCTYPE html>

<html>

<head>

<title>Multiple ngApp does not work</title>

</head>

<body>

</div>

</div>

var firstApp = angular.module('firstApp', []);

firstApp.controller('FirstController', function($scope) {

$scope.name = "I'm the first app.";

});

var secondApp = angular.module('secondApp', []);

secondApp.controller('SecondController', function($scope) {

$scope.name = "I'm the second app.";

});

</script>

</body>

</html>

As you can see, we defined two separate ng-app directives named firstApp and secondApp. And we also defined two controllers one for each ng-app module and each having its own scope variable name. As the documentation states, only the first ng-app module is auto-bootstrapped. So, in this case, only the firstApp module works as expected while the secondApp module does not. As a consequence, the browser renders the above page as follows:

1# I'm the first app.

2# {{ name }}

Now that we discussed the problem, let's move ahead and see how to use alternatives.

Method 1: Injecting modules as dependencies of the root app

The idea here is to define only one top level ng-app in a root element like in <html> or <body>, define other two as modules and inject them as dependencies of the root app.

<!DOCTYPE html>

<html>

<head>

<title>Injecting modules as dependencies of the root app </title>

</head>

</div>

</div>

// passing the two modules as dependencies of the root module

var rootApp = angular.module('rootApp', ['firstApp','secondApp']);

var firstApp = angular.module('firstApp', []);

firstApp.controller('FirstController', function ($scope) {

$scope.name = "I'm the first app.";

});

var secondApp = angular.module('secondApp', []);

secondApp.controller('SecondController', function ($scope) {

$scope.name = "I'm the second app.";

});

</script>

</body>

</html>

This will give the desired result:

1# I'm the first app.

2# I'm the second app.

Method 2: Manual bootstrapping the second module

In this method, we are going to leave the first ng-app as it is so that it is auto-bootstrapped by Angular. Whereas for the second ng-app, we're going to a manual bootstrapping method.

<!DOCTYPE html>

<html>

<head>

<title>Manual bootstrapping the second module</title>

</head>

<body>

</div>

</div>

var firstApp = angular.module('firstApp', []);

firstApp.controller('FirstController', function($scope) {

$scope.name = "I'm the first app.";

});

var secondApp = angular.module('secondApp', []);

secondApp.controller('SecondController', function($scope) {

$scope.name = "I'm the second app.";

});

// manually boostrapping the second app

var secondDiv = document.getElementById('secondApp');

angular.element(document).ready(function() {

angular.bootstrap(secondDiv, [ 'secondApp' ]);

});

</script>

</body>

</html>

Method 3: Manual bootstrapping both modules

As I already mentioned, this method is similar to the previous one. Here, we don't rely on Angular's auto-bootstrapping to initialize the modules. We'll use manual bootstrapping method to initialize both modules as depicted in the example below:

<!DOCTYPE html>

<html>

<head>

<title>Manual boostrapping both modules</title>

</head>

<body>

</div>

</div>

var firstApp = angular.module('firstApp', []);

firstApp.controller('FirstController', function($scope) {

$scope.name = "I'm the first app.";

});

var secondApp = angular.module('secondApp', []);

secondApp.controller('SecondController', function($scope) {

$scope.name = "I'm the second app.";

});

var firstDiv = document.getElementById('firstApp');

var secondDiv = document.getElementById('secondApp');

// manually boostrapping the second app

angular.element(document).ready(function() {

angular.bootstrap(firstDiv, [ 'firstApp' ]);

angular.bootstrap(secondDiv, [ 'secondApp' ]);

});

</script>

</body>

</html>

Subscribe to: Posts ( Atom )