Tuesday, May 3, 2016

ASP.NET Core App with AngularJS

I've been trying to learn the new ASP.NET Core technology along with AngularJS. I always find it easier to learn new technology if I have some problem that I'm trying to solve. The problem that presented itself to me was a golf score tracking application. My middle son plays golf for his school team. I thought it would be great to build a mobile app to keep track of his golf score on the course. Since I've never been great at UI work, I thought this was a good opportunity to learn a front-end technology too.

I created an MVC 6 web API that exposes REST endpoints for working with a golf score. My intention with the application is to mimic a golf score card. The API went together pretty quickly. I kept the API simple: I have a single controller that exposes GET, PUT, POST, and DELETE methods on the Score object. The Score object holds some basic information about a round of golf (i.e. the course name and a description) along with a collection of scores for holes. The controller is saving data to a text file. I used a text file instead of a database to simplify the learning process. (Another motivation for saving to a text file instead of a database was because DNX Beta 4 did not have the ability to work with a SQL Server database, and I didn't want to hunt down a compatible technology.) Over the last several months, I've upgraded the back-end portion of the app to stay up-to-date with the ASP.NET Core changes, bringing it up to RC1.

The front-end of the application is an AngularJS application using Bootstrap for styling. At the time I created the initial application, I also wanted to learn some of the modern web tooling, including Bower. I used Bower to lay down the initial AngularJS application, but I quickly abandoned keeping up with Bower becase I had my hands full just learning AngularJS and Bootstrap.

I experienced two main difficulties creating the web application. First, I had a difficult time understanding AngularJS routes, views, controllers, and the relationships between them. Once I started to "get" how things were wired together, I was able to I went through several passes to get an application functional. The Javascript code is not pretty and probably not well organized. My focus was on understanding learning AngularJS and not making things "pretty."

I'm not a developer that is good at creating large amounts of documentation for my code. I generally want code to stand for itself. To that end, this project is in Github here. Hopefully the code does actually speak for itself.

In future passes, I would like to clean up the Javascript and add unit testing to both the API and Angular pieces. I also plan on upgrading this app to RC2 of ASP.NET Core when it is released. (I may try to do this sooner if time allows.)

No comments:

Post a Comment