AngularJS offers a clean, yet flexible, method of interacting with data. As someone who’s had a decent amount of experience with Windows Presentation Foundation’s MVVM (Model-View-ViewModel) pattern on the native side of things, that’s something that I’ve often found lacking in a lot of web environments.
To see what I mean, first start off with a new Web API project. For our purposes, you’ll also want to add a simple Model and Controller to give us some test data to play with.
And the Controller:
Now you can either create a separate project for the Angular bit, or just use the same one for this quick demo. Either way you’ll want to add AngularJS.Core using NuGet.
Next, we need our HTML page. This is where things get interesting, so I’ll break it down a bit. By the way, your project should look something like the following (I’ve highlighted the items we’ve added below):
Inside of our Index page, we’ll first need to add a reference to the Angular library:
And then we add another script tag. For this one, we’ll break it down a little bit.
Here we’re initiating an app variable called pizzaApp that we’re going to add a bunch of things to.
This bit of code adds a service to the app that handles getting the data from our API. The important bits here are that the URL matches the one from our API method, and on a success, we are setting a variable on the $scope from what was returned.
And here’s the main guts of the Angular code, the Controller. Inside the definition, we’re setting it up to use our Service, setting up a bunch of interaction functions, and then finally actually calling the service to retrieve the data from the server.
That’s all great, but by now you might be wondering how we’re going to actually render this in the browser. Inside the body tags we have one last piece to add:
The first thing you might have noticed is the fact that anything related to Angular is prefixed with “ng-“. That’s the syntax to let the framework know you’re talking to it.
Another important bit is to match up the markup to the hierarchy of our data. We have declarations for the ng-app, ng-controller, and a hierarchical set of ng-repeat attributes to display our pizza types and the ingredients. Most of the rest is just hooks for the interactive bits.
One last interesting piece is the “track by $index” down in the Ingredients section. When you’re indexing right into an array and acting directly on a primitive type, it’s important to use that clause in order to handle duplicates.
If you’ve followed the demo so far, you’ve probably got something like this:
A few shortcuts were taken to make the above demo work entirely client-side—specifically, that the JSON is loaded from a string constant instead of from a server call—but, it should otherwise be the same.
In playing with the above, you’ll notice that the labels on the buttons get updated when you change the names of the pizza types. So even just setting the context of our HTML controls is enough to give us a two-way binding to our data object. All of the function calls are actually just to facilitate adding and removing items.
All we’re missing now is a button to POST some JSON data back to the server.