Scribd
Upload
2 views

webx exp 8

The document outlines an experiment to study AngularJS, focusing on data binding, authentication, and custom filters. It includes objectives such as demonstrating one-way and two-way data binding, implementing a basic authentication system, and creating a custom filter for book searches. Additionally, it covers AngularJS directives, controllers, and form validation techniques essential for building AngularJS applications.

Uploaded by

prathameshpalve08
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

webx exp 8

The document outlines an experiment to study AngularJS, focusing on data binding, authentication, and custom filters. It includes objectives such as demonstrating one-way and two-way data binding, implementing a basic authentication system, and creating a custom filter for book searches. Additionally, it covers AngularJS directives, controllers, and form validation techniques essential for building AngularJS applications.

Uploaded by

prathameshpalve08
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

Experiment 8 : To study Angular JS

Name of Student Prathamesh Palve

Class Roll No D15A_31

D.O.P. 20/03/2025

D.O.S. 27/03/2025

Sign and Grade

AIM:To study AngularJS

Problem Statement:
a)​ Demonstrate with an AngularJS code one way data binding and two way data
binding in AngularJS

b)​ Implement a basic authentication system for a web application using


AngularJS. Create a simple login page that takes a username and password,
and upon submission, checks for a hardcoded set of credentials. If the
credentials are valid, display a success message; otherwise, show an error
message.
Demonstrate AngularJS controller, module and form directives.

c)​ Users want to search for books by title, author, or genre. To accomplish this,
develop an AngularJS custom filter named bookFilter and include it into the
application.
d)​ Create a reusable and modular custom AngularJS service to handle user
authentication. Include this service into an application.

Theory:-

Directives in AngularJS

Directives are one of the core features of AngularJS that allow developers to extend
HTML functionality. They are special markers on DOM elements (such as attributes,
elements, or CSS classes) that tell AngularJS to attach specific behaviors to those
elements or transform them.
Commonly Used Directives in AngularJS:

1.​ ng-app: Defines the root element of an AngularJS application.

2.​ ng-model: Binds the value of an input, select, or textarea to a variable.

3.​ ng-bind: Replaces the content of an HTML element with the value of an
expression.

4.​ ng-repeat: Iterates over an array or collection to generate repeated elements.

5.​ ng-if: Conditionally includes or removes elements from the DOM.

6.​ ng-show / ng-hide: Shows or hides an element based on a Boolean expression.

7.​ ng-click: Binds a click event to a function in the controller.

Data Binding in AngularJS

Data binding is the process of synchronizing data between the model and the view.
AngularJS supports two types of data binding:

One-way Data Binding: The model updates the view, but changes in the view do not
affect the model. Example:

html
CopyEdit
<span ng-bind="message"></span>

1.

Two-way Data Binding: The model and view are linked such that changes in one
reflect in the other. Example:

html
CopyEdit
<input type="text" ng-model="username">
<p>Hello, {{username}}!</p>
2.

Two-way data binding is one of AngularJS's most powerful features, reducing the need
for manual DOM manipulation.

Form Validation in AngularJS

Form validation in AngularJS ensures that user input is correct before submission.
AngularJS provides built-in directives for form validation:

1.​ ng-required: Ensures that an input field is mandatory.

2.​ ng-minlength / ng-maxlength: Sets minimum and maximum character limits for
input fields.

3.​ ng-pattern: Validates input based on a regular expression pattern.

4.​ ng-disabled: Disables a form element based on an expression.

Example:

html
CopyEdit
<form name="userForm">
<input type="email" name="email" ng-model="userEmail"
ng-required="true">
<span ng-show="userForm.email.$error.required">Email is
required.</span>
</form>

AngularJS tracks form states such as $pristine, $dirty, $valid, and $invalid
to provide real-time validation feedback.

Use of AngularJS Controllers in Applications


AngularJS controllers are JavaScript functions used to define application logic and
manage the flow of data between the view and the model. Controllers are attached to
the DOM using the ng-controller directive.

Key Functions of Controllers:

1.​ Define scope variables: Controllers bind data to the view using the $scope
object.

2.​ Handle business logic: Controllers process user input and manipulate the
model accordingly.

3.​ Communicate with services: They fetch data from APIs or services.

Example:

javascript
CopyEdit
app.controller('MainController', function($scope) {
$scope.message = "Welcome to AngularJS!";
});

In the view:

html
CopyEdit
<div ng-controller="MainController">
<p>{{ message }}</p>
</div>

Controllers improve the maintainability of AngularJS applications by separating


concerns.

Use of AngularJS Filters in Applications


Filters in AngularJS modify data before displaying it in the view. They can be used
within expressions and directives like ng-repeat.

Commonly Used Filters:

1.​ uppercase / lowercase: Converts text to upper or lower case.

2.​ currency: Formats numbers as currency.

3.​ date: Formats date values.

4.​ filter: Filters an array based on a specified condition.

5.​ orderBy: Sorts an array by a specified property.

Example:

html
CopyEdit
<p>{{ "hello world" | uppercase }}</p>
<p>{{ 1000 | currency }}</p>
<p>{{ myDate | date:'short' }}</p>

Filters enhance the readability of data and improve user


experience. CODE:-
Index.html
app.js
authService.js

bookfilter.js
Style.css

OUTPUT:-

You might also like