Angular.NET Routing

Well, hello again.  In this post I'm going to explain how to set up routing with Angular routes to implement a Single Page Application (SPA).  A SPA may not be best for your needs, but I believe it's helpful to know how to do something (or at least that it's possible) before you need to actually do it.

First things first, if you haven't read the first part of this post, you may want to do that before you continue.  Even if you're already familiar with AngularJS and .NET, I created a sample application in that post that I'll be expanding in this post.

One really important note before we jump into this: if you want people to be able to hit each page directly in a SPA, you'll still need to create .NET controllers.  For example, we're going to route everyone who hits http://localhost:47125 to Pages/Home.html, but if we don't have a .NET controller for /Home/Index the user will get a 404 error.  I don't cover that part in this guide because it's late and I want to go read my book before I go to bed.  Don't laugh... seriously, I can still hear you.  What, a guy can't read before bed?

1. In the last post, we only added AngularJS Core from NuGet.  This time we're going to add the full blown Angular suite.  Follow steps 4 - 7 in the last post, but when you get to step 8, choose "Angular JS" instead of "AngularJS Core"
1. When you do this, you should get a couple of warnings that the file already exists; that's OK, go ahead and replace the current file with the new one
2. Open the file you created in step 16 of the last post, "angular-start.js"
3. Inside the brackets add "'ngRoute'" (with the single quotes around it, but not the double quotes)

4. Beneath that, add what you see below

5. There is something very important to note here: I'm not routing to "Views/Home.cshtml" or "Home[Controller]/Index".  We're going to create a Pages directory and use that, otherwise (in my experience at least) your .NET routes will interfere with your Angular routes
6. Right-click "AngularTutorial.Presentation.Web" and choose "Add > New Folder" from the popup menu

7. Name the folder "Pages"
8. Right-click the new "Pages" folder and choose "Add > New Item..." from the popup menu
9. Scroll down the list of items you can add and click "HTML Page"
10. Change the name to "Home.html"
11. Click the "Add" button

12. Repeat steps 8 - 11 of this tutorial twice, once for "Contact.html" and once for "About.html"
13. Follow steps 28 - 33 in the first tutorial three times, creating "contactController.js", "aboutController.js", and "homeController.js"
14. Copy/paste the contents of "angularController.js" into each of the three files you created in step 13
15. Change the name of the controller in each of the files you created in step 13 to match the name of the file
1. For example, change "angularController" to "homeController" in the homeController.js file
16. Change the message to something unique for each controller
17. Expand "AngularTutorial.Presentation.Web > App_Start"
18. Open "BundleConfig.cs"
19. In the bundle you created in step 37 of the first post, add the three new controllers you created in step 13 of this post
20. In the same bundle, add the "angular-route.js" file that should have been included in your project in step 1

21. Expand "AngularTutorial.Presentation.Web > Views > Shared" and open "_Layout.cshtml"
22. Replace @RenderBody() with this

23. In the same file, locate the ul with id "menu" and remove the 3 default tags
24. Insert these tags where you just removed those others

25. Notice the path for each of them corresponds to the routes you created in step 4
26. Follow steps 40 - 43 of the first post