If you followed along with my journey so far, you have read exactly how I started out with a few wire-frame sketches and worked my way up to translating my mock up to an HTML wrap up. The next step is where things start to become more complicated, but simultaneously, also more exciting.
This app is the first project I’ve worked on where I had to learn and write in Angular – and to be quite honest, I feel like I am still learning. Obviously, I thought that Angular would operate the same way most of the other languages I have learnt thus far; but in short, I was wrong. Although websites or progressive web apps built with Angular appear to be similar to projects built without it, there is one fundamental difference.
Building a project with Angular allows you to keep your project compact because it is not required to build multiple ‘pages’ as one would most likely do when building a website with just HTML or PHP. This means that instead of loading a new page Angular shows the information from that new page on the current page without having to change the http address at all. Now at first, I found this slightly confusing, but as I went on to build the app, it became more and more normal. Don’t get me wrong, there are definitely differences between the languages I know and Angular, but since Angular uses TypeScript I was able to draw some connections and familiarities to JavaScript.
The most difficult part of Angular for me to wrap my head around is the NgModule. An NgModule is a structure that allows you to create elements which are grouped together. There are two main kinds of NgModules that can be accessed in a local or global scope. I found this blog post by Cyrille Tuzi very helpful in trying to understand this important concept of Angular.
Since I needed to learn the basics of the language first, I set out to complete a handful of Angular tutorials, including the classic Angular Tour of Heroes. Translating the app from HTML to Angular proves to be trying at times, but my progress so far makes me proud. During this step of my journey I have also found that I had designed some pages that I could no longer use and others that I needed instead. This is due to the fact that the database we will eventually use does not update in real time, therefore some pages will not be available to the user until the information is grabbed from the said database.
I believe that having my HTML wrap up makes building the Angular version much more efficient by helping me visualize what I want the app to look like in the end. I hope to be able to share with you very soon our beta version of the app, check in for updates!