I know it has been a while, but I am back on the .Net Core The Globe In My BucketList Application (TGIMBA) upgrade. The last version of TGIMBA used .NET 4.6.X and JQuery. I picked Angular 4 with a .NET Core backend.
If you remember, I had started this earlier in the year. I had worked my way through the basic user interface and stumbled on the Dashboard. Anyone interested can read that here – https://erichelin.wordpress.com/2018/02/28/tgimba-net-core-upgrade-part-7-tgimba-user-interface-dashboard/
Instead of working from the back end forward like I had been planning (i.e. the Node JS TypeScript API work), I am starting with the front because of my return to the .NET ecosystem at work. To speed this up, I am using a lot of the previous 4.6.x’s core logic wrapped in the .NET Core run time. It is very likely that the old logic will be re-written once I move the Application Programmatic Interface (API) that is now bundled with the web site to its on separate service installation. I really want this version of TGIMBA to allow separate clients that all subscribe to the same API.
If you also notice, I have taken down the old site. I was reading about the new European Union (EU) privacy rules and I wanted to make sure I was compliant. Plus the old User Interface (UI) could be a lot better. I am going to focus on the basic UI with functionality before making it ‘pretty’. Much like the approach I took with Full Stack Developer series, making the UI interesting will be the last step. I am also not exactly sure what I want to do as I am not a graphic artist. I am hoping that by taking this approach, a ‘pretty’ UI idea will present itself. I am going to do things a little bit differently in constructing a ‘pretty’ UI as well. Instead of crafting two separate versions like I did earlier, I am going to create this version first with as little Cascading Style Sheets (CSS) as possible. Then, I am going to review just the raw Hyper Mark Text Language (HTML) views and functionality and ‘CSS’ myself into a pretty desktop version. Then, take the same approach for the mobile version. I hope to learn if it is possible to truly have one set of generic views and make multiple sites out of them with CSS only. Should be an interesting experiment 🙂
Though I have to add a little CSS to restore the Dashboard to its former brilliance 🙂
To accomplish this, we first create a welcome controller. To be able to launch a page, the first thing we need in a Model View Controller (MVC) site is a controller. The controller ‘decides’ how a request will be handled. I also created a base controller to handle shared items between all of the controllers. At this point, the one ‘item’ is the API service reference. I am not injecting it because there is only one. If this changes, I will create a factory or something to handle it.
- The completed base controller looks like this:
- The completed welcome controller looks like this:
Then, we create a welcome model. Once an MVC controller is called, it needs data to send to the user. I also created a base model to handle shared items between all of the models. At this point, it is the API service reference. This is a little bit of duplication between the base controller and base model, but I want this version of TGIMBA to adhere to the specification that the model handles all date interactions. I would put it in the model only, but the controller is the first one in the chain. Soooo, this is my solution 🙂
- The completed base model looks like this:
- The completed welcome model looks like this:
- The completed view looks like this:
Clicking ‘here’ at the bottom of the page loads the Angular 4 TypeScript portion of the application. So, it looks like this approach to using existing Dashboard and combining it with the Angular 4 version is successful 🙂
Running the project reveals this page.
Clicking on ‘here’ takes you into the Angular 4 Application:
Next will be the login functionality. I am going to expand on what was previously supported to allow an account recovery as well as the ability to delete an account. Future versions will allow a user to login with Facebook, Google and a few others.