Lab6

FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard University
Lab # 06
AngularJS & Node.js
Objectives:
 To learn the structure of AngularJS &Node.js.
Theory:
Angualr JS
Angular JS is an open source JavaScript framework that is used to build web applications.
It can be freely used, changed and shared by anyone.
Angular Js is developed by Google. It is an excellent framework for building single phase

applications and line of business applications.
Advantages of AngularJS
o Dependency Injection: Dependency Injection specifies a design pattern in which
components are given their dependencies instead of hard coding them within the
component.
o Two way data binding: AngularJS creates a two way data-binding between the select
element and the orderProp model. orderProp is then used as the input for the orderBy
filter.
o Testing: Angular JS is designed in a way that we can test right from the start. So, it is
very easy to test any of its components through unit testing and end-to-end testing.
o Model View Controller: In Angular JS, it is very easy to develop application in a clean
MVC way. You just have to split your application code into MVC components i.e.
Model, View and the Controller.
o Directives, filters, modules, routes etc.
Hamdard University
Example # 1
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HelloController" >
<h2>Hello {{helloTo.title}} !</h2>
</div>
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "World, AngularJS";
} );
</script>
</body>
</html>
Example # 2
<!DOCTYPE html>
<html lang="en">
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form>
First Name: <input type="text" ng-model="firstname">
</form>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.firstname = "Faheem";
});
</script>
</body>
</html>
Hamdard University
AngularJS with tables/CSS
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Table</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "studentController">
<table border = "0">
<tr>
<td>Enter first name:</td>
<td><input type = "text" ng-model = "student.firstName"></td>
</tr>
<tr>
<td>Enter last name: </td>
<td>
<input type = "text" ng-model = "student.lastName">
</td>
</tr>
<tr>
<td>Name: </td>
<td>{{student.fullName()}}</td>
</tr>
<tr>
<td>Subject:</td>
Hamdard University
<td>
<table>
<tr>
<th>Name</th>.
<th>Marks</th>
</tr>
<tr ng-repeat = "subject in student.subjects">
<td>{{ subject.name }}</td>
<td>{{ subject.marks }}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.student = {
firstName: "Rahul",
lastName: "Rai",
fees:500,
subjects:[
{name:'Physics',marks:850},
{name:'Chemistry',marks:80},
{name:'Math',marks:90},
{name:'English',marks:80},
{name:'Hindi',marks:70}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
</script>
</body>
Hamdard University
</html>
AngularJS with selectors
<!DOCTYPE html>
<html>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Java", "PHP", ".Net", "AngularJS", "C/C++"];
});
</script>
</body>
</html>
AngularJS with DOM
<!DOCTYPE html>
<html>
<head>
<title>AngularJS HTML DOM</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "">
<table border = "0">
<tr>
<td><input type = "checkbox" ng-model = "enableDisableButton">Disable Button</td>
<td><button ng-disabled = "enableDisableButton">Click Me!</button></td>
</tr>
<tr>
<td><input type = "checkbox" ng-model = "showHide1">Show Button</td>
<td><button ng-show = "showHide1">Click Me!</button></td>
</tr>
<tr>
Hamdard University
<td><input type = "checkbox" ng-model = "showHide2">Hide Button</td>

