I just completed a small Angular project with MEAN stack, which is designed to show the list of movies I watched or wish to watch recently.

Requirement

• show movie list with pagination
• search movie by name
• show movie details Implementation The project is implemented with MEAN stack and everything is on windows.

Angular

The project is set up with Angular 8 cli and there are only two components in the project, the List-Component to show the movie list and Detail-Component to show the movie details. The two components can route to each other and SessionStorage module(ngx-webstorage) is used to pass the movie data between the two component. List-Component uses HttpClient to retrieve the movie date from REST server (Node/Express). The movie posters are also stored in Angular server as static resource.

Node/Express

The backend server uses Express framework with MongoClient module to assess Mongo DB. Because it is a separate server than the frontend server, so it adds ‘Access-Control-Allow-Origin’ header to allow the CORS access from frontend server.

MongoDB

Mongo Server 4.0 on windows is used for the project to store the movie information, which is two-page of movie list. The movie information including the poster are extracted from https://www.themoviedb.org.

Summary

This is a taste of how MEAN stack fits together. Angular is well oiled framework for Single Page Application (SPA). The idea of component is well understood but the idea of module is not quite straight forward.

From the learning curve point of view, I could probably say that VUE is easiest to grasp followed by Angular, then React, but I can say without doubt that Angular, React and VUE can implement the same SPA just with a little different flavor. It is also a little strange for me that MEAN has to use two sperate servers for frontend (ng server/port 4200) and backend (node server.js/port 3000). The React and VUE can combine these together into one server but with complex.

Credits are given to Instructor Tao Guorong, who implemented the code base for Angular and it uses static json file as the data source. The major enhancement I did is to import the data into MongoDB and add backend express server so that it can be MEAN.

Testing