This document provides information on filters and the $http service in AngularJS. It discusses built-in filters for formatting data like date, currency, number, as well as custom filters. Array filters like limitTo and orderBy are also covered. The $http service allows communicating with remote servers via HTTP requests. Key aspects of $http configuration like cache, headers, success/error callbacks are summarized.

1. SINGLE PAGE APPLICATION 5
ENG. ISMAIL ENJRENY

2. 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

3. 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

4. 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

5. 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

6. Filters - number (cont.)
• Formats a number as text
• {{number_expression | number : fractionsize}}
{{2434.656 | number:2 }} = 2,434.66

7. Filters - lowercase (cont.)
• Converts string to lowercase.
• {{ lowercase_expression | lowercase}}
{{'HELLO ismaeel' | lowercase}} = hello ismaeel

8. Filters - uppercase (cont.)
• Converts string to uppercase.
• {{ uppercase_expression | uppercase}}
{{'HELLO ismaeel' | uppercase}} = HELLO ISMAEEL

9. Filters - json (cont.)
• Allows you to convert a JavaScript object into JSON string.
• {{ json_expression | json : spacing}}

10. 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

11. 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}}

12. Filters - filter (cont.)
• Selects a subset of items from array and returns it as a new array.
• {{ filter_expression | filter : comparator}}

13. 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)

14. $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

15. $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.

16. $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.

17. $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.

18. $http – config (cont.)
• success(function (data, status, headers, config) {}
• error(function (data, status, headers, config) {}

19. NEXT?