CODEWITHSUNDEEP
asp.net-mvcangularjs
sTodorov
sTodorov

Reputation: 5461

Using AngularJS/.NET not as a SPA

The question might not be very specific but I am wondering how I could use AngularJS + ASP.NET MVC to create a not-really-SPA application.

I am about to start the project for which AngularJS is a great match for the front-end: the front-end will have a lot of dynamic calculations and situations which benefit from the two-way binding model of Angular.

However, I am keen on pre-loading and rendering pages server side where possible in order to shave off some unnecessary AJAX requests. It makes more sense for this application to actually fetch and store the data on page load in the ViewBag like the traditional MVC app than to force it into a SPA, for example. Of course, there are scenarios where AJAX will still be used which are perfect for Angular.

Things that I am interested in, for example:

Upvotes: 2

Views: 584

Answers (2)

James Simpson
James Simpson

Reputation: 1150

My answer will focus on:

Are there any other alternatives to this approach (I guess, is Angular still a valid choice)?

Im not going to say Don't use AngularJS, however I am going to say, don't use an SPA Framework if all you really want to leverage is Two Way Data binding.

Why?

Either choose an SPA or not. Pulling in an SPA framework may leave you building in more and more features of said framework overtime and ending up with an inconsistent approach over your application.

It also might be considered that Angular and all its features may over complicate your two-way data binding patterns.

Alternatives

Pick a two-way data-binding library, in my opinion a good match for ASP.NET MVC is Knockout as there is lots of support for it (e.g ASP.NET MVC Helpers etc...)

Please see:

http://knockoutjs.com/

http://knockoutmvc.com/ (ASP.NET MVC Extensions for Knockout)

Going Forward

Choosing to use a data-binding library rather than SPA framework at this point will not restrict you from moving to an SPA architecture in the future (most libraries are compatible with other libraries that when combined can give you an SPA architecture), however when and if that point comes you can make this move wholesale.

Upvotes: 3

Index
Index

Reputation: 2381

You can still make your app single page and use MVC. Angular uses partials for views, there's nothing that says that these can't be pre-rendered on a server.

Basic example of MVC Controller returning a pre-render Razor View for use with Angular.

public class PartialsController : Controller
{
    [Route("Partials/{view}")]
    [Route("Partials/{view}/{sub?}")]
    public ActionResult Index(string view, string sub)
    {
        var partial = sub != null ? view + "/" + sub : view;
        try
        {
            return View(partial);
        }
        catch (Exception)
        {
            return HttpNotFound();
        }
    }
}

Here I'm generating a massive table, so I'm using Razor to "pre-bind" the Model and generate the rows rather then using a ng-repeat.

@ { 
Layout = null; 
var project = new SomeController.GetCurrentProject(); 
var keys = project.GetType().GetProperties().OrderBy(x => x.Name); 
}
<!-- Quick'n'dirty table view -->

        <table class="table table-responsive project-name-table">
            <tr>@{ foreach (var key in keys) 
                {
                <th ng-if="[email protected]"> 
                 <a ng-click="order.on='@key.Name';order.reverse=!order.reverse">@key.Name</a>    
                </th>
                 } 
                }
        </table>

Upvotes: 2

Related Questions