Q2) Attempt any Four of the following. [4×4=16]
1.
Explain most common directives used
in AngularJS.
AngularJS facilitates you to extend HTML with new attributes. These attributes are called directives.
There is a set of built-in directive in
AngularJS which offers functionality to your applications. You can also define
your own directives.
- ng-app: This directive starts an
AngularJS Application.
- ng-init: This directive
initializes application data.
- ng-model: This directive defines
the model that is variable to be used in AngularJS.
- ng-repeat: This directive repeats
html elements for each item in a collection.
Example
< html>
<html lang="en" ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js">
</script>
</head>
<body>
<div ng-controller="MyController"
ng-init="initialize()">
<h1>{{ greeting
}}</h1>
<!-- ng-model example
-->
<input
type="text" ng-model="userInput" placeholder="Type
something">
<p>You typed: {{
userInput }}</p>
<!-- ng-repeat
example -->
<ul>
<li
ng-repeat="item in items">{{ item }}</li>
</ul>
</div>
<script>
// Define the AngularJS
module
var myApp =
angular.module('myApp', []);
// Define a controller
for the module
myApp.controller('MyController', function ($scope) {
// ng-init example
$scope.initialize =
function () {
$scope.greeting
= 'Hello, AngularJS!';
// ng-repeat
example
$scope.items =
['Item 1', 'Item 2', 'Item 3'];
};
});
</script>
</body>
</html>
2. Explain
MVC architecture in detail.
MVC
stands for Model View Controller. It is a software design pattern for
developing web applications. It is very popular because it isolates the
application logic from the user interface layer and supports separation of
concerns.
The MVC
pattern is made up of the following three parts:
1. Model: It
is responsible for managing application data. It responds to the requests from
view and to the instructions from controller to update itself.
2. View: It
is responsible for displaying all data or only a portion of data to the users.
It also specifies the data in a particular format triggered by the controller's
decision to present the data. They are script-based template systems such as
JSP, ASP, PHP and very easy to integrate with AJAX technology.
3. Controller: It
is responsible to control the relation between models and views. It responds to
user input and performs interactions on the data model objects. The controller
receives input, validates it, and then performs business operations that modify
the state of the data model.
3. Explain built-in Services of AngularJS.
1. $scope:- The $scope service provides a context for data binding. It is used to link the view (HTML) and the controller. Variables defined on $scope within a controller are accessible in the corresponding view.
2.$http:-The $http service is used for making HTTP requests to retrieve or send
data to a server. It supports various HTTP methods like GET, POST, PUT, DELETE,
etc.
3. $timeout:-The $timeout service is a wrapper for the window.setTimeout()
function. It allows you to execute a function after a specified delay.
4. $interval:-The $interval service is similar to $timeout, but it repeatedly executes a function at specified intervals.
4. Write an AngularJS program to create Service for
finding factorial of a number.
< html>
<html lang="en" ng-app="factorialApp">
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js">
</script>
</head>
<body>
<div ng-controller="FactorialController">
<h2>Factorial
Calculator</h2>
<label
for="numberInput">Enter a number:</label>
<input type="number"
id="numberInput" ng-model="inputNumber" min="0"
required>
<button
ng-click="calculateFactorial()">Calculate Factorial</button>
<p ng-if="result
!== null">
Factorial of {{
inputNumber }} is: {{ result }}
</p>
</div>
<script>
// Define the AngularJS
module
var factorialApp =
angular.module('factorialApp', []);
// Define the
FactorialService
factorialApp.service('FactorialService', function () {
this.calculate =
function (n) {
if (n === 0 || n
=== 1) {
return 1;
} else {
return n *
this.calculate(n - 1);
}
};
});
// Define the
FactorialController and inject FactorialService
factorialApp.controller('FactorialController', function ($scope,
FactorialService) {
$scope.inputNumber =
0;
$scope.result =
null;
$scope.calculateFactorial = function () {
$scope.result =
FactorialService.calculate($scope.inputNumber);
};
});
</script>
</body>
</html>
5. Write AngularJS program for
multiplication of two numbers.
< html>
< ng-app="multiplicationApp">
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body>
<div ng-controller="MultiplicationController">
<h2>Multiplication
Program</h2>
<label
for="num1">Enter the first number:</label>
<input
type="number" id="num1" ng-model="number1"
required>
<label
for="num2">Enter the second number:</label>
<input
type="number" id="num2" ng-model="number2"
required>
<button
ng-click="multiplyNumbers()">Multiply</button>
<p ng-if="result
!== null">
Result of {{ number1
}} * {{ number2 }} is: {{ result }}
</p>
</div>
<script>
var multiplicationApp =
angular.module('multiplicationApp', []);
multiplicationApp.controller('MultiplicationController', function ($scope)
{
$scope.number1 = 0;
$scope.number2 = 0;
$scope.result =
null;
$scope.multiplyNumbers = function () {
$scope.result =
$scope.number1 * $scope.number2;
};
});
</script>
</body>
</html>
6.Explain difference between angularJS and javascript.
|
JavaScript |
Angular JS |
|
It is an object-oriented scripted language that is used to
develop mobile and dynamic web applications. |
It an open-source framework used to develop dynamic web and
large single-page web applications. |
|
Netscape Communications developed it in 1995. |
Google mainly developed it in 2010. |
|
Its syntax is much complex than Angular JS. |
Its syntax is simple and easy. |
|
Its interpreters are written in the C and C++ languages. |
It is written in the JavaScript language. |
|
It doesn't support the filters. |
It does support filters. |
|
It isn't very easy to learn. |
It is easy to learn if anyone knows the basic knowledge of
JavaScript. |
|
It is based on the dynamic typing concept. |
Angular JS is based on the concept of the model view controller
to build the applications. |
|
It doesn't support the dependency injection. |
It supports both data binding and dependency injection. |
7.What is module? Write advantages of modules.
In AngularJS, a module is a container for organizing and structuring components
like controllers, services, directives, and more. It helps in breaking down the
application into smaller, manageable units.
Advantages of modules in AngularJS:
1.
Modularity: Organizes code into
manageable units.
2.
Reusability: Components within
modules can be reused across the application.
3.
Dependency Management: Explicitly
declares dependencies, avoiding conflicts.
4.
Encapsulation: Components within a
module are private by default, reducing naming conflicts.
5.
Configuration: Provides a place for
configuration settings and initialization code.
6.
Testing: Supports unit testing by
allowing testing of individual modules in isolation.
7.
Collaboration: Facilitates
collaborative development by providing clear structure.
8.
Dynamic Loading: Enables dynamic
loading of components through dependency injection.
8.What are different forms of form events?
In AngularJS, forms play a crucial role in collecting and processing user input. AngularJS provides various form-related events to handle interactions and changes within a form. Here are some of the key form events in AngularJS:
ngSubmit:
This event is
triggered when the form is submitted. It can be used to handle form submission
and perform necessary actions.
<form
ng-submit="submitForm()">
<!-- Form elements go here -->
<button
type="submit">Submit</button>
</form>
ngModelOptions:
ngModelOptions
allows you to customize the behavior of the ngModel directive. It includes
events like updateOn to specify when the model should be updated.
<input
type="text" ng-model="username" ng-model-options="{
updateOn: 'blur' }">
ngChange:
This event is
triggered when the value of an input element changes. It is often used with ngModel
to perform actions when the user makes a change
<input
type="text" ng-model="username"
ng-change="usernameChanged()">
ngBlur and ngFocus:
These events are
triggered when an input element loses focus (ngBlur) or gains focus (ngFocus)
<input type="text" ng-model="username" ng-blur="fieldBlurred()" ng-focus="fieldFocused()">
9. Write an AngularJS program for using $filter service
<html>
< ng-app="filterApp">
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body>
<div ng-controller="FilterController">
<h2>AngularJS
$filter Service Example</h2>
<p>Original Text:
{{ originalText }}</p>
<p>Uppercase Text:
{{ originalText | uppercase }}</p>
<p>Current Date:
{{ currentDate | date: 'yyyy-MM-dd HH:mm:ss' }}</p>
</div>
<script>
var filterApp =
angular.module('filterApp', []);
filterApp.controller('FilterController', function ($scope, $filter) {
$scope.originalText
= 'Hello, AngularJS!';
$scope.currentDate =
new Date();
// Using $filter to
uppercase text programmatically
var uppercaseFilter
= $filter('uppercase');
$scope.programmaticUppercase = uppercaseFilter($scope.originalText);
});
</script>
</body>
</html>
