Lately I have been spending a lot of time working on a new project. A project that was designed to help me internalize and explore AngularJS in more depth.
Although I have spent a great deal of time learning about MEAN stack over the past few months, Angular has been particularly difficult to get my head around. Largely because I have not come across anything quite like it. However, although the learning curve have been a little steep, the rewards have been well worth the effort.
As usual I needed a project to help me really understand how to put together the pieces of a web-application built using Angular. For that, I looked at my current problems and Job Hunting was at the top of the list. A few weeks ago I may have mentioned JibberJobber, a cloud based Job Searching Tool that allows you to manage your job prospects as you would as a sales person would manage their sales prospects. It is essentially a customer relationship management tool but instead of customers, you have potential employers. Great idea, but I found the tool to have overcomplicated and unintuitive. For me, that broke and important web-design rule – “don’t make me think”.
So I decided to make my own version using the MEAN stack. It was perfect. The document model of MongoDB would hold the details of the jobs I’ll be applying for. Express would provide a RESTful API to manage the models. Node would provide the platform for the web-server as well as providing a modular way of adding components for Express. Finally, we would use Angular to build out the front-end.
One interesting hurdle to overcome was how to structure the application. On one hand it is an Angular project, however it is also powered by Express. Strangely I could not find any comprehensive instructions or examples of how to integrate the two.
It took several attempts to find a structure I liked. I started with MEAN.js, however, I found the framework to be beyond me. I then switched to an Angular-Seed project and Express in separate directories. However, I found this caused my project to split into client and server-side individual projects and was difficult to export.
In the end I started with a ‘yo Angular’ (Yeoman – Angular Generator) project and then installed an express web-server in the same directory using Express Generator. I found this only required a couple of modifications to get the two to work together.
Angular and Bootstrap
What I love about Angular is the modular way you can build a client side data driven application using a few components. The two way data-binding is truly magical. It is a remarkable framework and I can see why it is gaining much popularity.
It is also an opportunity to use Bootstrap to provide a modern look to the user interface, and to provide a quick way to boostrap the css rather than start from scratch and build my own.
Using the stock Express Generator has allowed me to learn and explore what a typical Express application would look like. It was basic enough to learn about Express middleware and routing. Yet, comprehensive enough to configure a RESTful API for my project.
For this project I am using MongoDB to store persistent data for my application. This is the first time I have used MongoDB and find it to be a real departure from SQL. However, I do like the way the data is stored in almost JSON fashion.
Having spent only a week on the project, I found some aspects quite challenging. Particularly trying to merge so many ideas all at once and turning it into a functionally working prototype.
However, I am impressed by how quickly you can set up a basic CRUD application once you know how. Hopefully I’ll be able to add more tricks to my tool box over time, while I flesh out this data-driven application.