Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Last Updated: Mar 27, 2024
Easy

AngularJS API

Author Sanchit Kumar
1 upvote
gp-icon
Basics of javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

Introduction

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

AngularJS API

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.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

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 DSACompetitive ProgrammingSystem 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!

Previous article
AngularJS Form Validation
Next article
AngularJS and W3.CSS
Guided path
Free
gridgp-icon
Basics of javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass