AngularJS API - Naukri Code 360

Introduction

AngularJS is a web framework based on JavaScript for developing single-page applications(SPA).

This article on AngularJS API is organised into modules containing various components of an AngularJS application. But before we learn about these modules in detail. Let us first see these AngularJS modules with their uses.

AngularJS Module

A module can be considered a container. Different parts(directives, filters, services, etc.) of the AngularJS app are contained inside this container. Following are angularJS modules with their uses.

Modules	Uses
ng	This module contains the core components of AngularJS. It is provided by default.
ngRoute	This module enables URL routing to your application.
ngAnimate	This module enables animation features within the application.
ngAria	This module injects common accessibility attributes into the directives, which improves the experience for users with disabilities.
ngResource	To query and post data to a REST API.
ngCookies	To handle cookie management within the application.
ngTouch	Use ngTouch when developing for mobile devices/browsers.
ngSanitize	To securely parse and manipulate HTML data in the application.
ngMock	This module injects and mocks modules, services, factories, and providers within the unit tests.

Now let us learn about these modules one by one in detail.

ng

The ng (core module) is provided by default when an AngularJS application starts. It contains the core components of AngularJS.

Module Component	Description
Functions	A collection of various function components in ng. For example - angular.isDate, angular.isArray, angular.isFunction, etc.
Directives	A core collection of directives to use in your template code to build an AngularJS application. For example - ngValue, ngBind, ngChange, etc.
Services	A core collection of services to use within the DI(Dependency Injection) of your application. For example - $filter, $http, $compile, etc.
Filters	A collection of core filters to use to transform template data before it is rendered within expression and directives. For example - currency, date, lowercase, etc.
Global APIs	A collection of core functions helpful for low-level JavaScript operations within your application. For example - angular.equals(), angular.copy(), angular.element(), etc.

ngRoute

