100 Days of Code, Days 4-8: Keeping Track of Your Costs with Angular

The wait is over! After a rewarding time rebuilding a house in Houston with the Credera team, I’m back and ready to give you some insights into what I’ve been coding over the last four days. I know everyone was on the edge of their seats all weekend preparing to learn what I’ve been up to!

I spent Days 4-8 of my #100DaysOfCode challenge building out a cost calculator in Angular that will use my GoSQL database from Day 3. While I’m not quite done, I’ve learned a lot about how the framework works and how to architect an application in Angular. This post will focus specifically on the front-end development. We will get into adding the GoSQL database later this week.

What is Angular?

Angular is a front-end Javascript framework maintained by Google that was released in 2010. Angular is known for its improved data binding and Model-View-Controller structure that gave it an advantage over older Javscript frameworks like jQuery.

So what is this app?

I am creating an application that calculates total cost for hourly resources. The user will have the ability to enter a name and cost per hour for a resource as well as give the number of hours worked by a resource for a given client. This will give a total for that client. Using the data binding in Angular, when a user updates the cost of a resource, it should also update the total for the client as well.

Getting started in Angular

It’s easy to get started building an Angular app. Once you download the Angular Command Line Interface (CLI), you simply have to type “ng new [Project Name]” into PowerShell, Terminal, or Command Line. This command will create a fully scaffolded project that you can run locally using the “ng serve” command. It’s really that simple!

The building blocks of an Angular App

The entire app is made of components. Angular components contain a view (made with HTML), styling (made with CSS), a controller (made with TypeScript), and a “specs” file to hold some settings (also made with TypeScript). You can create a scaffolded component using the “ng generate component [Name]”.

You control the data displayed in your view by inserting angular commands into the HTML. The Angular commands are defined in the controller and can load updated data in real time. As mentioned earlier, this is Angular’s advantage over older frameworks or general front-end JavaScript. In my app, updating information in the resource details text box will instantaneously change the data displayed in the resource box above. It is my goal to make sure changes on the resource component will update data in the cost total component.

Services at your service

Angular apps also contain services, which are importable functions that can be used throughout the program. In my app, I have a data access service that will be used to access the GoSQL database. Right now, it is returning the dummy data you see above. Services are injected into the component’s controller using dependency injection.

Next steps

My goals for this week is to finish up wiring the app together so that manipulating the resource cost updates the total. I’ll then update the service to read and write to an instance of the GoSQL database. Check my progress and play around with the code on GitHub and be on the lookout for tomorrow’s blog post!