Q3) Attempt any Four of the following: [4×4=16]
1. Give difference between AngularJS and Javascript.
(Check Question No.2)
2. Explain the ways to implement customer
directives in AngularJS.
directives are used in AngularJS to extend the functionality of HTML. Custom
directives are defined using "directive" function.
· Element directives − Directive
activates when a matching element is encountered.
· Attribute − Directive activates
when a matching attribute is encountered.
· CSS − Directive activates when
a matching css style is encountered.
· Comment − Directive activates
when a matching comment is encountered.
<html>
< 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">
<h2>AngularJS Custom Directive Example</h2>
<!-- Using the custom directive -->
<custom-greeting name="John"></custom-greeting>
<custom-greeting name="Alice"></custom-greeting>
<custom-greeting name="Bob"></custom-greeting>
</div>
<script>
var myApp = angular.module('myApp', []);
// Custom directive definition
myApp.directive('customGreeting', function() {
return {
restrict: 'E', // E for Element
scope: {
name: '@' // Creating an
isolated scope and binding the 'name' attribute
},
template: '<p>Hello, {{ name
}}! This is a custom greeting.</p>',
link: function(scope, element,
attrs) {
// Link function for additional behavior (if needed)
}
};
});
// Controller for demonstration
myApp.controller('MyController', function($scope) {
// Controller logic (if needed)
});
</script>
</html>
3. Write advantage of creating Modules.
Creating modules in AngularJS has several advantages:
Organization:-Modules help organize your code
into smaller, manageable parts.
Reusability:-Components within a module can
be easily reused in different parts of your app.
Dependency Management:-Modules make it
clear which parts of your app depend on each other.
Encapsulation:-Components are
private to a module, reducing naming conflicts.
Configuration:-Modules provide a
place for setup and configuration.
Testing:-Modules make it easier to test
individual parts of your app.
Collaboration:-Different teams can
work on different modules simultaneously.
Dynamic Loading:-Modules support
dynamic loading of components.
Namespacing:-Modules prevent naming
conflicts, keeping your code organized.
4.Write a Program that
Can show the use of ng-repeat.
< html>
<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">
<h2>AngularJS
ng-repeat Example</h2>
<ul>
<!-- Using
ng-repeat to iterate over items -->
<li
ng-repeat="item in itemList">{{ item }}</li>
</ul>
</div>
<script>
var myApp =
angular.module('myApp', []);
myApp.controller('MyController', function($scope) {
// Sample list of
items
$scope.itemList =
['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
});
</script>
</body>
</html>
5.Write a program to demonstrate use of factory function
< html>
<
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">
<ul>
<!-- Using ng-repeat to iterate over
items from the DataService -->
<li ng-repeat="item in
dataService.getItems()">{{ item }}</li>
</ul>
</div>
<script>
var myApp = angular.module('myApp', []);
// Factory function to create DataService
myApp.factory('DataService', function() {
var items = ['Item 1', 'Item 2', 'Item
3', 'Item 4', 'Item 5'];
return {
getItems: function() {
return items;
}
};
});
myApp.controller('MyController',
function($scope, DataService) {
// Injecting DataService into the
controller
$scope.dataService = DataService;
});
</script>
</body>
</html>
6. Explain AngularJS Data Binding?
(Check answer Question
No:-2)
7.
Explain scope hierarchy in detail.
An AngularJS, the scope is a crucial concept that plays a central role in
facilitating data binding between the view and the controller. The scope
hierarchy refers to the organization and relationship between different scopes
in an AngularJS application. Scopes in AngularJS form a hierarchical structure,
and this hierarchy is essential for managing data flow and scope inheritance.
Root Scope:
1. At the top of the hierarchy is the root scope, which is the parent
of all other scopes in the AngularJS application.
2. The root scope is created when the AngularJS application is
initialized and is often associated with the ng-app directive.
3. Variables defined in the root scope are accessible to all child
scopes.
Child Scopes:
1. Child scopes are created for each controller, directive, or other
components that define a new scope.
2. These scopes inherit properties from their parent scope, forming a
tree-like structure.
3. Child scopes can access variables from their parent scope, but
changes made in a child scope do not affect the parent scope directly.
Isolate Scope:
1. Sometimes, a directive may create an isolate scope, which is a
separate scope that does not inherit from its parent scope.
2. Isolate scopes are useful when you want to create reusable
components with isolated behavior and avoid unintentional variable conflicts.
3. Isolate scopes are created using the scope property in a directive
definition object.
// Example of creating an isolate scope in a directive
myApp.directive('myDirective', function()
{ return { scope: { isolatedProperty: '=' },
template: '<p>{{
isolatedProperty }}</p>' };
});
8. Create a Hello world application program using AngularJS.
<html>
< ng-app="helloWorldApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body>
<div ng-controller="HelloWorldController">
<h1>{{ greeting }}</h1>
</div>
<script>
// Creating an AngularJS module named 'helloWorldApp'
var helloWorldApp = angular.module('helloWorldApp', []);
// Creating a controller for the 'HelloWorldController'
helloWorldApp.controller('HelloWorldController', function($scope)
{
// Setting a variable 'greeting' in the scope
$scope.greeting = 'Hello, World!';
});
</script>
</body>
</html>
9.
Explain lower-case and upper-case Filter with
example.
In AngularJS, the lowercase and uppercase filters are used
to convert text to
lowercase and uppercase,
respectively.
<!-- Lowercase Filter Example -->
< html>
<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">
<p>Original Text: {{ originalText
}}</p>
<p>Lowercase Text: {{ originalText |
lowercase }}</p>
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('MyController',
function($scope) {
// Sample text
$scope.originalText = 'Hello,
AngularJS!';
});
</script>
</body>
</html>
<!-- Uppercase Filter Example -->
< html>
<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">
<p>Original Text: {{ originalText
}}</p>
<p>Uppercase Text: {{ originalText |
uppercase }}</p>
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('MyController',
function($scope) {
// Sample text
$scope.originalText = 'Hello,
AngularJS!';
});
</script>
</body>
</html>
10.Write an
AngularJS program for ng-copy and ng-paste event.
<ng-app="copyPasteApp">
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body>
<h2>AngularJS ng-copy and ng-paste Example</h2>
<textarea ng-model="copiedText"
ng-copy="onCopy()" ng-paste="onPaste()"
ng-focus="onFocus()"
ng-blur="onBlur()"></textarea>
<p>Copied Text: {{ copiedText }}</p>
<p>Clipboard Content: {{ clipboardContent }}</p>
</div>
<script>
var
copyPasteApp = angular.module('copyPasteApp', []);
copyPasteApp.controller('CopyPasteController', function($scope, $window)
{
$scope.copiedText = '';
$scope.clipboardContent = '';
$scope.onCopy = function() {
console.log('Text copied!');
};
$scope.onPaste = function() {
console.log('Text pasted!');
$scope.clipboardContent = $window.clipboardData.getData('Text');
// For
IE
};
console.log('Textarea focused!');
};
$scope.onBlur = function() {
console.log('Textarea blurred!');
};
});
</script>
</body>
</html>
