TGIMBA .NET Core Upgrade – Part 4 – Basic Angular User Interface

Git  Code

In this blog post, I am starting the ‘angularization’ of the TGIMBA .NET Core 2 User Interface (UI). Originally written with JQuery, I am opting to write it as an Angular UI because it is something new. JQuery is still around, but I have heard a lot of good things (mostly) about Angular and I have been wanting to try it.

Also, in reviewing the JQuery code, I realized that I did not design the current UI very well because it is all code driven (i.e. generated dynamically from code). In hindsight, I should have created views (i.e. Separation of Concerns) that could have been used by the JQuery controllers to load data into and then render for the user. Earlier in my career, I worked with developers that developed UI’s this way and I thought it was normal. Generally speaking, it is my understanding that UI elements like HTML or other ‘views’ should not be dynamically generated. They should be a separate entity from the code (i.e. just like the ‘V(iew)’ in Mode View Controller (MVC)).

To start this out, I searched for a good Visual Studio 2017 centric getting started tutorial and settled on reference #2. It said I needed an ‘Angularized’ MVC Web Application. However, when I went to add it, I noticed that the Angular template was not present. Installing it as detailed in reference #4 fixed this and put me back on track with the tutorial.

I didn’t realized it at the time, but when creating the application, it does all of the npm package pulls for you. I was a little surprised at this since with Node JS (my first big non C# .NET excursion), you install your npm packages one at a time. One of the things I love about Visual Studio is the automation when it comes to creating complex projects with the start of the button. To be fair, this has bitten me before. There have been a number of times when something gets out of wack and I have had to perform surgery on a .sln or .csproj file to get everything working again. However, most of the times it works out 🙂

After installing the template, the Angular Active Server Page (ASP) .NET Core Web project is added (the ‘TgimbaNetCore’ project is a previous attempt and I will delete it in the next round of modifications):

main

Out of the box the hello world Angular application has some basic functionality.  You are able to increment a counter and retrieve basic data from a local web service. Both of these will be invaluable to me as I learn how the application is wired together.

postAngular1

The Angular application is placed under the ‘Clientapp’ folder in the root of the ASP .NET Core project. Reviewing elements under the ClientApp/app/components/app folder, it seems like the basic components of an angular page are a view (.html file) and a data adapter (.ts file w/angular reference). Depending on the component, it also looks like you can have .css and .spec.ts files. The .css speaks for itself and it looks (to me) like the .spec.ts is a test file.

postAngular2

Now that I have the basic application working, I will start modifying and adding Tgimba ‘stuff’.  I created a ‘tgimba’ folder at the same level as the other components:

  • tgimba.component.ts (data adapter)

postAngular3

  • tgimba.component.html (view)

postAngular4

  • Listed together in the Solution Explorer

latest

NOTE:

  • I am not sure why, but when I cut and paste a file from another location, Visual Studio 2017 doesn’t seem to get the point that these are new files and are intended to be added to github. Adding them as a new component makes Visual Studio 2017 does this correctly. I also noticed that renaming them and then putting the name back also has the same effect.
  • I am not sure why, but really takes a while for the application to start up. Running locally, it takes between 30-45 seconds (ugly).

To complete the process and display just tgimba.component.html:

  • I commented out the nav bar in the app.component.html file

postAngular5

  • I added tgimba to the component list and additional locations in app.shared.module.ts

postAngular52

The final result was this:

postAngular6

In the next post, I will figure out the specifics of Angular testing and in a TDD approach, starting ‘Angularizing’ Tgimba.

Stay tuned!

References

  1. https://www.youtube.com/watch?v=ytDTkFJOJIE
  2. https://www.youtube.com/watch?v=TbJSABCCtt8
  3. https://adrientorris.github.io/aspnet-core/how-setup-angular-2-typescript-project-visual-studio-2017.html
  4.  https://marketplace.visualstudio.com/items?itemName=AndreyFomin.AngularCLIProjectTemplate
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s