Hello Ninjas! You must have heard of AngularJS and W3.CSS. AngularJS is a famous Javascript framework, and W3.CSS is a modern CSS framework. We will be looking at both of them in detail and will also cover the example of how to use W3.CSS with AngularJS.
Let's first start by learning about AngularJS.
AngularJS
AngularJS is a famous Javascript framework that is used for building web applications. It is preferred for creating Single Page Application projects (SPA). It helps extend HTML DOM with many additional attributes making it more responsive for user purposes. It is an open-source based framework used by thousands of developers all over the world.
Some of the features of AngularJS are:
AngularJS uses templates to define the structure of our application. These templates are written in HTML.
It uses a Model-View-Controller (MVC) architecture, which makes it easier to develop and maintain by separating the application into different components.
It provides routing support which helps us to build single-page applications with multiple views and navigate between them.
It provides built-in services like HTTP that helps you make requests to backend APIs and services.
It is a powerful framework for building interactive web applications rich in multiple features.
The AngularJS application is made up of various components such as directives, filters, providers, services, templates, etc. These components are contained in various modules such as ng, ngAnimate, ngAria, ngCookies, ngMock, etc.
You may refer to this article to learn in detail about modules.
To use AngularJS, we need to include it first in our HTML file, which can be done by using the script tag.
<script src="pathToYour/angular.min.js"></script>
Now let's see a basic example to show how AngularJS is used:
Example
We have shown the use of AngularJS using a simple web page. Let’s discuss the code:
First, we need to include the AngularJS library in our HTML code, which can be done using a script tag.
The ng-app directive is applied to the <body> element, which tells AngularJS that the entire <body> element and its children constitute an AngularJS application.
The ng-controller is applied to the <body> element and is named angularCtrl. It defines a scope variable named greeting with a value of "Hello Ninjas!".
The text of <p> tag "{{ greeting }}" is an AngularJS expression that is evaluated by the framework and replaced with the value of the greeting variable.
W3.CSS is a modern CSS framework with built-in responsiveness. To use it on the web pages, just add a link to W3.CSS. It is comparatively easier than other CSS frameworks. 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.
To use W3.CSS in our web pages, we need to include it using the following:
It provides a responsive grid system that helps us to create a wide range of layouts.
It contains a large collection of CSS styles for elements like buttons, tables, forms, etc.
It can easily customize the appearance of web pages using CSS variables.
It helps us create layouts and styles for devices like mobiles, tablets, etc., by providing built-in support.
It makes it easier for web developers to make visually appealing websites.
Before moving on with the implementation, let’s see some of the examples.
Examples
Let’s discuss how W3.CSS styles can be applied to the following elements.
Buttons
We can create buttons with many different styles. We can create a solid button, add a border to a button, change the shape, or add extra padding around the button text.
The above styles can be added using the following:
<!-- Solid colored button -->
<button class="w3-button w3-red">Red</button>
<!-- Add border to a button -->
<button class="w3-button w3-border w3-border-red">Border</button>
<!-- To chaneg button shape -->
<button class="w3-btn w3-black w3-round-xxlarge">Round</button>
<!-- Add extra padding around the button text -->
<button class="w3-btn w3-yellow w3-padding-large">Padding</button>
Inputs
We can customize the input tag in many ways. We can create bordered inputs or use colored labels to use different styles and colors.
The above styles can be added using the following:
We are now familiar with both AngularJS and W3.CSS, so let's see the implementation of both.
Complete Implementation
Let’s create a simple calculator using AngularJS and W3.CSS. Follow these steps:
First, create an HTML file and include both AngularJS and W3.CSS in the <head> section.
Provide the <body> element with the ng-app and ng-controller attributes, which define the AngularJS module and controller that handles the logic of the application.
We need to create a form to take inputs and print the output:
Create a div and provide it with class w3-container and style it by providing a margin and background color. This can be done by adding classes w3-margin and w3-pale-yellow.
Inside the form tag, create two inputs and provide them labels. We can customize the input by providing classes like w3-input, w3-border, w3-round, etc
Bind the inputs to the variables num1 and num2 using the directive ng-model.
Create four buttons and set the ng-click directive to the function solve(), and pass the appropriate operation.
In the script tag, create an AngularJS module named exampleApp and declare a controller angularCtrl within the module, which is provided in the body element.
Define the function inside the controller, which will check the operator using a switch statement and, after performing the operation, update the $scope.ans variable.
Access the answer using AngularJS expression binding, denoted by double curly braces {{}}, and display it using the paragraph tag.
Code
<!DOCTYPE html>
<html>
<head>
<!--
Include W3.CSS using this link
-->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<!--
Including AngularJS using script tag
-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app="exampleApp" ng-controller="angularCtrl">
<div class="w3-container cont w3-margin w3-pale-yellow" style="width:50%">
<h2>Simple Calculator</h2>
<form class="w3-margin-top">
<label>Enter First Number: </label>
<input type="number" class="w3-input w3-border w3-round w3-margin-bottom" style="width:60%" ng-model="num1"
placeholder="Number 1" ng-required="true">
<label>Enter Second Number: </label>
<input type="number" class="w3-input w3-border w3-round w3-margin-bottom" style="width:60%" ng-model="num2"
placeholder="Number 2" ng-required="true">
<button class="w3-button w3-black w3-round btn" ng-click="solve('+')">
+
</button>
<button class="w3-button w3-black w3-round btn" ng-click="solve('-')">
-
</button>
<button class="w3-button w3-black w3-round btn" ng-click="solve('*')">
x
</button>
<button class="w3-button w3-black w3-round btn" ng-click="solve('/')">
/
</button>
</form>
<p class="w3-text-red">The result is: {{ans}}</p>
</div>
<script>
var app = angular.module('exampleApp', []);
app.controller('angularCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.solve = (op) => {
switch (op) {
case '+':
$scope.ans = $scope.num1 + $scope.num2;
break;
case '-':
$scope.ans = $scope.num1 - $scope.num2;
break;
case '*':
$scope.ans = $scope.num1 * $scope.num2;
break;
case '/':
$scope.ans = $scope.num1 / $scope.num2;
break;
}
}
}]);
</script>
</body>
</html>
Output
Frequently Asked Questions
What is the difference between AngularJS and ReactJS?
The main difference between both is that AngularJS is a full-featured framework, while ReactJS is a library for building user interfaces. This means that React is focused on rendering UI, while Angular is focused on building complete client-side applications.
What is the benefit of learning modern W3.CSS?
W3.CSS is a modern CSS framework that is designed to help developers build responsive and mobile-first websites more quickly and easily. It can be applied to your HTML elements to apply consistent styling, layout, and responsive behaviour.
What classes does W3.CSS provide for buttons?
The W3.CSS provides many classes for buttons. Some of them are w3-btn for creating a rectangular button, w3-block for defining a full-width button, w3-circle to create a circular button, w3-disabled to disable a button, etc.
What are some important features of AngularJS?
AngularJS allows you to sync data between your UI and your JavaScript code easily. It separates the application into different components (model, view, and controller) to make it easier to develop and maintain. It also provides support for routing.
What do you mean by templates in AngularJS?
In AngularJS, a template is an HTML file that contains a combination of HTML, AngularJS directives, and AngularJS expressions. AngularJS uses templates to define the structure of the UI for an application.
Conclusion
This article discussed AngularJS and W3.CSS. We have gone through some theoretical knowledge of the same. We have seen some important points about W3.CSS and also implemented it in AngularJS. To gain a complete understanding, practice it by yourself.
If you are interested to learn further, you can check out our other blogs:
116+ registered 