Angular.NET

OK, so the title is a bit misleading.  There is no such thing as Angular.NET (as far as I know), but that doesn't mean we can't mash up AngularJS with ASP.NET to make some really neat applications.  I had a bit of trouble getting started and I couldn't find a comprehensive tutorial anywhere so I put one together.  I even used pictures!

This tutorial is intended to walk you through every tiny step so it may seem tedious at times.  Just go with it.  Or scroll past the parts you already know and get to the good stuff.  I just wanted to be really thorough so next time I start something from scratch I don't have to wonder at all about what I did last time to make it work.

There are a couple of items to note before we jump in.  First (and possibly most importantly), all file names are arbitrary.  If I say "Create a file called angular-start.js" and you want to call it "friggafrompton.js", that's fine.  But later when I reference "angular-start.js", you'll have to remember you named it "friggafrompton.js" and make the appropriate adjustments.  Secondly, the reason I'm starting with a blank solution is for future enhancements to this application.  If you want to just create a new project, that's fine, but again, you're responsible for remembering you did that later.  Next, when you see a word inside brackets, it references a key on the keyboard. So [Enter] means the Enter key on your keyboard.  When you see something in quotes and I tell you to type it somewhere, don't type the quotes.

1. Open Visual Studio (I use VS 2012)
2. Create a new Blank Solution named "AngularTutorial"

3. Add a project named "AngularTutorial.Presentation.Web" to the blank solution

4. Expand "AngularTutorial.Presentation.Web" and right-click "References"
5. Click "Manage NuGet Packages"
6. In the left windowpane, select "nuget.org" or "All"
7. In the upper right-hand corner of the window, type "AngularJS" and press [Enter]
8. For this tutorial, only install AngularJS Core

9. Expand "AngularTutorial.Presentation.Web > Views > Shared"
10. Open _Layout.cshtml
11. Edit the html tag in _Layout.cshtml to include "ng-app='angularApp'"

12. Expand "AngularTutorial.Presentation.Web"
13. Right-click "Scripts"
14. Choose "Add > New Item..."

15. Scroll down the list of items you can add and click "Javascript File"
16. Change the name to "angular-start.js"
17. Click the "Add" button

18. Add the following line to the top of the blank file ("angular-start.js")

19. Expand "AngularTutorial.Presentation.Web"
20. Right-click "Controllers"
21. Choose "Add > Controller..."

22. Name the Controller "AngularController"
23. Click the "Add" button

24. In the open "AngularController.cs" file, right-click "View()" and choose "Add View..."

25. Check the box marked "Create as a partial view"
26. Click the "Add" button

27. Add the following markup to the top of the blank file ("Index.cshtml")

28. Expand "AngularTutorial.Presentation.Web"
29. Right-click "Scripts"
30. Choose "Add > New Item..."
31. Scroll down the list of items you can add and click "Javascript File"
32. Change the name to "angularController.js"
33. Click the "Add" button
34. Add the following line to the top of the blank file ("angularController.js")

35. Expand "AngularTutorial.Presentation.Web > App_Start"
36. Open "BundleConfig.cs"
37. Somewhere in the RegisterBundles method, add the following code

38. Go back to "_Layout.cshtml"
39. After the jQuery bundle is added, add the new angular bundle

40. Build the solution
41. Start without debugging
42. Navigate to /Angular
1. In my case it was http://localhost:47125/Angular
43. Witness the fruits of your labor