Responsive page in AngularJS

Last Updated : 23 Nov, 2022

The web development design that focuses on the dynamic changes to the appearance of a website, which depends upon the screen size and orientation of the device on which we are viewing it. This whole process to meet the ends of the user is called Responsive web design (RWD). So, basically the experience of the user when they access the website from any device they should be able to gain the best experience. Nowadays, the user is able to access the websites using and of devices like mobile phones, tablets, PCs and laptops. So, the convenience gained by them should be our priority. So, to achieve this we use RWD.Responsive designs use only HTML and CSS.

View Port:

View Port refers to the users visible area. It varies according to the device.Mobile phones will have smaller ones as compared to computers.

Syntax:

<!DOCTYPE html> 
   <html> 
     <head> 
       <meta name="viewport" 
             content="width=device-width, 
             initial-scale=1.0"> 
   </head> 
<body> 
  
<h2>GFG</h2> 
<p>Apply the above in between the  
head tag for responsive webpages.</p> 
  
</body> 
</html> 

This will help to view the webpage in 1×1 aspect ratio which will remove default functionality from the smartphone browsers and render the websites full-view which will allow the users to increase or decrease the size of the screen.

In HTML5 meta was introduced.It helped the browser to control the scalings and the dimensions.

width=device-width-Handles the width of the webpage.

initial-scale=1.0 part sets the initial zoom level(when the page is first loaded in the browser).

Grid-View:

Dividing the page into columns of mostly 12 grids which are approx to 100% of a total width of the screen.

Syntax:

* {
 box-sizing: border-box;
}

.A{
width: 20%;
float: left;
}
.B{
 width: 80%;
float: left;
}

Responsive image with up and down scaling:-

image {
 width: 100%;
 height: auto;
}

max-width property:

Image will scale down but not scale up to be larger than its original size:

image {
max-width: 100%;
height: auto;
}

Syntax:

