AngularJS and W3CSS

Pradipta Choudhury
Last Updated: May 13, 2022

Introduction

In the previous articles, we have already covered the CSS. CSS describes how beautifully all the HTML elements should be displayed over the web page. The HTML elements include head, footer, fonts, spacing, etc. If you are getting confused between HTML and CSS, refer here

In this article, we will be covering the W3.CSS and AngularJS.

W3.CSS

It is a modern framework with built-in responsiveness. It is very easy to use. For using it in the web pages, just add a link to W3.CSS. In comparison to other CSS frameworks, W3.CSS is very easy to learn and use. It speeds up the tasks done and simplifies the web development process. It also supports modern devices like mobiles, tablets, laptops, and desktops. W3.CSS behaves to be a strong alternative to bootstrap and it was developed by W3 school. 

AngularJS

AngularJS is a famous Javascript framework that is used for adding an HTML page by <script> tag. In other words, AngularJS is a library written in Javascript. AngularJS is preferred for single-page application projects(SPA). It helps in extending HTML DOM with many additional attributes making it more responsive for user purposes. AngularJS also provides a structural framework for dynamic web apps and is also responsible for extending HTML with new attributes. And as we already know, it is an open source-based framework, it is free to use and is used by thousands of developers all over the world. Further, AngularJS also supports automated testing and single-page application also goes well with it. Code cleanliness and reusability are also provided by AngularJS. Now, just to give you a little more excited about it, let’s write a hello world program.

<html>
  <head>
      <title>AngularJS First Application</title>
  </head>
  
  <body>
      <h1>Sample Application</h1>
      
      <div ng-app = "">
        <p>Enter your Name: <input type = "text" ng-model = "name"></p>
        <p>Hello <span ng-bind = "name"></span>!</p>
      </div>
      
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
  </body>
</html>

 

 

Output:

Mobile-view

 

Desktop-view

 

Tablet-view

As the AngularJS is very comfortable to fit in, it easily gets fits in every device. Not you have hopefully got an idea how the mystery is AngularJS. Now, let's see some interesting features about W3.CSS.

Points to ponder about W3.CSS

  • W3-container: It is responsible for adding 16px left and right padding to any HTML element. This feature is used for adding HTML container elements like: <header>, <div>, <footer> etc.
  • w3-fontSize: the valid sizes existing are: w3-tiny, w3-small, w3-medium, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo.
  • w3-text: this feature is responsible for providing CSS features like alignment, opacity, shadow, special effect. 
  • w3-input: this feature is responsible for providing input cards, colored levels, borders, checkbox, radio buttons, etc.

 

Implementation

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<style>

.pad {
margin0 0 0 0;
}
</style>

</head>

<body ng-app="myApp" ng-controller="myCtrl">

<div class="w3-container ">

<p class="w3-jumbo w3-text-green pad"
align="center">Coding Ninjas</p>


<p class="w3-large w3-text-green pad"
align="center" >
A computer science portal for geeks</p>

<form>

<h3 align="center" > Enter user details </h3>

<label>First Name:</label>
<input class="w3-input w3-border w3-round-xxlarge"
type="text"
ng-model="fname"
placeholder="First Name"></br>

<label>Last Name:</label>
<input class="w3-input w3-border w3-round-xxlarge"
type="text"
ng-model="lname"
placeholder="Last Name"></br>

<label>Email id:</label>
<input class="w3-input w3-border w3-round-xxlarge"
type="email"
ng-model="mail"
placeholder="Email id"></br>

<label>Password:</label>
<input class="w3-input w3-border w3-round-xxlarge"
type="password"
ng-model="pass"
placeholder="Password"></br>

<p align="center">
<button class="w3-btn w3-green w3-ripple " >
Save </button></p>


</form>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl'function($scope) {
$scope.fname = "Fname";
$scope.lname = "Lname";
$scope.mail = "user@demo.com";
$scope.pass = "password";
});
</script>
</body>
</html>

 

Output:

 

 

Frequently asked questions

  • The angularJS is an open framework. Comment on its favor?
    AngularJS is a JavaScript-based open-source front-end web framework. This framework is responsible for developing single-page applications. The maintenance work is performed by Google and a community of individuals and corporations.
     
  • What is the difference between AngularJS and ReactJS? 
    The primary difference between AngularJS and ReactJS lies in the state of its management. AngularJS has data binding bundled in by default, whereas Redux generally augments react to give unidirectional data flow and work with immutable data.
     
  • What is the benefit of learning modern W3.CSS?
    W3.CSS is a modern CSS framework that has built-in responsiveness. It is worth learning as it is smaller in size and faster than traditional CSS.

Key takeaways

This article gives us an idea about angularJS and W3CSS. Keeping the theoretical knowledge at our fingertips helps us get about half the work done. To gain complete understanding, practice is a must. To achieve thorough knowledge on full-stack web development you may refer to our full-stack web development course.

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think