How to use AngularJS with ASP.NET MVC?

Question

I need to convert my existing ASP.NET website to a spa website for most of its part. So I am evaluating Angularjs for this project. I have read numerous articles and post describing the use of AngularJS with ASP.NET Web Api but none where it is used in combination with ASP.NET MVC.

So I am wondering is only the landing page going to be servered by ASP.NET MVC and then the rest is handled through AngularJS? Also when setting the routes of the AngularJS app, they surely need to return some views. Are these views going to be returned from ASP.NET MVC actions or they need to be only AngularJS templates which are going to be fetched from the server. If they are Angularjs templates, which seems to be the right choice, then how is the data in these templates going to be boostrapped? I can surely hack my way around all this but some examples or best practices will be much appreciated.

From a technical stand-point there is nothing against it, so this is primary opinion based. — Christoph Fink, CommentedDec 1, 2014 at 9:31
This is highly subjective. It depends on way to many factors to get an accurate reading. We have "ported" a relatively large project to AngularJS and it has brought mixed feelings among the team members. I would suggest you try to convert small (and successive) parts to see the benefits and impediments it brings. — Andrei V, CommentedDec 1, 2014 at 9:33
I'm struggling with same question having just recently purchased Freeman's book on Angular. The largest missing link in MVC is full blown client side binding. I see Angular and Knockout filling that gap. Being a C# person, I also absolutely refuse to give up LINQ and EF (missing on client side). The other thing that concerns me in Angular is the fact all the code is visible to client unless obsfucated. But that never bothered Google. For me MVC is my choice for now, but... I am perusing the goodness of Angular the main reason is that by embracing JS librs. the world is much larger. — JWP, CommentedDec 1, 2014 at 9:51
I have been researching this and this time in the right direction due to Omar's answer. How to use AngulaJS with ASP.NET is not subjective. There is a best practice here. So please unblock the question, which if you have not noticed I have rephrased, because I would like to answer it. — Milen Kovachev, CommentedDec 2, 2014 at 9:36

Omar.Alani · Accepted Answer · 2014-12-01 09:39:40Z

Mvc with angularjs can fit good when you plan to do something called "mini Spa" application where you have mvc pages serves the main pages for multisections application and after serving the main page from mvc the rest will be handled by angularjs to avoid having a single big spa application. Pluralsight.com has some decent courses about "mini spa" and mvc with angularjs. Hope that helps.

I was not familiar with the term mini spa but this is exactly what I was looking for! Thanks for the answer. — Milen Kovachev, CommentedDec 1, 2014 at 10:11

Stefan Ch · Accepted Answer · 2014-12-01 09:45:39Z

Like other users commented this will be a matter of debate. Technically nothing is stoping you from using ASP .NET MVC as the backend for your AngularJS frontend. You will simply define your routes which will probably end up simply returning JSON instead of MVC Views.

On the other hand one could argue that this perfectly fits the usecase of ASP .NET WebAPI. I remember I've seen at least in one book the author suggesting the use of WebAPI for building SPA applications (I think it was Pro ASP .NET MVC 5 if I'm not mistaken).

Sourav Mondal · Accepted Answer · 2015-12-03 18:42:09Z

I think this will help you AngularJS with ASP.net MVC

there are multiple example explained about use angularJS in asp.net mvc like , how to create login page, file upload, show tabular data etc.

For setup angularJS in asp.net mvc application follow below steps

Load required js first. you can use asp.net mvc bundles
bundles.Add(new ScriptBundle("~/bundles/angular").Include( "~/Scripts/angular.js", "~/Scripts/angular-route.js"));

Modify _Layout.cshtml

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> @* Here ng-app="MyApp" is used for auto-bootstrap an AngularJS application. here ng-app="MyApp" means <body> element is the owner of AngularJS application*@ <body ng-app="MyApp"> @RenderBody() @Scripts.Render("~/bundles/jquery") @* Add Angular Library Here *@ @Scripts.Render("~/bundles/angular") <script src="~/Scripts/MyApp.js"></script> @RenderSection("scripts", required: false) </body> </html>

Add a new js File for add angularjs module, controller etc. here 'ngRoute' is optional (not required if you don't want to use angularjs routing)

 (function () { //Create a Module var app = angular.module('MyApp', ['ngRoute']); // Will use ['ng-Route'] when we will implement routing //Create a Controller app.controller('HomeController', function ($scope) { // here $scope is used for share data between view and controller $scope.Message = "Yahoooo! we have successfully done our first part."; }); })();

Add new action into your controller for Get View.
```
public ActionResult Index() { return View(); } 
```

Add view for the Action & design.

 @{ ViewBag.Title = "Index"; } <h2>Index</h2> <div ng-controller="HomeController"> {{Message}} </div>

Run application.

hikalkan · Accepted Answer · 2015-05-29 17:30:08Z

You can check ASP.NET Boilerplate (http://www.aspnetboilerplate.com/) as a start point. It has pre-built templates to start with ASP.NET MVC & AngularJs.

Actually, ASP.NET Boilerplate is an application framework built on latest ASP.NET MVC & Web API technologies. It makes easy to use dependency injection, logging, validation, exception handling, localization and so on.

Collectives™ on Stack Overflow

How to use AngularJS with ASP.NET MVC?

4 Answers 4

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Related