Scribd
Upload
16 views9 pages

Angular

Uploaded by

2217055
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
16 views9 pages

Angular

Uploaded by

2217055
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/ 9

ExNo:6 Build and implement Custom directives

Date:

AIM:
To build and implement custom directives using angular JS
ALGORITHM:
• Initialize Module: Define an AngularJS module with a name like myApp.
• Create Directive: Use app.directive to define the custom directive.
• Set Directive Type: Set the restrict option to define how the directive will be used
• Add Scope Variables: Bind attributes like title and description for dynamic content.
• Define Template: Provide an HTML template containing the structure and data bindings
• Optional DOM Manipulation: Use the link function to handle events like clicks
• Apply Directive: Use the custom directive in HTML with dynamic attributes for
content
PROGRAM:
<!DOCTYPE html>
<html>
<head>
<title>Attractive Custom Directive Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<style>
/* 1.a Add some basic styles */
.custom-box {
border: 2px solid #4CAF50;
border-radius: 10px;
padding: 20px;
margin: 20px auto;
width: 300px;
text-align: center;
background-color: #f9f9f9;
transition: background-color 0.3s, box-shadow 0.3s;
}
/* 1.b Hover effect for the box */
.custom-box:hover {
background-color: #e7ffe7;
box-shadow: 0px 0px 10px rgba(0, 128, 0, 0.3);
}
/* 1.c Style the title */
.custom-box h2 {
color: #4CAF50;
font-family: 'Arial', sans-serif;
}
/* 1.d Style the description */
.custom-box p {
color: #555;
font-size: 14px;
font-family: 'Arial', sans-serif;
}
/* 1.e Style the icon */
.icon {
font-size: 40px;
color: #4CAF50;
margin-bottom: 10px;
}
/* 1.f Add a simple click effect */
.custom-box:active {
background-color: #dfffdf;
box-shadow: 0px 0px 15px rgba(0, 128, 0, 0.5);
}
</style>
</head>
<body ng-app="myApp">
<!-- Apply custom directive with dynamic title and description -->
<custom-directive title="Welcome!" description="Click me to see a cool
animation."></custom-directive>
<script>
var app = angular.module('myApp', []);
app.directive('customDirective', function() {
return {
restrict: 'E', // Element directive
scope: {
title: '@', // 2.c Bind title attribute
description: '@' // 2.d Bind description attribute
},
template: `
<div class="custom-box">
<div class="icon">&#x1F44B;</div> <!-- Wave hand emoji as an icon -->
<h2>{{title}}</h2>
<p>{{description}}</p>
</div>
`,
link: function(scope, element, attrs) {
// 2.e Optional link function for click event
element.on('click', function() {
alert('You clicked the custom directive!');
});
}
};
});
</script>
</body>
</html>
OUTPUT:

RESULT:
Thus Developed a custom directive with dynamic content by binding attributes for title
and description, and applied CSS for styling and output was verified
ExNo:7 Create a Single page application (SPA) using angular framework
Date:
AIM:
To Create a Single page application (SPA) using angular framework
ALGORITHM:
• Initialize AngularJS App: Create a module (myApp) and include the ngRoute
dependency for routing functionality.
• Configure Routes: Use $routeProvider in the app’s configuration block to define routes
for different views (first.html, second.html, third.html). Assign a controller to each
route.
• Define HTML Templates: Use <script> tags to define AngularJS templates (first.html,
second.html, third.html) with corresponding HTML content and data bindings.
• Add Hyperlinks for Navigation: Provide links (<a> tags) to dynamically load the
specified routes using hash-based URLs (e.g., #/, #/second, #/third).
• Define Controllers: Implement three controllers (FirstController, SecondController,
ThirdController), each responsible for managing data and behavior for its respective
view.
• Display Views: Use the ng-view directive in the main HTML to render the appropriate
view based on the current route.
• Handle Default and Invalid Routes: Set a default route using otherwise() to redirect to
the first page if no valid route is provided.
PROGRAM:
<!--ng-app directive tells AngularJS that myApp
is the root element of the application -->
<html ng-app="myApp">
<head>
<!--import the angularjs libraries-->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js">
</script>
<style>
body {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>E-Learning</h1>
<h3>Great Learning Platform</h3>
<!--hg-template indicates the pages
that get loaded as per requirement-->
<script type="text/ng-template" id="first.html">
<h1>First Page</h1>
<h2 style="color:green">
Welcome to NEC
</h2>
<h3>{{message}}</h3>
</script>
<script type="text/ng-template" id="second.html">
<h1>Second Page</h1>
<h2 style="color:green">
Start Learning With GENAI
</h2>
<h3>{{message}}</h3>
</script>
<script type="text/ng-template" id="third.html">
<h1>Third Page</h1>
<h2 style="color:green">
Know about us
</h2>
<h3>{{message}}</h3>
</script>
<!-- Hyperlinks to load different
pages dynamically -->
<a href="#/">First</a>
<a href="#/second">Second</a>
<a href="#/third">Third</a>
<!--ng-view includes the rendered template of
the current route into the main page-->
<div ng-view></div>
<script>
var app = angular.module('myApp', []);
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'first.html',
controller: 'FirstController'
})
.when('/second', {
templateUrl: 'second.html',
controller: 'SecondController'
})
.when('/third', {
templateUrl: 'third.html',
controller: 'ThirdController'
})
.otherwise({ redirectTo: '/' });
});
app.controller('FirstController', function ($scope) {
$scope.message = 'Hello from FirstController';
});
app.controller('SecondController', function ($scope) {
$scope.message = 'Hello from SecondController';
});
app.controller('ThirdController', function ($scope) {
$scope.message = 'Hello from ThirdController';
});
</script>
</body>
</html>
OUTPUT:
RESULT:
Thus, developed an AngularJS application with dynamic routing by defining routes for
different views using $routeProvider, implemented controllers for each view to manage data,
and applied CSS for styling and the output was verified

You might also like