Post
Ask Question

Learn Basics Of MVC Using AngularJS

Introduction

Hi audience, I thought to share my experience of Microsoft ASP.NET MVC and AngularJS. This article will be more helpful for “MVC with AngularJS” beginners.

  1. Which is the best technology?
  2. Why should we use MVC?
  3. Why should we use AngularJS?
  4. Why should we be using AngularJS in MVC?
  5. How to configure AngularJS in MVC?

Which is the best technology?

Technology

Nowadays, there are lots of new technologies in the world, so we may be confused about choosing the right and best technology to build our application.

Suggestion

Most of the time, the programmers will build their Applications in an MVC pattern, because MVC (Model-View-Controller) is loosely coupled and we can reuse the structure of the pattern.

ASP.NET MVC with WEB API is best for Server-side technology. We can reuse the same Service for other communication devices (mobile, iPad, etc.), and also, Web API will be hosted separately in IIS. It will increase the Server performance.

Angular JS is best for the client. We can use quick development and it's best for the data binding, using RESTful protocol.

Why should we use MVC?

MVC

ASP.NET MVC gives you a powerful and pattern-based way to build dynamic Websites, which gives full control over markup for enjoyable development.

The Model-View-Controller (MVC) architectural pattern separates an Application into three main components.

  • Model: The model is generally for business objects. It will directly manage the data, logic, and rules of the Application.
  • View: It’s a UI, which shows the output of the actions.
  • Controller: Controller is the main heart of an Application, accepts input, and converts it to the commands for Model or View.

Controller

Feature of ASP.NET MVC

  • Web API supports the MVC framework for building RESTful.
  • We can install jQuery, AngularJS, etc., using NuGet.
  • We can write asynchronous action Methods as single methods, which return an object of the task.
  • The routing module is responsible for mapping particular Controller Action.

Why should we use AngularJS?

AngularJS

AngularJS is an open-source scripting language. It will work based on Model-View-Controller patterns and advanced and latest Client-Side JavaScript.

One of the best advantages of data binding is it automatically changes the values of the view whenever the model changes as well as updating the model, whenever the view changes. Also, it is called two-way binding.

Data Binding

Features of AngularJS

  • Two-way data binding.
  • Uses and Supports MVC design pattern.
  • Supports routing like single-page Applications.
  • Supports RESTful Services.
  • Dependency Injection.

Why should we be using AngularJS in MVC?

AngularJS in MVC

ASP.NET MVC and AngularJS are both compatible with the MVC pattern and there are plenty of projects, which are used by them together. This works well because your MVC Server-side code provides JSON results for Angular client-side calls.

Additionally, you can use MVC controllers for HTML views or razor views for your Application. This gives you the power for authorization, redirecting, error handling, etc.

How to configure Angular JS in MVC?

Open Visual Studio 2015 & click =>File =>New =>ASP.NET Web Application.

Web Application

Now, it will show the screen given below to select project types => select Web API Project.

Web API Project

Now, the project solution opens, as shown below.

Project solution

Right-click the above project and select Manage NuGet Package.

NuGet Package

Click the Browse tab and search for AngularJS

Browse tab

We must download AngularJS and AngularJS.Core and AngularJS.Route files.

Route files

Once the download is complete, these file paths will be displayed in an output Window.

Add the new folder and create a new JavaScript file as Ng.Module.js.

JavaScript file

Open _layout.cshtml page and give the name of ng-app as “Test”.

<body ng-app="Test">

Create one more JavaScript file to create an Angular controller.

Angular controller

Open the Index.cshtml page and write the code for ng-controller, as shown below.

<div class="row" ng-controller="HomeController">
    <div class="col-md-4 btn-success">{{Testname}}</div>
    <div class="col-md-4 btn-primary">{{Test}}</div>
    <div class="col-md-4 btn-danger">{{happy}}</div>
</div>

<!-- Link the AngularJS files in _layout.cshtml page -->
<script src="~/Scripts/angular.min.js"></script>
<script src="~/AngularJS/Ng.Module.js"></script>
<script src="~/AngularJS/Ng.Ctrl.js"></script>

Now, run (F5) the Application. It will give the result in the Browser.

Browser

Conclusion

In this article, we have seen why we should use MVC and Angular JS. If you have any queries, please ask me in the C# Corner comments section. Happy coding.


Similar Articles