While working on the angular part of the mongo-explorer I came to conclusion that classes I watched are not very helpful. I saw how the application was built, but I still did not understand why the developer chose to use things certain way.
After that I started searching for a book on Angular 2 and found this:
Normally I like printed books, but in case of Angular 2 which is still in development it’s better to have electronic version which is being constantly updated.
Since I am using Visual Studio Code for development I found several useful extensions:
Oops, I did it again. Unfortunately, angular-fullstack generator only supports Angular 1.6 and I need Angular 2.
I searched web again, but was not able to find what I need. So instead I decided to use seed project I downloaded from the course I watched. It took me about an hour to fix all version conflicts, but I am finally able to run a simple MEAN app.
Setting up a MEAN project from scratch is not easy. Fortunately, there are many generators which one can use. I did a little search and found this one:
I generated my project several times and it was always failing to load – displayed LOADING message on start.
Finally, I figured that when I ran install command as recommended:
npm install -g yo gulp-cli generator-angular-fullstack
it installed generator-angular-fullstack v5 alpha 4. I checked their web site and the latest release was 4.1.0, so I had to uninstall generator and install version 4.1.0. Once I did it everything worked. Now I can build my app.
Here is an initial draft of the application I am going to build:
It will be an SPA. On the left I will place a tree control where one can select a data source. On the right I will place a grid control. Although Mongo collections can store documents of different types I guess most collections will contain documents of the same type so it makes sense to present them in grid format. When first displayed I will build grid based on fields found in the first document. Columns can be changed in Fields control (by clicking on hyperlink with the list of columns).
Cmd control is to display a MongoDB command used to get data.