SINGLE PAGE APPLICATION 5

ENG. ISMAIL ENJRENY

Filters

• Filters allow you to declare how to transform data for display to the user within an interpolation in your template.

{{ expression | filtername : parameter1 : ...parametern }}

• You’re not limited to the bundled filters, and it is simple to write your own

{{12.9 | currency}} $12.90

Filters (cont.)

• Formatting Filters: AngularJS comes with a set of built-in formatting filters which can be used in conjunction with the interpolation directive, and with ng-bind

• date

• currency

• number

• lowercase

• uppercase

• json

• Array Filters

• limitTo

• filter

• orderBy

Filters - date (cont.)

• Formats date to a string based on the requested format

{{ date_expression | date : format : timezone}}

• Examples:

• <span>{{1288323623006 | date:'medium'}}</span> -> Oct 29, 2010 6:40:23 AM

• <span>{{1288323623006 | date:'MM/dd/yyyy @ h:mma'}}</span>

• 10/29/2010 @ 6:40AM

Filters - currency (cont.)

• Formats a number as a currency (ie $1,234.56). When no currency symbol is provided, default symbol for current locale is used.

• {{ currency_expression | currency : symbol : fractionsize}}

<pre ng-non-bindable>{{168 | currency : ‘SAR' : 0}}</pre> =

SAR168

Filters - number (cont.)

• Formats a number as text

• {{number_expression | number : fractionsize}}

{{2434.656 | number:2 }} = 2,434.66

Filters - lowercase (cont.)

• Converts string to lowercase.

• {{ lowercase_expression | lowercase}}

{{'HELLO ismaeel' | lowercase}} = hello ismaeel

Filters - uppercase (cont.)

• Converts string to uppercase.

• {{ uppercase_expression | uppercase}}

{{'HELLO ismaeel' | uppercase}} = HELLO ISMAEEL

Filters - json (cont.)

• Allows you to convert a JavaScript object into JSON string.

• {{ json_expression | json : spacing}}

Filters - limitTo (cont.)

• Creates a new array or string containing only a specified number of elements. The elements are taken from either the beginning or the end of the source array, string or number, as specified by the value and sign (positive or negative) of limit. If a number is used as input, it is converted to a string.

• {{ limitto_expression | limitto : limit}}

{{'Hello Angular' | limitTo:5}} = Hello

Filters - orderBy (cont.)

• Orders a specified array by the expression predicate. It is ordered alphabetically for strings and numerically for numbers.

• {{ array | orderBy : expression : reverse}}

Filters - filter (cont.)

• Selects a subset of items from array and returns it as a new array.

• {{ filter_expression | filter : comparator}}

Filters (cont.)

• $filter('currency')(amount, symbol, fractionsize)

• $filter('date')(date, format, timezone)

• $filter('filter')(array, expression, comparator)

• $filter('json')(object, spacing)

• $filter('limitTo')(input, limit)

• $filter('lowercase')(input)

• $filter('number')(number, fractionsize)

• $filter('orderby')(array, expression, reverse)

• $filter('uppercase')(input)

$http

• The $http service is a core Angular service that facilitates communication with the remote HTTP servers via the browser's XMLHttpRequest object or via JSONP.

• Methods

• get

• head

• post

• put

• delete

• jsonp

• patch

$http – Caching (cont.)

• To enable caching, set the request configuration cache property to true (to use default cache) or to a custom cache object (built with $cacheFactory).

• When the cache is enabled, $http stores the response from the server in the specified cache. The next time the same request is made, the response is served from the cache without sending a request to the server.

$http – config (cont.)

• method: GET, POST, …

• url: Absolute or relative URL of the resource that is being requested.

• params: Map of strings or objects which will be turned to ?key1=value1&key2=value2 after the url. If the value is not a string, it will be JSONified.

• data: {string|Object} – Data to be sent as the request message data.

• headers: {Object} – Map of strings or functions which return strings representing HTTP headers to send to the server. If the return value of a function is null, the header will not be sent. Functions accept a config object as an argument.

$http – config (cont.)

• xsrfHeaderName: {string} – Name of HTTP header to populate with the XSRF token.

• xsrfCookieName: {string} – Name of cookie containing the XSRF token.

• cache: {boolean|Cache} – If true, a default $http cache will be used to cache the GET request, otherwise if a cache instance built with $cacheFactory, this cache will be used for caching.

• timeout: {number} – timeout in milliseconds.

• withCredentials: {boolean} - whether to set the withCredentials flag on the XHR object.

• responseType: either use emoty string (default value) or use json as value.

$http – config (cont.)

• success(function (data, status, headers, config) {}

• error(function (data, status, headers, config) {}

NEXT?

FORMS