MEAN STACK DEVELOPMENT

movieapp.txt

 01.File Hierarchy

1.fileHieracy
Angular Js Part
1. Angular Module - angularModule.js

'use strict';

const app = angular.module("movieTicketOnline", ["ngRoute"]);
2. Angular Controller - controller.js

'use strict';

app.controller('addmovieController',['$scope','movieService','$routeParams', function($scope,movieService,$routeParams) {

$scope.status = "This is Add Movie Controller";

//$scope.header = "navigation/header.html";

//$scope.movies = movieService.query();

$scope.back = function () {

window.history.back();

};

//View

function viewMovie(){

movieService.get().then(function(data){

$scope.movies = data;

});

}

viewMovie();

//Add

$scope.addMovie = function(movie){

movieService.add(movie);

viewMovie();

$scope.movie= null;

}

//Update

$scope.updateMovie = function(id,movie){

movieService.update(id,movie);

$scope.movie= null;

viewMovie();

}

//Edit

$scope.editMovie= function(id){

movieService.getById(id).then(data => {

$scope.movie = data;

});

viewMovie();

//$scope.movie= null;

}

//Delete

$scope.deleteMovie = function(id){

movieService.delete(id);

viewMovie();

//$scope.movie= null;

}

//Clear

$scope.clear=function(){

$scope.movie=null;

}

}]);

app.controller('movieController', ['$scope','movieService','$location','$routeParams', function ($scope,movieService,$location) {

//$scope.header = "navigation/header.html";

//$scope.movies = movieService.query();

function viewMovie(){

movieService.get().then(function(data){

$scope.movies = data;

});

}

viewMovie();

}]);

app.controller('movieDetailsController', ['$scope','movieService','$routeParams','$location', function ($scope,movieService,$routeParams,$location) {

// $scope.header = "navigation/header.html";

//$scope.getMovieById($routeParams.id);

$scope.back = function () {

window.history.back();

};

movieService.getById($routeParams.id).then(data => {

$scope.movie = data;

});

}]);

app.controller('bookTicketsController', ['$scope','movieService','ticketService','$routeParams','$location', function ($scope,movieService,ticketService,$routeParams,$location) {

//$scope.header = "navigation/header.html";

//$scope.getMovieById($routeParams.id);

console.log($routeParams.id);

$scope.back = function () {

window.history.back();

};

movieService.getById($routeParams.id).then(data => {

$scope.movie = data;

});

$scope.addTicket = function(ticket){

ticketService.add(ticket);

//viewMovie();

$scope.ticket= null;

}

}]);
3. Angular Service - service.js

'use strict';

app.factory('movieService',['$http','$location',function ($http, $location) {

return {

getById: id => $http.get('/movie/' + id).then(function(response){

return response.data;

}).catch(function(response){

return response.data;

}),

get : () => {

return $http.get('/movie').then(function(response){

console.log(response.data);

return response.data;

}).catch(function(response){

return response.data;

});

},

add : function(movie){

$http.post('/movie',movie).then(function(response){

if (response.data == "OK") {

console.log(response.data);

$location.path('/addmovie');

}

}).catch(function(response){

console.log("Out");

$location.path('/');

});

},

update : function(id,movie){

$http.put('/movie/'+id,movie).then(function(response){

console.log("success in update :"+response.data );

}).catch(function(response){

console.log("Error in update :"+response.data );

});

},

delete: id => $http.delete('/movie/' + id).then(function(response){

console.log("Successfully Deleted");

//return response.data;

}).catch(function(response){

console.log(" Error in delete");

//return response.data;

})

}

}]);

app.factory('ticketService',['$http','$location',function ($http, $location) {

return {

add : function(ticket){

$http.post('/ticket',ticket).then(function(response){

if (response.data == "OK") {

console.log(response.data);

$location.path('/addticket');

}

}).catch(function(response){

console.log("Out");

$location.path('/');

});

}

}

}]);
4. Angular Router - router.js

