AngularJS Services : Expressions and Directives
Learn how to use AngularJS services to work with AngularJS content and Binding Expression
AngularJS Services : Working with Expression and Directives
AngularJS has a range of service that can be useed with AngularJS Content and binding expression to process content into function that can be called to generate content within the application.
The contents generated can be simple HTML fragments to simple expressions having within them bindings and Directives.
The use of these services is to control the directives completely and generate or render content as per your demand.
The following are the list of service that operate upon AngularJS Expression.
Table : AngularJS Service Services useable on Dangerous Data
|$compile||To convert an HTML fragment containing bindings and directives into a function that can be used to generate Content.|
|$interpolate||To Convert a string containing inline bindings into a function that can be used to generate content.|
|$parse||To convert AngularJS Expression into Functions which can be used to generate Content.|
AngularJS Services : Converting Expressions into Functions
The angularJS service of $parse is used to convert an AngularJS expression into a function that can be used to evaluate the expression using a scope object
Thus enabling the expression to be provided with via attributes and evaluated without letting the directive know any other details of expressions.
In the demo, the directive testExpression is confiqured with a scope property containing an expression that uses the service $parse for evaluation, the directive is used with span uses a scope property called expression
Example: AngularJS Service Displaying Dangerous DataGive it a TRY! » Note:The property fees is processed by the currency filter and the rest is displayed in text.
AngularJS Expression and Directives Services : Providing Local Data
In the previous example the user provided the expression to be evaluated, but more common way to use $parse service is to have an expression defined within the application, while the user provides the data.
AngularJS Service Global Object API: Using Controllers within Directives
AngularJS services of $interval and $timeout are used to get access to functions of window.setInterval and window.setTimeout respectively. The arguments acceptable to these servies are in the table below.
All of these function are in a way similar, that they defer the execution of function for the set period of time. The only difference is that the service $timeout executes the function only one, while the service $interval executes periodically.
Example: Angular Custom Directives Trusting DataGive it a TRY! » Note: The service $interval runs the function that updates the scope with current time every 5000ms i.e 5sec
AngularJS Services : Accessing the URL using the $location Service
The AngularJS $location uses the location property of the global window object inorder to get access to the current URL.
It work on the section of the URL which follows the first # character, that is to navigate within the documents of the current folder but not to documents of other folder, a condition mostly useful for web application.
Table : AngularJS Services $location service methods
|absUrl()||It returns the complete URL of the current document, including the section before the first # character.|
|hash()hash(target)||To get or set the hash part of the URL|
|host()||To return the domain or host name of the URL, eg tutorialspark.com|
|path() path(target)||To get or set the path component of the URL|
|port()||Returns the port number used. Default value is 80.|
|protocol()||Returns the protocol part of the URL, eg http, https etc|
|replace()||Changes the URL by replacing the most recent entry within the browser history instead of creating a new URL.|
|search()search(term, params)||Used to get or set the search string|
|url()url(target)||Used to get or set the path, query string and hash together|
In addition to these method, $location service also defines a few events which can be used to get notification when the URL undergoes any change.
The handler function for these events are registered using the scope $on method and are passed as event object, which is the new URL and the old URL.
Table : AngularJS Services Events defined by $location service
|$locationChangeStart||Event is triggered before the URL changes, changing of URL can be prevented by using preventDefault method on Event object.|
|$locationChangeSuccess||Event is triggered when the URL undergoes a change.|
The demo, makes use of the $location service and some read and write methods to show how changes are applied to the URL
Example: AngularJS Advanced Directives Adding Features for Directive ControllersGive it a TRY! » Note:Each button is used to set the four writable components of the URL.
AngularJS Service Global Object API: Accessing the Document Object
The AngularJS service $document is an object which hold the DOM API global window.document object.