Search within TutorialsPark

AngularJS Services : DOM API Global Objects

Learn how to use AngularJS services to Access DOM API Global Objects of Window, document, $location, log and timeout service

AngularJS Services : Working with DOM API Global Objects

AngularJS Built-in API allows you to access the Browser's DOM API. The list of services using the DOM API features are as below.

AngularJS Global Object Services are included inorder to make application testing simple.Unit testing involves isolating small code block and evaluating the behaviour of component without considering what is depends upon.

The DOM API global objects of document and window are used to test services configured to various scenarios.

Table : Basic method and properties provided by NgModel Controller

Name Description
$anchorScroll To scroll the browser window to a specified anchor
$document To apply animation to document contents
$interval Use HTML fragment to create function that can be used to generate content
$location rn the unformatted value from the scope.
$log To create the DOM window.document object.
$timeout Used to handle exceptions created while the application is in progress.
$window To use the filters

AngularJS DOM API Global Objects: Using the Window Object

The Most simplest of the DOM API Global object is the $window service, if a dependency is declared on this, it gives you an object that is encapsulates the window object.

In the demo, we have declared a dependency on the $window service, and defined a controller behaviour which invokes the alert Method.

Example: AngularJS Directives Directives Templates

Give it a TRY! » Note: The directive ng-click invokes the alert behaviour when the button is pressed.

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.

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.

Table : Basic method and properties provided by NgModel Controller

Name Description
fn A function whose execution gets delayed
delay To specify the number of milliseconds before the fn
count To specify the number of times that the delay/execute cycle gets repeated. The default value is zero, i.e no limit exits
invokeApply For a value of true, the fn gets executed within the method scope.$apply

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 Scope for each Directive Instance

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
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 $location Service : Using HTML5 MURLs

In the last example for every setting the entire URL was getting duplicated, HTML5 history API provides a more efficient way by simplying changing the URL without reloding the document.

In the demo, we enable the support for the History API via the provider for $location service $locationProvider

Example: AngularJS $location Service Using HTML5 MURLs

Give it a TRY! » Note: HTML5 features are enabled by calling the html5mode method with value as true.

AngularJS Service : Scrolling to location using $anchorScroll Service

The AngularJS service of $anchorScroll is used to scroll the browser window to positions to display elements whose id value corresponds to the value returned by the method $location.hash.

The advantage of using the service $anchorScroll is that you need access the global document object to locate the element to display or the global window object to perform the scrolling.

Example: AngularJS Service Global Object API Accessing the Document Object

Give it a TRY! » Note: The Service monitors the value of $location.hash and automatically scrolls to that position.