<td><button ng-hide = "showHide2">Click Me!</button></td>
</tr>
<tr>
<td><p>Total click: {{ clickCounter }}</p></td>
<td><button ng-click = "clickCounter = clickCounter + 1">Click Me!</button></td>
</tr>
</table>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</body>
</html>
Node.js
Node.js is a cross-platform runtime environment and library for running JavaScript applications
outside the browser. It is used for creating server-side and networking web applications. It is
open source and free to use. It can be downloaded from this link https://nodejs.org/en/
Many of the basic modules of Node.js are written in JavaScript. Node.js is mostly used to run
real-time server applications.
The definition given by its official documentation is as follows:
?Node.js is a platform built on Chrome's JavaScript runtime for easily building fast and scalable
network applications. Node.js uses an event-driven, non-blocking I/O model that makes it
lightweight and efficient, perfect for data-intensive real-time applications that run across
distributed devices.?
Node.js also provides a rich library of various JavaScript modules to simplify the development of
web applications.
Example # 1
console.log('Hello BSSE');
Hamdard University
After this, running it on Node.js compiler..!
Node.js Events
In Node.js applications, Events and Callbacks concepts are used to provide concurrency. As
Node.js applications are single threaded and every API of Node js are asynchronous. So it uses
async function to maintain the concurrency. Node uses observer pattern. Node thread keeps an
event loop and after the completion of any task, it fires the corresponding event which signals the
event listener function to get executed.
Difference between Events and Callbacks:
Although, Events and Callbacks look similar but the differences lies in the fact that callback
functions are called when an asynchronous function returns its result where as event handling
works on the observer pattern. Whenever an event gets fired, its listener function starts
executing. Node.js has multiple in-built events available through events module and
EventEmitter class which is used to bind events and event listeners.
// Import events module & EventEmitter class to bind event and event
listener:
1. var events = require('events');
2. // Create an eventEmitter object
3. var eventEmitter = new events.EventEmitter();
4.
5. // Create an event handler as follows
6. var connectHandler = function connected() {
7. console.log('connection succesful.');
Hamdard University
8.
9. // Fire the data_received event
10. eventEmitter.emit('data_received');
11. }
12.
13. // Bind the connection event with the handler
14. eventEmitter.on('connection', connectHandler);
15. // Bind the data_received event with the anonymous function
16. eventEmitter.on('data_received', function(){
17. console.log('data received succesfully.');
18. });
19. // Fire the connection event
20. eventEmitter.emit('connection');
21. console.log("Program Ended.");
What is Punycode
Punycode is an encoding syntax which is used to convert Unicode (UTF-8) string of characters
to basic ASCII string of characters. Since host names only understand ASCII characters so
Punycode is used. It is used as an internationalized domain name (IDN or IDNA). Let's
understand it with an example:
Assume if you search for mañana.com in your browser so your browser (which is IDNA
enabled) first convert this to punycode xn--maana-pta.com because the character ñ is not allowed
in regular domain name. It is not supported in older versions.
punycode.decode(string)
It is used to convert a Punycode string of ASCII symbols to a string of Unicode symbols.
1. punycode = require('punycode');
2. console.log(punycode.decode('maana-pta'));
Hamdard University
punycode.encode(string)
2. console.log(punycode.encode('☃-⌘'));
punycode.toASCII(domain)
2. console.log(punycode.toASCII('mañana.com'));
Hamdard University
Lab Task:
Q1. Apply the validation terms, create a webpage of AngularJS forms in which you apply validations.
Q2. By Applying the AngularJs, Create an any example of animation.
Q3. Identify the errors and find out the filters module in this code.
1. <div ng-app="myApp" ng-controller="personCtrl">

2. <p>The name is {{ firstName | uppercase }}</p>
3. </div>
4. <script>
5. angular.module('myApp', []).controller('personCtrl', function($scope) {
6. $scope.firstName = "Sonoo",
7. $scope.lastName = "Jaiswal"
8. });
9. </script>
Note: Attach a snap shot of every above mentioned task.
Learning outcomes:

Lab6

Uploaded by

Copyright:

Available Formats

Lab6

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lab6

Uploaded by

Copyright:

Available Formats

FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY

 To learn the structure of AngularJS &Node.js.

It can be freely used, changed and shared by anyone.

Angular Js is developed by Google. It is an excellent framework for building single phase

AngularJS with tables/CSS

AngularJS with selectors

AngularJS with DOM

<td><input type = "checkbox" ng-model = "showHide2">Hide Button</td>

The definition given by its official documentation is as follows:

After this, running it on Node.js compiler..!

Difference between Events and Callbacks:

It is used to convert a Punycode string of ASCII symbols to a string of Unicode symbols.

Q2. By Applying the AngularJs, Create an any example of animation.

1. <div ng-app="myApp" ng-controller="personCtrl">

Note: Attach a snap shot of every above mentioned task.

You might also like