how to use AngularJS as front-end framework and ASP.NET MVC as back-end framework together?

Question

I have architected a project as follows:

asp.net mvc as back-end framework

angularjs as front-end framework

But I think the project is not readable and standard for example asp.net mvc has routing for managing url(s) and angularjs has another technique at client side (it use # at the end of url(s)).

Is it usual to use angularjs and asp.net mvc together?

Is there any restriction for choosing a back-end technology like Node.js with angularjs?

Could you send me a sample code that shows asp.net mvc and angularjs working together?

I know asp.net mvc has lots of feature for client side (html) like html.helpers and so on and i know angularjs has lots of feature on client side (html) like expressions ({{Property}}) , binding (ng-bind) and so on.

I'm confused.

How to match features of two frameworks together.

Answer 1

Our last web project use Angular on the client and MVC on the backend.

We used MVC for routing but used the location server for web params. So urls looked like

http://site/Customer/Edit/#12345 (12345 being the id) http://site/Customer/List (Returns a list of Customers)

etc

In the controller we have code like this to populate data

innerHttp = $http.get("Data" + $location.path());
innerHttp.success(function (innerResponse) {
    console.log("Form Data Loaded");
    $scope.entity = innerResponse.data || {};
}).error(function (data, status, headers, config) {
    $scope.addAlert('danger', 'Error loading form data (' + status.toString() + ')');
});

Notice how we get the ID from the location service.

Our control has a View to return the HTML form and a View that returns the Data, this one looks like

[Route("{type}/data/{id}")]
public ActionResult Data(string type, Guid id)
{
    return new JsonNetResult()
    {
        Formatting = Formatting.Indented,
        Data = DataBuilder.ReadData(type,id) 
    };
}

This approach does not give you a single page app, but it still separates pages from data and allows the client to cache the html, only json calls will need to be fresh so keeps bandwidth down and gets you into angular at the same time.

Hope this helps you.

Answer 2

Ideally you should use ASP.Net WebAPI for a rest service backend. For the frontend UI you would use Angularjs by itself with no dependencies on ASP.Net other than the WebAPI JSON over Rest service.

You would not end up using a lot that ASP.Net MVC has to offer, but you would be left with a clear separation of the backend service layer and the frontend UI.

This will remove the possibility of needing to duplicate functionality in both ASP.Net MVC and AngularJS.

Answer 3

You're right that fundamentally ASP.NET MVC and AngularJS provide a lot of the same services, but executed at different layers of the stack. If you're building a single-page web application that is heavy on the client, then you won't end up using much of ASP.NET MVC's functionality except as perhaps an intermediate layer to get to your data. If you prefer more of a server-centered approach where you're actually navigating to different server URLs on each page, then you won't have as much Angular in your app.

Still, I too am building a new web app right now that uses both ASP.NET MVC and AngularJS, and mine is a single-page web app that is heavy on the client-side code. I don't think there's anything wrong with this approach, but in a sense I suppose it could be argued that ASP.NET MVC is a bit overkill for this design. Perhaps that is one of the reasons people gravitate toward Node.js.