ngRoute enables URL routing to your application. This module supports URL management via hashbang(#!) and HTML5 pushState.

For ngRoute to work in your application, follow the given below steps.

Step 1: Include the angular-route.js file in your HTML.

<script type="text/javascript" src="pathToYour/angular.js"></script>
<script type="text/javascript" src="pathToYour/angular-route.js"></script>

Step 2: Now add it as a dependent module to load the module in your application.

angular.module("yourAppName", ['ngRoute']);

Now, let us see module components in ngRoute with their examples.

Module Component

Example and Description

Directive

ngView is a directive that complements the $route service. It displays the template of the current route within the page.

Services

The following services are used for route management:

$route - to access the details of the route which is currently being accessed.

$routeParams - to access the query string values present in the URL.

$routeProvider - to register routes for the application.

ngAnimate

ngAnimate enables animation features within your application. Animations are defined by using CSS animations/transitions or JavaScript callbacks.

For ngAnimate to work in your application, follow the given below steps.

Step 1: Include the angular-animate.js file in your HTML.

<script type="text/javascript" src="pathToYour/angular.js"></script>
<script type="text/javascript" src="pathToYour/angular-animate.js"></script>

Step 2: Now add it as a dependent module to load the module in your application.

angular.module("yourAppName", ['ngAnimate']);

Now, let us see module components in ngAnimate with their examples.

Module Component

Example and Description

Directive

ngAnimateChildren - tell the children of a particular element to animate even if any of the children's parents are animating at that time.

ngAnimateSwap - allows for the container to be removed and entered whenever the associated expression changes.

Services

$animateCss - triggers customised CSS-based transitions.

ngAria

ngAria injects common accessibility attributes into the directives, which improves the experience for users with disabilities.

For ngAria to work in your application, follow the given below steps.

Step 1: Include the angular-aria.js file in your HTML.

<script type="text/javascript" src="pathToYour/angular.js"></script>
<script type="text/javascript" src="pathToYour/angular-aria.js"></script>

Step 2: Now add it as a dependent module to load the module in your application.

angular.module("yourAppName", ['ngAria']);

Now, let us see module components in ngAria with their examples.

Module Component	Example and Description
Provider	$ariaProvider - to configure the ARIA attributes managed and injected by ngAria.
Service	$aria - contains helper methods if you want to apply common ARIA attributes to HTML directives.

ngResource

ngResource helps in querying and posting data to a REST API.

For ngResource to work in your application, follow the given below steps.

Step 1: Include the angular-resource.js file in your HTML.

<script type="text/javascript" src="pathToYour/angular.js"></script>
<script type="text/javascript" src="pathToYour/angular-resource.js"></script>

Step 2: Now add it as a dependent module to load the module in your application.

angular.module("yourAppName", ['ngResource']);

Now, let us see module components in angular-resource.js with their examples.

Module Component	Example and Description
Provider	$resourceProvider - changes the default behaviour of the $resource service.
Service	$resource - creates a resource object to let you interact with RESTful server-side data sources.

ngCookies

ngCookies handles cookie management within the application.

For ngCookies to work in your application, follow the given below steps.

Step 1: Include the angular-cookies.js file in your HTML.

<script type="text/javascript" src="pathToYour/angular.js"></script>
<script type="text/javascript" src="pathToYour/angular-cookies.js"></script>

Step 2: Now add it as a dependent module to load the module in your application.

angular.module("yourAppName", ['ngCookies']);

Now, let us see module components in angular-cookies.js with their examples.

Module Component	Example and Description
Provider	$cookiesProvider - changes the default behaviour of the $cookies service.
Service	$cookies - a convenient wrapper which provides read/write access to the browser's cookies.

ngTouch

ngTouch has been deprecated since version 1.7.0.

ngSanitize

ngSanitize securely parses and manipulates HTML data in the application.

For ngSanitize to work in your application, follow the given below steps.

Step 1: Include the angular-sanitize.js file in your HTML.

<script type="text/javascript" src="pathToYour/angular.js"></script>
<script type="text/javascript" src="pathToYour/angular-sanitize.js"></script>

Step 2: Now add it as a dependent module to load the module in your application.

angular.module("yourAppName", ['ngSanitize']);

Now, let us see module components in angular-sanitize.js with their examples.

Module Component	Example and Description
Filter	linky - find links in text input and turn them into HTML links.
Service	$sanitize - helps in sanitising an HTML string by stripping all potentially dangerous tokens.
Provider	$sanitizeProvider - creates and configures $sanitize instance.

ngMock

ngMock injects and mocks modules, services, factories, and providers within the unit tests.

For ngMock to work in your application, follow the given below steps.

Step 1: Include the angular-mocks.js file in your HTML.

<script type="text/javascript" src="pathToYour/angular.js"></script>
<script type="text/javascript" src="pathToYour/angular-mocks.js"></script>

Step 2: Now add it as a dependent module to load the module in your application.

angular.module("yourAppName", ['ngMock']);

Now, let us see module components in angular-mocks.js with their examples.

Module Component	Example and Description
Object	angular.mock - it is a namespace which contains code related to testing.
Service	$log - mock implementation of $log. $interval - mock implementation of the $interval service. $animate - mock implementation of the $animate service.
Provider	$exceptionHandlerProvider - configures the mock implementation of $exceptionHandler to log or rethrow errors passed to the $exceptionHandler.
Type	angular.mock.TzDate - a globally available mock class of Date.
Function	angular.mock.dump - a globally available function. browserTrigger - a global (window) function.

Frequently Asked Questions

What is AngularJS?

AngularJS is a discontinued open-source web framework based on JavaScript for developing SPA(Single Page Applications).

How is AngularJS different from ReactJS?

The main difference between both is that AngularJS is a full-featured framework, while React is a library for building user interfaces. This means that React is focused on rendering UI, while Angular is focused on building complete client-side applications.

What are some essential features of AngularJS?

AngularJS allows you to sync data between your UI and your JavaScript code easily. It separates the application into different components (model, view, and controller) to make it easier to develop and maintain. It also provides support for routing.

What is the use of API?

API(Application Programming Interface) is a software intermediary that allows two different applications to communicate.

What to use as ngTouch has been deprecated?

Stand-alone libraries for touch handling should be used. For example, HammerJS.

Conclusion

This article discussed AngluarJS API, which was organised into modules containing various components of an AngularJS application. We learnt about these modules' components in detail with their example and description. You may explore some other related articles also.

You may refer to our Guided Path on Code Studios for enhancing your skill set on DSA, Competitive Programming, System Design, etc. Check out essential interview questions, practice our available mock tests, look at the interview bundle for interview preparations, and so much more!

Happy Learning, Ninjas!