'use strict';
app.config(function ($routeProvider) {
 $routeProvider
 .when("/", {
 templateUrl: "home.html",
 controller: "movieController"
 })
 .when("/addmovie", {
 templateUrl: "addmovie.html",
 controller: "addmovieController"
 })
 .when("/movieinfo/:id", {
 templateUrl: "movie.html",
 controller: "movieDetailsController"
 })
 // form to book a ticket
 .when("/movieticket/:id", {
 templateUrl: "buyticket.html",
 controller: "bookTicketsController"
 })
 .otherwise({
 redirectTo: "/"
 });
});

Node Js Part
1.Index - index.js

'use strict';

var express = require("express"),

mongoose = require('mongoose'),

bodyParser = require("body-parser");

// create express app

var app = express();

mongoose.Promise = global.Promise;

app.use(bodyParser.urlencoded({

extended: true

}));

app.use(bodyParser.json());

app.set("view options", {

layout: false

});

app.set('port', process.env.PORT || 3000);

app.use(express.static(__dirname + "/public"));

app.use(express.static(__dirname + "/server"));

app.use(express.static(__dirname + "/views"));

var dbHost = process.env.DB_HOST || 'localhost';

var dbPort = process.env.DB_PORT || 27017;

var dbName = process.env.DB_NAME || 'movieApi';

var dbURL = 'mongodb://'+dbHost+':'+dbPort+'/'+dbName;

mongoose.connect(dbURL, function(res, err){

if (err) {

console.log("There is a problem connecting to the MongoDB");

} else {

console.log("Successfully Connected to the MongoDB");

}

});

app.get("/", function (req, res) {

res.sendFile("views/index.html");

});

require('./server/routes/movieRoutes')(app);

require('./server/routes/ticketRoutes')(app);

app.listen(app.get('port'), function(){

console.log("Express Started on http://localhost:"+app.get('port')+ " press ctrl-c to terminate ");

});
2.Movie Routes - movieRoutes.js

'use strict';

var Movie = require('../modal/movie.model');

var mongoose = require('mongoose');

var MovieModel = mongoose.model('Movie');

module.exports = function(app) {

app.get('/movie', function(req, res){

MovieModel.find().populate('movies').exec().then(movies => {

res.json(movies);

}).catch(err => {

res.sendStatus(500);

});

});

app.get('/movie/:id', function(req, res){

MovieModel.findById(req.params.id).populate('movies').exec().then(movie => {

res.json(movie || {});

}).catch(err => {

res.sendStatus(500);

});

});

app.post('/movie', function(req, res){

console.log(req.body);

var movie = new MovieModel(req.body);

movie.save().then(movie => {

res.sendStatus(200);

}).catch(err => {

res.sendStatus(500);

});

});

app.put('/movie/:id', (req, res) => {

console.log("inside put");

const movie = req.body;

delete movie._id;

const movieId = req.params.id;

MovieModel.findByIdAndUpdate(movieId, {$set: movie}).then(movieUD => {

res.json(movie);

}).catch(err => {

res.sendStatus(500);

});

});

app.delete('/movie/:id',function(req,res){

MovieModel.remove({_id:req.params.id}).then(movie => {

res.sendStatus(200);

}).catch(err => {

res.sendStatus(500);

});

});

};
3.Ticket Routes - ticketRoutes.js

'use strict';

var Ticket = require('../modal/ticket.model');

var mongoose = require('mongoose');

var TicketModel = mongoose.model('Ticket');

module.exports = function(app) {

app.post('/ticket', function(req, res){

console.log(req.body);

var ticket = new TicketModel(req.body);

ticket.save().then(ticket => {

res.sendStatus(200);

}).catch(err => {

res.sendStatus(500);

});

});

};
4.Movie Model - movie.model.js

'use strict';

var mongoose = require('mongoose');

var movie = new mongoose.Schema({

name : String,

year : Number,

description : String,

director : String,

writer : String,

mainStar : String,

});

module.exports = mongoose.model('Movie', movie);
5.Ticket Model - ticketModel.js

'use strict';

var mongoose = require('mongoose')

, Schema = mongoose.Schema;

var ticket = Schema({

mname : String,

mid : { type: Schema.Types.ObjectId, ref: 'Movie' },

qty : Number,

date : String,

});

module.exports = mongoose.model('Ticket', ticket);
HTML PART
1.index - index.html

