Using AngularJS/.NET not as a SPA

Question

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:

How do you initialize a angular model from a ViewBag collection?
Are there any other alternatives to this approach (I guess, is Angular still a valid choice)?
Have you come accross any papers/tutorials on the subject?

James Simpson · Accepted Answer · 2015-03-26 10:35:56Z

3

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.

edited Mar 26, 2015 at 10:35

answered Mar 26, 2015 at 10:23

James Simpson

1,1506 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sTodorov Over a year ago

Thanks for your answer and definetely +1 for kmvc - looks interesting.

Index · Accepted Answer · 2015-03-26 10:09:53Z

2

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>

edited Mar 26, 2015 at 10:09

answered Mar 26, 2015 at 10:04

Index

2,3814 gold badges33 silver badges51 bronze badges

1 Comment

sTodorov Over a year ago

That is an interesting approach - I will do a small test to see this pre-binding in action.

Collectives™ on Stack Overflow

Using AngularJS/.NET not as a SPA

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related