Single page application 05
Download as PPTX, PDF0 likes395 views
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.
More Related Content
What's hot (20)
Viewers also liked (6)
Similar to Single page application 05 (20)
More from Ismaeel Enjreny (20)
Recently uploaded (20)
![Get & Download Wondershare Filmora Crack Latest [2025]](https://cdn.slidesharecdn.com/ss_thumbnails/revolutionizingresidentialwi-fi-250422112639-60fb726f-250429170801-59e1b240-thumbnail.jpg?width=560&fit=bounds)
Single page application 05
- 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?