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.
- Which is the best technology?
- Why should we use MVC?
- Why should we use AngularJS?
- Why should we be using AngularJS in MVC?
- How to configure AngularJS in MVC?
Which is the best technology
![]()
Now- a-days, there are lots of new technologies in the world, so we may have confusion to choose the right and best technology to build our application.
Suggestion
Most of the time, the programmers will build their Applications in 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
![]()
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
Model is generally for the business objects. It will directly manage the data, logic and the 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.
![]()
Feature of ASP.NET MVC
- Web API supports MVC framework for building RESTful.
- We can install jQuery, AngularJS etc., using NuGet.
- We can write asynchronous action Methods as single methods, which returns an object of task.
- Routing module is responsible for mapping particular Controller Action.
Why we should use 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 advantage 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’s is called two way binding.
![]()
Features of AngularJS
- Two way data binding.
- Uses and Supports MVC design pattern.
- Supports routing like single page Application.
- Supports RESTful Services.
- Dependency Injection.
Why should we be using AngularJS in MVC
![]()
ASP.NET MVC and AngularJS are both compatible with 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 call.
Additionally, you can use MVC controllers to 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.
![]()
Now, it will show the screen given below to select project types => select Web API Project.
![]()
Now, project solution opens, as shown below.
![]()
Right click the above project and select Manage NuGet Package.
![]()
Click Browse tab and search for AngularJS
![]()
We must be download AngularJS, AngularJS.Core and AngularJS.Route files.
![]()
Once download is complete, these file paths will be displayed in an output Window.
Add the new folder and create new JavaScript file as Ng.Module.js.
![]()
Open _layout.cshtml page and give the name of ng-app is “Test”.
<body ng-app="Test">
Create one more JavaScript file to create an Angular controller.
![]()
Open 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.
![]()
Conclusion
In this article, we have seen why we should use MVC and Angular JS. If you have any query, please ask me in C# Corner comments section. Happy coding.