4

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:

  1. 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?
  2. What is the actual use AngularJS with ASP.NET MVC? Or Where can I use AngularJS with ASP.NET MVC?
Improve this question
1
  • 1
    Web API Exists because MVC was crippled from day one. ASP.NET Core merges the two back together to be what MVC Should have been from day one.
    – Phill
    CommentedNov 25, 2016 at 9:02

4 Answers 4

Reset to default
7

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.

Improve this answer
3
  • Thanks for your great effort!! You covered almost everything what I wanted!
    – TanvirArjel
    CommentedNov 25, 2016 at 9:01
  • another use case is internationalization or localization which we are doing for our current project. Instead of asking a web api to get a string with the french/english/otherlanguage, you can use mvc views to handle this. <p>@Resources.HelloWorld</p>
    – Denise Michelle del Bando
    CommentedFeb 8, 2017 at 21:46
  • I have recently published a blog series on showing the use of angularjs with asp.net mvc. It explains these powers of mvc which strengthens AngularJS application. If you wish you can read the series at mindzgrouptech.net/km7f
    – Anant Anand Gupta
    CommentedFeb 9, 2017 at 13:05
2

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>
Improve this answer
2
  • Thanks Jesús López!! For your great answer..understood!!
    – TanvirArjel
    CommentedNov 25, 2016 at 8:58
  • @TanvirArjel I've added an example customizing the main page
    – Jesús López
    CommentedNov 25, 2016 at 10:43
0

Historically MVC comes first and then ASP.NET Web API was introduced.

Nevertheless it is the same technology with just a little bit different syntax sugar around it to simplify your development for slightly different cases.

But you can create an API with any of them.

Depending on your application, it is not always a single page application with only data provided from api. You might have a number of different pages part of which are rendered on a server and part are dynamic with data loaded from api or mix and match.

There are three main branches in .net at the moment:

  • ASP.NET Web Forms
  • ASP.NET MVC (API)
  • ASP.NET CORE

Pick API to develop conventional single page application or api for some client. Pick MVC if you need to have custom API endpoints or more control over constructing your views/part views/templates or you need more pages.

Note: When I talk about single page application, I mean the application where you navigate to a starting page once and all routing and views parts are loaded in background without reload of the whole page.

Improve this answer
1
  • Thanks!! Pavel Luzhetskiy, Got Some Knowledge!!
    – TanvirArjel
    CommentedNov 25, 2016 at 8:48
0

In my opinion you should use AngularJS + ASP.NET Web API. AngularJS + ASP.NET MVC can "help" you, for example, with quick start where you can have Authentication and authorization already implemented out of the box. In conjunction with WebAPI you should implement it manually. It's good enough for small applications. But you will get AngularJS code mixed with Razor code.

It's better to separate concerns and have AngularJS in one project of solution and WebAPI in another. And commnunicate only through API. In this approach you don't have questions like "Is it logical to return JSON instead of view?".

P.S. Here is a good example how you can start to build AngularJS + WebAPI application: http://bitoftech.net/2014/06/09/angularjs-token-authentication-using-asp-net-web-api-2-owin-asp-net-identity/. It's about Authentication but you can get an idea.

Improve this answer

    Start asking to get answers

    Find the answer to your question by asking.

    Ask question

    Explore related questions

    See similar questions with these tags.