Index
Sr.No. Title
1 Write a program to implement MongoDB data models
2 Write a program to implement CRUD operations on MongoDB
3 Write a program to perform validation of a form using AngularJS
4 Write a program to create and implement modules and controllers in
Angular JS
5 Write a program to implement Error Handling in Angular JS
6 Create an application for Customer / Students records using AngularJS
7 Write a program to create a simple web application using Express, Node
JS and Angular JS
8 Create a simple HTML “Hello World” Project using AngularJS
Framework and apply ng-controller, ng-model and expressions
9 Create an app using Flutter for User Authentication
10 Create an app using Flutter to implement an Image Gallery
11 Create an app using Flutter to demonstrate the use of different layouts
12 Create an app using Flutter to demonstrate navigation in an App
1
PRACTICAL 1
Aim: Write a program to implement MongoDB data models
Solution:
Step 1: Creating index.js and model.js file.
Step 2: Run the “npm init” command in the terminal to initialize the required
files.
Step 3: Installing “mongoose” package using “npm i mongoose” or “npm
install mongoose” in the project.
Step 4: Editing index.js file
Code:
const mongoose = require("mongoose");
mongoose.set('strictQuery', true);
mongoose.connect("mongodb://127.0.0.1:27017", {
dbName: "test", useUnifiedTopology: true, useNewUrlParser: true
}, err => err ? console.log(err) : console.log('Connected to database'));
// Creating Schema
const studentSchema = new mongoose.Schema(
{ name: String, rollNo: Number, class: String, age: Number, email:
String }
)
// Defining Student model
const Student = mongoose.model('Student', studentSchema);
// Create collection of Model
Student.createCollection().then(function () {
console.log('Collection is created!');
});
Step 5: Editing model.js file
Code:
const mongoose = require("mongoose");
//Scheme for collection
const studentSchema = new mongoose.Schema({
name: String,
rollNo: String,
class: String,
contactNo: String,
email: String
}, { collection: "students" });
//Exporting scheme
module.exports = mongoose.model("student", studentSchema);
Prepared by Asst.Prof.Dnyaneshwar Deore
2
Step 6: Executing “node index.js” command in terminal
Output:
Prepared by Asst.Prof.Dnyaneshwar Deore
3
PRACTICAL 2
Aim: Write a program to implement CRUD operations on MongoDB
Solution:
Step 1: Creating createCollection.js, insertOne.js, insertmany.js, getdata.js,
update.js, and delete.js file.
Step 2: Run the “npm init” command in the terminal to initialize the required
files.
Step 3: Installing “mongoose” package using “npm i mongoose” or “npm
install mongoose” in the project.
Step 4: Editing createCollection.js file
Code:
const mongoose = require("mongoose");
mongoose.connect("mongodb://127.0.0.1:27017", {
dbName: "test", useUnifiedTopology: true, useNewUrlParser: true
}, err => err ? console.log(err) : console.log('Connected to database'));
// Creating Schema
const studentSchema = new mongoose.Schema(
{ name: String, rollNo: Number, class: String, age: Number, email:
String }
)
// Defining Student model
const Student = mongoose.model('Student', studentSchema);
// get reference to database
var db = mongoose.connection;
// function to create collection of Model
Student.createCollection().then(function () {
console.log('Collection is created!');
});
// To Check error
db.on('error', console.error.bind(console, 'connection error:'));
Output:
Prepared by Asst.Prof.Dnyaneshwar Deore
4
Step 5: Editing insertOne.js file
Code:
const mongoose = require("mongoose");
mongoose.connect("mongodb://127.0.0.1:27017", {
dbName: "test", useUnifiedTopology: true, useNewUrlParser: true
}, err => err ? console.log(err) : console.log('Connected to database'));
// Creating Schema
const studentSchema = new mongoose.Schema(
{ name: String, rollNo: Number, class: String, age: Number, email:
String }
)
// Defining Student model
const Student = mongoose.model('Student', studentSchema);
// get reference to database
var Student1 = new Student({ name: 'VSatish', rollNo: 31, class: 'SyCs',
age: 19, email: '13VSatish@gmail.com' });
Student1.save(function(err,result){
if (err){
console.log(err);
}
else{
console.log(result)}});
Prepared by Asst.Prof.Dnyaneshwar Deore
5
Output:
Step 6: Editing insertmany.js file
Code:
const mongoose = require("mongoose");
mongoose.connect("mongodb://127.0.0.1:27017", {
dbName: "test", useUnifiedTopology: true, useNewUrlParser: true
}, err => err ? console.log(err) : console.log('Connected to database'));
// Creating Schema
const studentSchema = new mongoose.Schema(
{ name: String, rollNo: Number, class: String, age: Number, email:
String }
)
// Defining Student model
const Student = mongoose.model('Student', studentSchema);
// To insert Multi data in db
db.once('open', function () {
// save model to database
Student.insertMany([
{ name: 'test', rollNo: 31, class: 'SyCs', age: 20, email:
'testmail1@gmail.com' },
{ name: 'test1', rollNo: 32, class: 'SyCs', age: 18, email:
'testmail2@gmail.com' },
{ name: 'test2', rollNo: 33, class: 'SyCs', age: 25, email:
'testmail3@gmail.com' },
Prepared by Asst.Prof.Dnyaneshwar Deore
6
{ name: 'test3', rollNo: 34, class: 'SyCs', age: 21, email:
'testmail4@gmail.com' }
]).then(function(){
console.log("Data inserted") // Success
}).catch(function(error){
console.log(error) // Failure
});
});
Output:
Step 7: Editing getdata.js file
Code:
const mongoose = require("mongoose");
mongoose.connect("mongodb://127.0.0.1:27017", {
dbName: "test", useUnifiedTopology: true, useNewUrlParser: true
}, err => err ? console.log(err) : console.log('Connected to database'));
// Creating Schema
const studentSchema = new mongoose.Schema(
{ name: String, rollNo: Number, class: String, age: Number, email:
String }
)
// Defining Student model
const Student = mongoose.model('Student', studentSchema);
// To get All data from db
Student.find({}).then(data => {
console.log("Data:")
console.log(data);
Prepared by Asst.Prof.Dnyaneshwar Deore
7
}).catch(error => {
console.log(error);
})
Output:
Step 8: Editing update.js file
Code:
const mongoose = require("mongoose");
mongoose.connect("mongodb://127.0.0.1:27017", {
dbName: "test", useUnifiedTopology: true, useNewUrlParser: true
}, err => err ? console.log(err) : console.log('Connected to database'));
// Creating Schema
const studentSchema = new mongoose.Schema(
{ name: String, rollNo: Number, class: String, age: Number, email:
String }
)
// Defining Student model
const Student = mongoose.model('Student', studentSchema);
// To update data in db
Student.updateOne({name:"test3",age:30}, function (err, result) {
if (err){
console.log(err)
}else{
console.log("Result :", result)
}
});
Output:
Prepared by Asst.Prof.Dnyaneshwar Deore
8
Step 9: Editing delete.js file
Code:
const mongoose = require("mongoose");
mongoose.connect("mongodb://127.0.0.1:27017", {
dbName: "test", useUnifiedTopology: true, useNewUrlParser: true
}, err => err ? console.log(err) : console.log('Connected to database'));
// Creating Schema
const studentSchema = new mongoose.Schema(
{ name: String, rollNo: Number, class: String, age: Number, email:
String }
)
// Defining Student model
const Student = mongoose.model('Student', studentSchema);
// get reference to database
var db = mongoose.connection;
// To update data in db
Student.deleteOne({ age: 20 }).then(function(){
console.log("Data deleted"); // Success
}).catch(function(error){
console.log(error); // Failure
});
Output:
Prepared by Asst.Prof.Dnyaneshwar Deore
9
Prepared by Asst.Prof.Dnyaneshwar Deore
10
PRACTICAL 3
Aim: Write a program to perform validation of a form using AngularJS
Solution:
Step 1: Create index.html and welcome.html files.
Step 2: Editing index.html file
Code:
<!DOCTYPE html>
<html>
<head>
<title>
AngularJs Form Validation
</title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module('formApp', []);
app.controller('formCtrl', function ($scope) {
$scope.sendForm = function () {
window.open("welcome.html");
$scope.msg='Form Submited Successfully';
};
$scope.getClass = function (color) {
return color.toString();
});
</script>
Prepared by Asst.Prof.Dnyaneshwar Deore
11
<style>
.valid.false {
background: red;
.valid.true {
background: green;
.error {
color: red;
</style>
</head>
<body ng-app="formApp" ng-controller="formCtrl" bgcolor=”pink”>
<h3>Form validation demo app in AngularJs</h3>
<form name="personForm" ng-submit="sendForm()">
<label for="name">Name</label>
<input id="name" name="name" type="text" ng-model="person.name" required />
<span class="error" ng-show="personForm.name.$error.required"> Required!
</span>
<br /><br />
<label for="adress">Adress</label>
<input id="address" name="address" type="text" ng-model="person.address"
required />
<span class="error" ng-show="personForm.address.$error.required"> Required!
</span>
Prepared by Asst.Prof.Dnyaneshwar Deore
12
<br /><br />
<label for="contact">Contact No</label>
<input id="mobile" name="mobile" type="number" ng-model="person.mobile"
required />
<span class="error" ng-show="personForm.mobile.$error.required">Required
number!</span>
<span class="error" ng-show="personForm.mobile.$error.mobile">Invalid
mobile!</span>
<br /><br />
<label for="email">Email</label>
<input id="email" name="email" type="email" ng-model="person.email" required />
<span class="error" ng-show="personForm.email.$error.required">Required!</span>
<span class="error" ng-show="personForm.email.$error.email">Invalid
Email!</span>
<br /><br />
<input type="checkbox" ng-model="terms" name="terms" id="terms" required />
<label for="terms">I Agree to the terms.</label>
<span class="error" ng-show="personForm.terms.$error.required">You must agree
to the terms</span>
<br /><br />
<button type="submit">Submit Form</button>
<br /><br />
<span>{{msg}}</span>
</form>
</body>
</html>
Step 3: Editing welcome.html file
Prepared by Asst.Prof.Dnyaneshwar Deore
13
Code:
<html>
<head>
<title>Welcome Page</title>
</head>
<body bgcolor="yellow">
<h1>Record Successfully Submited............</h1>
</body>
</html>
OUTPUT
Prepared by Asst.Prof.Dnyaneshwar Deore
14
Prepared by Asst.Prof.Dnyaneshwar Deore
15
PRACTICAL 4
Aim: Write a program to create and implement modules and controllers in
AngularJS?
Solution:
Step 1: To create folder module and view page viewpage.html in root directory.
Step 2: Editing view page viewpage.html file
Code:
<html>
<head>
<title>Angular JS Modules</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="module/mainApp.js"></script>
<script src=" module/studentController.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>
Prepared by Asst.Prof.Dnyaneshwar Deore
16
<td>{{student.fullName()}}</td>
</tr>
<tr>
<td>Subject:</td>
<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>
</body>
</html>
Step 3:To create mainApp.js file inside module folder and editing script file
Code:
var mainApp = angular.module("mainApp", []);
Step 4: To create studentController.js inside module folder and editing
script file
Code:
mainApp.controller("studCtrl", function($scope){
$scope.student = {
fname: "Satish",
lname: "Vishwakarma",
fees: 150,
subjects:[
{name:"Advance app devloipment", marks:80},
{name:"Advance app devloipment", marks:80},
{name:"Advance app devloipment", marks:80},
{name:"Advance app devloipment", marks:80},
{name:"Advance app devloipment", marks:80},
{name:"Advance app devloipment", marks:80},
Prepared by Asst.Prof.Dnyaneshwar Deore
17
{name:"Advance app devloipment", marks:80},
],
fullName: function(){
var stud = $scope.student;
return stud.fname + " " + stud.lname;
}
};
});
Output:
Execution-To create package.json file
Prepared by Asst.Prof.Dnyaneshwar Deore
18
Finally run viewpage.html using start command inside terminal
Prepared by Asst.Prof.Dnyaneshwar Deore
19
Prepared by Asst.Prof.Dnyaneshwar Deore
20
