Full SPA Application with AngularJS - angularjs

Question

I was thinking in doing a full SPA application with AngularJS that would download all the views code on the initial request and then just communicate with the server through AJAX requests.
The big advantage is that it would look like the application is running locally.
The disadvantage is that maybe on the initial request the application would take maybe 2 minutes to load because it would make about 40 page requests to the server.
Isn't there a way to download all the application views in a single request like using some kind of ASP.Net MVC bundles?

Answer 1

I did something similar. I'm using Asp.net MVC & WebApi with AngularJS.
My first request is to an MVC Action -> It returns a kind of master page(including bundles).
When the page gets down to the client, AngularJS kicks in and gets in charge.
Now my template views are also rendered via the Razor view engine(since I needed a special in house engine to locate my relevat templates) - I can use bundles and other .net stuff inside instead of fetching plain html.
Now using templates this way can be BAD.
I put red lines about what I want the Razor view engine to do in the process. It's easy to misuse AngularJS when you use Razor views\templates in your project.

Answer 2

you could use the $templateCache service to download multiple views at once. In the run phase you define them all (of some of them).
var myApp = angular.module('myApp', []);
myApp.run(function($templateCache) {
$templateCache.put('template1.html', 'This is the content of the template 1');
$templateCache.put('template2.html', 'This is the content of the template 2');
$templateCache.put('template3.html', 'This is the content of the template 3');
});