AngularJS And ASP.NET MVC Movie Library Application

Hope you got a chance to look into my last tutorials about technology stack, creating UI HTML page with Modules and Controllers, and Event Binding with UI elements. Kindly, find the links here:

Moving ahead, in this article, we’ll focus on integration of movie.html page with MVC layout page. Also, we’ll implement Angular routing in that.

Let’s get our hands busy with AngularJS & ASP.NET MVC Movie Library Application - Part Four.

So far, we’ve designed the following screen shot:

portal

For this purpose, I’ve created a few more pages so that we can implement routing easily. Kindly have a look at the image below, for reference.

So, please create other pages as well. Probably after Part 6 of Movie Library Application, I’ll share my application with you for downloading.

Open the Solution Explorer and look for _Layout.cshtml page there. You can give reference of main.js (in our case it is routing.js) file as a reference there also, so that it would be applicable for all .cshtml pages.This is because _Layout page loads first in MVC life cycle.

Routing.js file contains all controllers' code used in all html pages e.g. Movie.html, searchMovie.html and tollywood.html.

It works in such a manner that as soon as the _layout.cshtml page loads, it also loads Module along with all respective controllers defined under this JavaScript file.

Kindly, find the code below for how to bind routing.js file.

code
If you have noticed in the above screenshot, I’ve set the menu using bootstrap which looks like the following screen, now:

screen

Understand ng_view: Another important factor is the usage of ng-view directive. In our angular app, we need to define ng-app directive once. Ng-view becomes the placeholder for views. Each view referred by the route is loaded in this section of the document which we have defined on _layout.cshtml. You can also define ng-view in main html file .There are a few ways to define it, as shown below. I’ve chosen <ng-view></ng-view> tag.

For my purpose, kindly refer to the above screen shot for reference and look at bottom of image.

<div ng-view></div>
<ng-view></ng-view>
<div class="ng-view"></div>

Kindly, find the code below for_layout.cshtml, so that you may fit into your code segment also.

Code snippet _layout.cshtml

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<script src="~/Scripts/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js"></script>
@* <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>*@
<script src="~/Application/App.js"></script>
<script src="~/Application/Routing.js"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-right">
<section id="login">
</section>
<nav>
</nav>
</div>
</div>
</header>
<div id="body" ng-app="routingApp" class="float-center">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="www.dotnetpiper.com">DotnetPiper.Com</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#/Home"><b>Home</b></a></li>
<li><a href="#/Movie"><b>Bollywood</b></a></li>
<li><a href="#/SearchMovie"><b>Seacrh Movie Globally</b></a></li>
<li><a href="#/Tolly"><b>Tollywood</b></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span>Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span>Login</a></li>
</ul>
</div>
</nav>
<ng-view></ng-view>
@RenderSection("featured", required: false)
@RenderBody()
</div>
@* <footer>
<div class="content-wrapper">
<div class="float-left">
<p>© @DateTime.Now.Year - My ASP.NET MVC Application</p>
</div>
</div>
</footer>*@
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
</html>

Add Routing in AngularJS

We’ve included a JavaScript file, routing.js, which holds the application logic. Given below is the content of routing.js. Kindly ensure that you have given the reference for route.js, as shown below:

/// <reference path="../Scripts/angular-route.js" />
var routingApp = angular.module('routingApp', ['ngRoute']);
routingApp.config(['$routeProvider', function ($routeProvider) {
//alert("Route Initiated");
$routeProvider.
when('/Home', { templateUrl: '/Application/login.html', controller: '/Application/testController' }).
when('/Movie', { templateUrl: '/Application/Movie.html', controller: 'MovieController' }).
when('/SearchMovie', { templateUrl: '/Application/SearchMovie.html', controller: 'ApiMovieController' }).
when('/Tolly', { templateUrl: '/Application/Tollywood.html', controller: 'tollyController' }).
otherwise({ redirectTo: '/' });
}]);

First, use .config() method to define $routeProvider configuration. The routeProvider identifies the route, e.g., whenever there will be a string “/Movie” in route URL, it should load template "/Application/Movie.html" from partial templates. (I’m calling these .html pages as partial pages).

After implementing the Routing, it should work in a way, as depicted below. Kindly notice the URLchanging on each click.

output

This is the complete code for routing.js which is main app file.

/// <reference path="../Scripts/angular.js" />
/// <reference path="../Scripts/fusioncharts.js" />
/// <reference path="../Scripts/fusioncharts.charts.js" />
/// <reference path="../Scripts/angular-route.js" />
var routingApp = angular.module('routingApp', ['ngRoute']);
routingApp.config(['$routeProvider', function ($routeProvider) {
//alert("Route Initiated");
$routeProvider.
when('/Home', { templateUrl: '/Application/login.html', controller: '/Application/testController' }).
when('/Movie', { templateUrl: '/Application/Movie.html', controller: 'MovieController' }).
when('/SearchMovie', { templateUrl: '/Application/SearchMovie.html', controller: 'ApiMovieController' }).
when('/Tolly', { templateUrl: '/Application/Tollywood.html', controller: 'tollyController' }).
otherwise({ redirectTo: '/' });
}]);
routingApp.controller("tollyController", function ($scope) {
$scope.tollyMessage = "Welcome to TollyWood to watch Action,Thriller and Suspence movies";
});
routingApp.controller("MovieController", ['$scope', function ($scope) {
$scope.edit = false;
$scope.message = "Welcome to DotnetPiper.com to learn Angular";
$scope.error = false;
$scope.clear = 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;
$scope.AddMovie = function (movie) {
if ($scope.edit == true) {
var index = $scope.movies.indexOf(movie);
// alert("edit Called");
$scope.movies[index] = movie;
//alert(movie.rating);
$scope.updatedMovie = movie;
$scope.success = true;
$scope.movie = {};
}
else {
var newMovie = {
title: $scope.movie.title,
year: $scope.movie.year,
rating: $scope.movie.rating,
plot: $scope.movie.plot
};
movies.push(newMovie);
// alert("Add Called");
}
}
$scope.DeleteMovie = function (movie, index) {
movies.splice(index, 1);
// $scope.movie = movie;
$scope.updatedMovie = movie;
$scope.success = false;
$scope.clear = true;
$scope.movie = {};
console.log(index);
}
$scope.EditMovie = function (movie, index) {
$scope.selectedRow = null; // initialize our variable to null
$scope.selectedRow = index;
$scope.movie = movie;
$scope.edit = true;
}
}]);

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