<!DOCTYPE html>

<!-- starts angular app -->

<html ng-app="movieTicketOnline">

<head>

<title>Movie Tickets Online</title>

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<link href="css/bootstrap.css" rel="stylesheet">

</head>

<body class="container">

 

http://js/jquery.min.js

http://js/bootstrap.min.js

http://js/angular.min.js

http://js/angular-route.min.js

<!--http://js/angular-resource.min.js-->

http://angularModule.js

http://router/router.js

http://controller/controller.js

http://service/service.js

</body>

</html>
2.Home - home.html

<!--<h2>Movies</h2>

<!--<div class="album text-muted">-->

<!--<div class="container">

<!--<div class="collapse navbar-collapse">

<ul class="nav navbar-nav">

<li data-ng-class="{active:isActive('/')}">

<a href="#">Movies</a>

</li>

<li data-ng-class="{active:isActive('/bookings')}">

<a href="#/addmovie">Add Movie</a>

</li>

</ul>

</div>

<input type="text" placeholder='Search Movies' class="form-control" ng-model="search">

<div class="row">

<div class="col-sm-12">

<div class="col-sm-4" ng-repeat="movie in movies | orderBy:'name' | filter:search">

<h2>{{movie.name | uppercase}}</h2>

<h4>{{movie.year}}</h4>

<p>

<img ng-src="{{movie.url}}" class="thumb-big">

</p>

<p>{{movie.description| limitTo:40}}...</p>

<a href="#/movieinfo/{{movie._id}}" class="btn btn-primary">More Info</a>

<a href="#/movieticket/{{movie._id}}" class="btn btn-success " role="button">Buy Ticket</a>

<!-- data-ng-disabled="movie.availability == 0" -->

</div>

</div>

</div>

</div>

</div>

 


3. Add View Edit Update Delete Search Movie - addmovie.html

<!--
4. Movie Information - movie.html

<div class="container">

<a ng-click="back()" class="btn btn-info" href="javascript:">« Back</a>

<br>

<h1><b>{{movie.name}} - {{movie.year}}</b></h1>

<div class="row">

<div class="col-sm-12 col-offset-sm-4">

<img class="thumb-big" data-ng-src="{{movie.url}}">

</div>

<div class="col-xs-12 col-sm-6 col-md-8">

<h3><b>Description</b></h3>

<h3>{{movie.description}}</h3>

<h3><b>Director :</b>{{movie.director}}</h3>

<h3><b>Writer :</b>{{movie.writer}}</h3>

<h3><b>Movie Star:</b>{{movie.mainStar}}</h3>

</div>

<div class="col-sm-12">

<a href="#/movieticket/{{movie._id}}" class="btn btn-success " role="button">Buy Ticket</a>

</div>

</div>

</div>
5.Buy Ticket - buyticket.html


<div class="container">

<div class="row">

<br>

<br>

<a ng-click="back()" class="btn btn-info" href="javascript:">« Back</a>

<br>

<h1><b>{{movie.name}} - {{movie.year}}</b></h1>

<div class="col-sm-12">

<form class="well form-horizontal" name="ticketForm">

<input type="hidden" name="mname" ng-model="ticket.mname" value="{{movie.name}}" placeholder="{{movie.name}}">

<input type="hidden" name="mid" ng-model="ticket.mid" value="{{movie._id}}" placeholder="{{movie._id}}">

<div class="form-group">

<label for="qty">How Many Tickets?</label>

<input type="text" ng-model="ticket.qty" name="qty" id="qty" ng-pattern="onlyNumbers" placeholder="Quantity" value="1" required class="form-control">

</div>

<div class="form-group">

<label for="date">Date</label>

<select class="form-control" name="date" id="date" ng-model="ticket.date" required>

<option>Friday 8:00 PM</option>

<option>Friday 10:00 PM</option>

<option>Saturday 2:00 PM</option>

<option>Saturday 6:00 PM</option>

<option>Saturday 8:00 PM</option>

</select>

</div>

<button type="submit" ng-click="addTicket(ticket)" class="btn btn-warning" >SUBMIT <span class="fa fa-fw fa-send"></span></button>

</form>

</div>

</div>

</div>