AngularJS And ASP.NET MVC Movie Library Application - Part Two

Sachin Kalia
8y
7.4k
0
4

Article

Hope you have had a chance to look into last the tutorial here which states about the technology stack and a other few vital keywords and terminology. Moving ahead in this article we’ll focus on adding a html page and will create module and controller as well as $scope element. Let’s get our hands dirty with AngularJS & ASP.NET MVC Movie Library Application Tutorials part two.

AngularJS And ASP.NET MVC Movie Library Application - Part One

This is the technology stack for this Movie library application as shown below,

stack

Kindly create a MVC application as I have created and name it as per your need, for now I have also selected test project because we may write some TDD code later if needed though it is not essential. I’ve also added Application folder as per my need.

folder

After creating go to sample project, kindly go to NuGet package manager and choose AngularJS from there as shown in the below screen shots.

Go to the application folder and add an html page and named it Movie.html as shown in solution structure also. Add the following code in your respective page (movie.html) to make it function.

Code segment Movie.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<h2>Movie Rating Portal</h2>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="../Scripts/angular.js"></script>
<style>
.selected
{
background-color: lightyellow;
color: red;
font-weight: bold;
}
</style>
</head>
<body ng-app="routingApp" class="jumbotron">
<div ng-controller="MovieController" class="container">
<div ng-show="success" class="alert-success">Record has been upddated for movie : {{updatedMovie.title}}</div>
<div class="row col-md-8">
<table class="table table-striped ">
<thead class="thead-inverse">
<th style="background-color: Highlight">Title</th>
<th style="background-color: Highlight">Year of Release</th>
<th style="background-color: Highlight">Rating</th>
<th style="background-color: Highlight">Plot</th>
<th style="background-color: Highlight">Actions</th>
</thead>
<tr>
<td>
<input type="text" ng-model="movie.title" class="form-control" />
</td>
<td>
<input type="text" ng-model="movie.year" class="form-control" />
</td>
<td>
<input type="text" ng-model="movie.rating" class="form-control" />
</td>
<td>
<input type="text" ng-model="movie.plot" class="form-control" />
</td>
<td>
<button type="button" class="btn btn-primary">
<span class="glyphicon glyphicon-plus"></span>
</button>
</td>
</tr>
<tbody>
<tr ng-repeat="movie in movies" ng-class="{'selected':$index == selectedRow}">
<td>{{movie.title}}
</td>
<td>{{movie.year}}
</td>
<td>{{movie.rating}}
</td>
<td>{{movie.plot }}
</td>
<td>
<button type="button" class="btn btn-warning">
<span class="glyphicon glyphicon-pencil"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

Note : Kindly add the reference of bootstrap as given below on movie.html partial template file.

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

We are almost done with the UI part and it’s time to create Module and a controller to make .html fully functional. Add a .js file too -- I’ve added routing.js file and added the following code segment in that.

/// <reference path="../Scripts/angular.js" />
var routingApp = angular.module('routingApp', []);
routingApp.controller("MovieController", ['$scope', function ($scope) {
$scope.edit = false;
$scope.message = "Welcome to DotnetPiper.com to learn Angular";
$scope.error = false;
$scope.success = false;
// alert("Servcie Called");
var movies = [
{ title: "Revenent", year: "2015", rating: "5Star", plot: " A revenger Journey" },
{ title: "Counjouring2", year: "2016", rating: "4Star", plot: " A Complete Hourror" },
{ title: "DDLJ", year: "1995", rating: "SuperStar", plot: "Romantic love story" },
{ title: "Sultan", year: "2016", rating: "5Star", plot: "A Warrior" },
{ title: "BajiRao Mastani", year: "2015", rating: "4.5 Star", plot: "Film of the Year" }
];
$scope.movies = movies;
}]);

Note : Module is like a namespace which has various classes like controller. Each module may have many controllers, and each controller can be bind to divtable or other html element. Once you have bound controller to some element then you can access each property of controller using $scope within that element scope.

Refer to given below image for reference,

If you look at the image given below it is the Movie page which brings data from controller. For this purpose we have movie.html page which had a few controls. To beautify html controls I’ve added twitter bootstrap on each as permy need.

One you run an application give the path of your desired page. It should look like as given below in screen shot. For now button would not be working. That we’ll cover inthe next part.

Hope it’ll help you some day. Enjoy Coding.

Up Next

Ebook Download

View all

Diving into Knockout.JS

Read by 1.7k people

Download Now!

Learn

View all