.video { 
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video iframe, 
.video object,
.video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Responsive Typography:

Along with images and videos, it is very necessary to make text also responsive. 
The root element's font-size known as rem is used for this. 
@media (min-width: 640px) { body {font-size:1rem;} } 
@media (min-width:960px) { body {font-size:1.5rem;} } 
@media (min-width:1100px) { body {font-size:2rem;} }

How it is done?

Browser Agent String

Use CSS media queries.

Service:

Determine the device type and use appropriate partials.
ng-if and ng-switch to display required content.

Custom Directives:

No need to use ng-if and ng-switch to display the required content.More semantic approach.

HTML Markup API:

HTML Markup API

layout(row|column)

flex(integer values)

flex-order(integer values)

flex-offset(integer values)

layout-align

layout-fill

layout-wrap

layout-nowrap

layout-margin

layout-padding

show

hide

Breakpoints and Mediaqueries:

When the contents of the website are responded according to the width of the device which allows the best possible layout to the user is called Breakpoints or media query breakpoints, since, they are used with Mediaqueries. There are 2 ways to apply the breakpoints.

Media Query was introduced in CSS3 as a CSS technique.

Based on the device.

Landscape

@media screen
 and (device-width: 360px)
 and (device-height: 640px)
 and (-webkit-device-pixel-ratio: 3)
 and (orientation: landscape) {
 }

Smartphone Portrait

@media only screen and (min-width: 300px) {
}

Smartphone Landscape

@media only screen and (min-width: 480px) {
}

iPads (portrait)

 @media only screen and (min-device-width : 768px) 
   and 
(max-device-width : 1024px) 
   and
(orientation : portrait) {
...
}

Tablet Portrait

@media only screen and (min-width: 768px) {
}

Tablet Landscape/Desktop

@media only screen and (min-width: 1024px) {
}

Tablet Landscape/Desktop(1200px)

 @media only screen and (min-width: 1200px) {
...
}

Example:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" 
      content="width=device-width,  
               initial-scale=1"> 
<style> 
* { 
  box-sizing: border-box; 
} 
  
/* Style the top navigation bar */ 
.topnav { 
  overflow: hidden; 
  background-color: #32CD32; 
} 
  
  
.topnav a { 
  float: left; 
  display: block; 
  color: #228B22; 
  text-align: center; 
  padding: 14px 16px; 
  text-decoration: none; 
} 
  
/* Change color on hover */ 
.topnav a:hover { 
  background-color: #C0C0C0; 
  color: black; 
} 
  
  
@media screen and (max-width: 800px) { 
  .topnav a { 
    float: none; 
    width: 100%; 
  } 
} 
</style> 
</head> 
<body> 
  
<h2>Responsive navigation </h2> 
<p>Resize the browser window to see the effect: 
 When the screen is less than 800px,  
the navigation will be displayed vertically  
rather than of horizontally.</p> 
  
<div class="topnav"> 
  <a href="#">Link1</a> 
  <a href="#">Link2</a> 
  <a href="#">Link3</a> 
</div> 
  
</body> 
</html> 

Based on the content.

@media only screen (min-width: 768px){
...
 }
"or"
@media only screen and (min-width: 768px) and (max-width: 959px){
 ...
 }

Breakpoint	MediaQuery (pixel range)
xs	‘(max-width: 599px)’
gt-xs	‘(min-width: 600px)’
sm	‘(min-width: 600px) and (max-width: 959px)’
gt-sm	‘(min-width: 960px)’
md	‘(min-width: 960px) and (max-width: 1279px)’
gt-md	‘(min-width: 1280px)’
lg	‘(min-width: 1280px) and (max-width: 1919px)’
gt-lg	‘(min-width: 1920px)’
xl	‘(min-width: 1920px)’

Advantages Of Using AngularJs for Responsive Design:

Creation of web applications faster with less effort-AngularJs uses HTML code. No need to write lengthy MVC pipelines. Fewer lines of code.
Secure and responsive web designs-Secure HTTP calls are made to establish communication with the server. RESTful APIs and web services help in this communication. A proper and ideal security major is to be taken by any enterprise to make their security more powerful and to secure the AngularJS applications.
Easy integration-Responsive Web App Development Using AngularJS enables collaboration. Web developers working with object-oriented MVC for server-side and other know models can learn and use AngularJS easily. Dependency injection has made is possible for the developers to integrate the modules already developed with AngularJS. There are many libraries present and supplements AngularJS to develop new functionality within the projects.

Using Bootstrap with AngularJs:

Angular’s strong model-driven design using a Model View Controller (MVC) approach allows developers who are new to Angular to quickly pick it up and be productive. There is a bit of a learning curve, particularly on understanding Angular’s directives, but the overall reduction of the code required for two-way server binding is much less than what we were used to with jQuery.

Example 1: AngularJs

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" 
      content="width=device-width,  
               initial-scale=1.0"> 
<style> 
body { 
  background-color: lightgreen; 
} 
  
@media only screen and (max-width: 600px) { 
  body { 
    background-color: lightblue; 
  } 
} 
</style> 
<div ng-app> 
  <div ng-controller="ClickToEditCtrl"> 
    <div ng-hide="editorEnabled"> 
      {{title}} 
      <a href="#" 
         ng-click="editorEnabled=!editorEnabled"> 
            Edit title</a> 
    </div> 
    <div ng-show="editorEnabled"> 
      <input ng-model="title"> 
      <a href="#" 
         ng-click="editorEnabled=!editorEnabled"> 
                    Done editing?</a> 
    </div> 
  </div> 
</div> 
</body> 
</html> 

function ClickToEditCtrl($scope) { 
  $scope.title = "Welcome to GFG!"; 
}

Output:

Example 2:

Responsive Image:

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" 
      content="width=device-width, 
               initial-scale=1.0"> 
<style> 
body { 
  background-color: green; 
} 
  
@media only screen and (max-width: 700px) { 
  body { 
    background-color: lightgreen; 
  } 
} 
</style> 
</head> 
<body> 
  
<p>Welcome To GeeksforGeeks!!!</p> 
  <p>Size less than 700px is lightgreen</p> 
  <p>Size greater than 700px is green</p> 
</body> 
</html> 