Build a Time Tracker with Laravel 5 and AngularJS

Laravel and AngularJS work great together, but it can be a little tricky to get going at first, especially if you are new to the frameworks. In a previous article, Chris showed you how to make a Single Page Comment App with Laravel and Angular. This tutorial will again bring the two frameworks together as we build out a simple time tracking application.

We’ll be going into a lot of detail in this tutorial, so to make things manageable it has been broken into two parts. The first part will focus on getting the front-end setup with AngularJS and the second part on getting the backend setup with Laravel 5.

We’ll be building a simple time tracking application that will give users the ability to track hours spent on tasks by clocking-in and clocking-out. We’ll use theTimepicker directive offered by UI Bootstrap to let users enter their start and end times, and will give them a field to enter comments. Users will be able to list all of their time entries, create new ones, and also edit or delete existing entries.

time-tracker-1-1

We will be using the AngularJS Style Guide by John Papa which sets out an opinionated set of conventions for Angular apps. If you haven’t seen this style guide before, some of the ways we set things up might look a bit foreign. Don’t worry though, it’s easy to catch on, and you’ll likely find our code easier to read and understand with the it applied.