Menu
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.
529
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.
161
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).
36
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.
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
