Tag: Angular 2

Angular 2 in the MEAN Stack – A Project Template

Should I leverage my love for JavaScript to develop an application from the ground up? Yes Please!

I recently became aware of the beauty of developing with the MEAN stack. It started with my desire to brush up on Angular 2 and using the Angular CLI. I ended up with a TODO application that runs on Node using MongoDB, Express.js, and Angular 2 (from a foundation found here: https://scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli).

I am also a fan of LESS. It makes writing modular CSS a breeze. I am also not yet sold on the Styled Component approach Angular is now pushing. I do believe Component-based UI architectures make writing modular CSS quite simple. I just don’t think styles should be located across the application when, with an optimally modular UI, the CSS used can be quite minimal. Beyond that, an application should have a look and feel that gives the user at least the illusion of cohesiveness. Easily done when styles are in one place.

Using Feature Modules with Angular 2 makes a lot of sense. Each feature can be created in isolation while still being integrated with the rest of the application. The module structure of the TODO application is shown in Figure 1. This structure allows the application to be extended and makes features easy to find for updates and bug fixes. The approach also provides a more SOLID application.

todofeaturemodule
Figure 1: Module structure

With the focus on Angular 2, the server-side code is quite minimal and I don’t have much to say about it. Figure 2 depicts the main ideas.

todoapi
Figure 2: Server-side

I almost forgot to mention that this app is on GitHub: https://github.com/calebmagenic/ng2-mean. Let me know your thoughts!

I look forward to continuing my work with the MEAN stack and sharing what I find that works – and what doesn’t work so well. Look for more in the future.

UPDATE: After working with later versions of Angular, I found it to be an effective front-end framework that can solve enterprise-level concerns. I enjoy working with TypeScript and creating stunning multi-faceted projects with the help of Nx Workspaces. To make it easier to get up to speed with the MEAN stack, Manning Publications released a new book called Getting Mean with Mongo, Express, Angular, and Node (2nd Ed.) written by two smashing authors and developers in the field Simon Holmes and Clive Harper. After leveraging this book, I am able to create substantial solutions using the MEAN stack. I highly recommend it even if you are just trying it out. It has a ton of immediately actionable information packed into it.