You can certainly use any mix of client-side rendering and server-side rendering, but I would recommend against trying to mix ASP.NET MVC helpers with AngularJS directives. It might seem like a good idea at first because you're already used to using those helpers and you don't have to write "raw html", but they defeat the some of the purpose of what client-side applications try to achieve: separation of concerns, responsiveness, data-binding, and testability.
There's definitely a place for making mini-SPAs within a larger, traditional web-application, especially if you're converting a legacy application or if parts of the larger application don't need a SPA or are best served without it. But if you're going to render a given page - or part of page - on the client, then buy in completely and let AngularJS do what it knows how to do.
So let's say you have a Products model (some enumerable list of ) and you want to render that on the page in a list. You have three options I can think of:
- Use a razor @ForEach and render it server-side, but accept that your client-side AngularJS application won't know about this list and won't bind it to its model
- Wait until the page loads and AngularJS bootstraps, then make an API call to your MVC server-side application for some JSON data and stick it in the model. Use ng-repeat to render the list.
- Use razor to serialize the Products model on the server into some JSON string and embed that in the AngularJS controller you send back. Use ng-repeat to render the list and take advantage of client-side data-binding.
The last option is ugly. I can't think of a really good reason for it, unless you need client-side data-binding and you have to pay for each API call.
The first would be good if you don't need any data-binding on the client (it's a read-only list) or you need SEO.
The second is the way I would do it in most scenarios. You've decided to use AngularJS for a reason - let it do its job.
Don't use MVC helpers just because they're there. AngularJS provides its own directives that do much the same stuff. And if you need more, write your own. Part of using a client-side framework is buying in to the philosophy: the server is responsible for server-y stuff like authentication, server validation, and providing data through an API, and the client is responsible for being a front-end application. Keep your concerns separate.
None of this means you can't use ASP.NET MVC for routing, authentication, or the overall structure of your app. All that surrounds your AngularJS apps. Once you're inside a mini-SPA, though, do it the SPA way.
This is philosophy I've used when integrating ASP.NET MVC with AngularJS. The server-side MVC is responsible solely for rendering the initial page, and then providing a semi-RESTful API after that. It uses ASP.NET MVC to route URLs, authenticate, and other goodies. But there's almost no razor and definitely no HTML helpers.
