Single-Page Application (SPA)?
A Single-Page Application (SPA) is a web application that loads a single HTML page and
dynamically updates the content without refreshing the whole page.
Features of SPA:
● Only one HTML page is loaded.
● Content is updated dynamically using JavaScript.
● Faster user experience as only the required content is loaded.
● No full page reloads (uses AJAX or Fetch APIs behind the scenes).
Examples of SPAs:
● Gmail
● Google Maps
● Facebook
● Twitter
Why Use SPAs?
● Improved performance.
● Seamless navigation and smooth transitions.
● Reduced server load.
Routing in SPAs
✔ Routing is the mechanism of navigating between different views or components in an
application.
✔ Without routing: clicking a link takes you to a new HTML page (whole page
reloads).
✔ With routing: content updates inside one page, giving a fast and smooth
experience.
Example:
✔ Gmail updates inbox, sent items, etc., without reloading the full browser window.
Difference between Traditional Routing vs SPA Routing.
Feature Traditional Web App SPA
Page Reload Yes No
Server Interaction Full page served from Only data is fetched
server
URL Change Reloads new page Uses JavaScript to change
view
Speed Slower Faster
How SPA Routing Works:
SPA routing is handled on the client side using JavaScript frameworks like:
● AngularJS/Angular
● React
● Vue.js
Example
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/home", {
templateUrl : "home.html"
})
.when("/about", {
templateUrl : "about.html"
})
.otherwise({
redirectTo: "/home"
});
});
Step1:
✔ Creates a new AngularJS module named "myApp".
✔ "ngRoute" is a built-in AngularJS module used for routing (i.e., switching views
without reloading the page).
Step2:
app.config(function($routeProvider) {
✔ .config() is used to configure the app.
✔ It takes a function with $routeProvider, which is a special service used to define
routes (URLs) in AngularJS.
Step3:
$routeProvider
.when("/home", {
templateUrl : "home.html"
})
✔ When the user visits http://bldeacet.org/#/home, Angular will load the home.html file
into the page.
✔ templateUrl: points to the HTML content to be shown for this route.
.when("/about", {
templateUrl : "about.html"
})
Another route:
● When the URL is #/about, Angular will load the about.html view.
.otherwise({
redirectTo: "/home"
});
To handle invalid or unknown URLs and give the user a proper view instead of a blank or
broken page.
when("/home", {...})
.when("/about", {...})
Now, if :
#/home → shows home page
#/about → shows about page
#/contact → this route is not defined
Data Binding in AngularJS?
Data binding is the process that connects the data (JavaScript) and the UI (HTML). In
AngularJS, it's mainly two-way binding.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="">
<h2>Two-Way Data Binding</h2>
<input type="text" ng-model="name">
<p>Hello {{name}}!</p>
</body>
</html>
O/P:If user types "Shri", it instantly shows: Hello Shri!
Form Handling in AngularJS
AngularJS provides easy ways to build and validate forms.
Directive Purpose
ng-model Binds input to a variable
ng-submit Handles form submission
ng-required Makes a field mandatory
ng-show Shows message conditionally
name Assigns a name to the form/field
formName.inputName.$valid Checks input validity
Simple Form with Validation
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="">
<form name="myForm" ng-submit="submitForm()" novalidate>
Name: <input type="text" name="username" ng-model="user.name" ng-required="true">
<span style="color:red" ng-show="myForm.username.$touched &&
myForm.username.$invalid">
Name is required.
</span>
<br><br>
<button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>
<p>Entered Name: {{user.name}}</p>
</body>
</html>
Form States
AngularJS tracks form and input states using built-in properties:
Property Meaning
$pristine Not yet touched
$dirty Value has been changed
$touched Field was focused and blurred
$untouched Field not yet focused
$valid Field is valid
$invalid Field is invalid
Custom Directives in AngularJS
✔ creating your own HTML tag or attribute to do something.
✔ You create a shortcut or reusable block of code that you can use anywhere in your
HTML.
Example
var app = angular.module("myApp", []);
app.directive("myMessage", function() {
return {
template: "<h3>Hello! This is Shri’s custom message.</h3>"
};
});
Use it in HTML:
<div my-message></div>
✔ app.directive(...): Creates a new directive.
✔ "myMessage": The name of the directive.
✔ template: "<h3>...": This is the HTML that will be shown when the directive is used.
AngularJS automatically converts:
● myMessage → my-message
● greetUser → greet-user
● userInfoCard → user-info-card
Component in Angular js
✔ A component is like a special directive that is mainly used for UI building.
It includes:
✔ Template (what to show)
✔ Controller (what to do)
✔ It is used to create UI block,a small section of your page created to show or do
something.
Example
Step 1: JavaScript (component code)
var app = angular.module("myApp", []);
app.component("messageBox", {
template: "<div style='border:1px solid #ccc; padding:10px; width:250px;
background:#f9f9f9;'>Message: {{$ctrl.text}}</div>",
controller: function() {
this.text = "Welcome to BLDEA!";
}
});
Step 2: HTML to use the component
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
<!-- Using the message box component -->
<message-box></message-box> #It behaves like your own custom HTML element that
shows a part of the UI.
</body>
</html>
O/P
Message: Welcome to BLDEA!
With a light background and border, like a simple message alert box.
