Menu
Please Note: I have read some questions like this in Stack Overflow but did't get the clear concept that I wanted from those answers.
I have crystal clear concept of why and how to use AngularJS with ASP.NET Web API. But I am confused about the use of AngularJS with ASP.NET MVC!
In Case of AngularJS with ASP.NET Web API:
Web API controller method returns data and AngularJS call the Web API controller method and capture the data and then render the data in the View. This is pretty much logical!
In Case of AngularJS with ASP.NET MVC:
ASP.NET MVC Controller method itself returning View/View with data. Then what is the use of AngularJS with ASP.NET MVC?
In spite of that, if I want to use AngularJS with ASP.NET MVC then I have to return JSON instead of MVC view from ASP.NET MVC controller method.
My Questions are:
937
Is it logical to return JSON instead of MVC view from ASP.NET MVC controller method for the purpose of using AngularJS with ASP.NET MVC? If I do so, is there any benefit?
I would say that you can. But ASP.NET Web API is really the way to go if you only want to return data. And the benefits are answered in your next question...
What is the actual use AngularJS with ASP.NET MVC? or Where can I use AngularJS with ASP.NET MVC?
First, what are you using instead of MVC? Some other server-side-rendering? In this answer I assume that you got plain html-files. MVC can still be used with Angular. Here's a couple of scenarios:
1. Let's say that you want to limit the access to a specific page/route. It's very simple in MVC.
public class HomeController : Controller
{
[Authorize] // Authorize the user.
public ActionResult Index()
{
return View();
}
}
If you want to do this with Angular and Web API you will give the user access to the HTML, but not the data. It's a bit different. With MVC you can return a 401 directly.
2. You can omit displaying HTML.
Let's say that you got some HTML that only should be available for some users. If you use Angular to hide/show the HTML it will still be available for the client. But if you use MVC and don't render the HTML at all it will not be available for the user.
Angular:
<button type="submit" ng-hide="true" />
MVC:
@if(someCondition)
{
<button type="submit" ng-hide="true" />
}
There's a big difference in hiding something on the client, and not giving the information to the client at all.
I use MVC together with Angular. I use MVC to render the views. Then I let Angular fetch some data from Web API and then display the data-specific content.
98
Is it logical to return JSON instead of MVC view from ASP.NET MVC controller method for the purpose of using AngularJS with ASP.NET MVC?? If I do so, is there any benefit??
No, ASP.NET Web API is a more focused and appropriate technology to return JSON to the browser.
What is the actual use AngularJS with ASP.NET MVC?? or Where can I use AngularJS with ASP.NET MVC??
To provide a dynamic server generated main page as the entry point for the SPA application.
You can also provide dynamic server generated templates to be consumed by the angular app. You can customize the page for the logged user, or inject some data into it.
If the page is the same for every one, you don't need to dynamically generate it at server side, you can just use a static html pages.
Here you have a main page example where the current user name is exposed as App.currentUser to the angular app, and the appropriate i18n javascript file is loaded based on the culture of the browser:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
@if (User.Identity.IsAuthenticated)
{
<script type="text/javascript">
var MyApp = MyApp || {}
MyApp.currentUser = '@User.Identity.Name.Replace("\\","\\\\")';
</script>
}
</head>
<body ng-app="my-app">
<div ng-view>
<h1>Welcome to MyApp</h1>
<p>Loading...</p>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.5.8/angular-locale_@(Culture.ToLower()).min.js"></script>
<script type="text/javascript" src="scripts/app.js"></script>
</body>
</html>
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
