Search within TutorialsPark

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

Name Description
$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 Data

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

Example: AngularJS Dangerous Data Using unsafe HTML Binding

Give it a TRY! » Note:The Last line of the JavaScript console has the custom exception message.


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 Data

Give 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

Name Description
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

Name Description
$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 Controllers

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

Example: AngularJS Service Global Object API Accessing the Document Object

Give it a TRY! » Note: The controller is used to display the text string on the button within the alert Window.