AngularJS + ASP.NET MVC: Q and A

In this blog will I try to answer a few questions you may have if you’re starting single-page web application (SPA) development with AngularJS and ASP.NET stack of technologies (ASP.NET MVC, ASP.NET Web Pages, ASP.NET Web Api, SignalR, Entity Framework, TypeScript…)

Q: Will I have any issues if I choose ASP.NET on a back-end for my single-page app? What are the alternatives?

Many folks are happy using Node.js + Express on a back-end. But if you’re already familiar with .NET you may take an advantage of using Visual Studio IDE + Visual Studio Online (formerly TFS), which gives you almost all the required tools out of the box like - great code editor and debugger, Git source control, agile/scrum planning, unit / load / UI testing, continuous integration, automated deployment, Windows Azure dev tools (see what’s new in Visual Studio 2013).

Also with ASP.NET you have a choice of using most of the required libraries and components required for building single-page apps from a single vendor, built on a common architectural ground (see OWIN). In overall I don’t think you’ll have any issues if you go ASP.NET route.

Q: Which project template to choose for an AngularJS web app?

Starting with an “Empty” project template is good I think, it will keep your project clean and free of some artifacts you may never use (for example, are you sure you need ASP.NET MVC-based help pages for your RESTful service if you choose “Web Api” template?)

AngularJS SPA Template for Visual Studio

Q: Should I use ASP.NET MVC, ASP.NET Web Pages or just plain HTML pages for my AngularJS views (templates)?

If you choose ASP.NET MVC, you may end up implementing two MVC code bases - one for server-side and another for client-side. I lean towards keeping things simple and avoid using ASP.NET MVC on the server side unless you’re really need one; use ASP.NET Web Pages intstead. ASP.NET Web Pages (.cshtml) also give you more flexibility in comparison to plain HTML-based templates (.html) - Razor HTML helpers, an ability to have nested templates, layouts, easier to optimize website for search engines (SEO).

Q: OK. How do I add ASP.NET Web Pages support to my project?

Right-click on the project in Solution Explorer > Manage NuGet Packages:

Microsoft ASP.NET Web Pages NuGet Package

Other than installing “Microsoft ASP.NET Web Pages”, you need to include an appropriate sections to your Web.config file:

ASP.NET Web Pages Web.config

Here you may want to add some other namespaces you want to make available by default inside Razor pages.

Q: OK. I’m using ASP.NET Web Pages instead of MVC. Where are the @Model and other HTML helpers?

ASP.NET Web Pages has a different set of HTML helpers, for example, instead of @Model you can use @PageData etc.

For more info, visit this: http://www.asp.net/web-pages

Q: How to set page titles with AngularJS?

The easiest way is to store page titles alone with your route information (in case you’re using ngRoute ur UI Router). Then you can attach a handler on ‘$routeChangeSuccess’ event and update the title of a page whenever URL path is set or updated.

If your page titles are not static (you don’t know them upfront, but generate based on a response from a server) then a good place to set them would be - inside controllers. For example:

AngularJS Page Title

And you would need to add ng-bind attribute to the <title> element in a layout template:

ASP.NET Web Pages Title

Finally, for SEO reasons, you may also want to set page titles in partial views as well:

AngularJS Page Title

I’m currently updating this post. Please, come back later.

For code samples visit: AngularJS SPA Template for Visual Studio

  1. code-vladbasin reblogged this from koistya
  2. koistya posted this
Blog comments powered by Disqus