AngularJS + WebAPI = A Happy Wife?

AngularJS + Web API = a happy wife? I certainly wouldn’t have fathomed it a few weeks ago but imagine this conversation:

Wife: What do you want for dinner this week?
Me: I don’t know, what do you want?
Wife: I don’t know, what do you want?

Now, I know this isn’t going to win the academy award for best dialogue but I would be willing to bet you have encountered something similar recently with a significant other or collegue. After having this conversation myself for the hundredth time, I (or my wife?) decided it was time for a little automation and MealBuilder+ was born!

I wanted to share this application for several reasons. First, it’s simple enough to follow along but complex enough that it tackles common scenarios you will encounter when building real AngularJS applications. Second, it’s a great kick start if you are going to be using these two wonderful technologies together, which I would highly recommend. Third, it’s a lot of fun! So, what’s involved?

The Specs:
MealBuilder+ is a single page application that allows the user to store all of the meals they cook, or hope to cook. The user can also enter ingredients and associate these ingredients with meals. Full create, read, update, and delete capabilities are supported for each entity.

Once meals and ingredients are entered, weekly meals can be decided by the meal generator. This feature allows the user to select how many and what type of meals they would like to eat for the week. Using LoDash, the array of meals is sorted by type, shuffled, and a meal is selected at random meeting the previously specified criteria. This is done for each meal that is to be chosen for the week, from 1-4, specified by the user and their appetite.

The meals and their ingredients are then displayed to the user, concluding the aforementioned “What to eat?” conversation for the week. Once approved, all included meals will have their ‘last eaten’ properties updated for history sake and all parties can exit the application happier then they came. The entire process is made pretty using Ng-Animate and the Animate.css CSS3 transition library.

So there you have it, a simple and fun application to solve a recurring problem. Check it out, let me know what you think and until next time, happy coding!

Next ArticleAngularJS Components for ASP.NET MVC Developers, Part 1: Layouts and Views