After a beginner is introduced to the objectives of Angular's "Tour of Heroes" tutorial application, it's time for us to start working on some actual code. And we start with creating a new project workspace by using Angular command line interface ng new.

This is a step skipped in the "Try It" shopping cart app, as the StackBlitz workspace was already partially populated for us. Now we are faced with a blank application template workspace exactly as we would see when we start striking out on our own later. So there were a few paragraphs helping to orient us in the structure of an Angular application workspace. I appreciated this because not every coding tutorial give us this explanation. Too many just dive straight into "Now open this file and start editing..." without saying anything about the default template structure.

Another step skipped in the "Try It" shopping cart app is the process of setting up a web server for development purposes. After all, we need some way to see the results of our handiwork locally and find problems before we publish to a real web server. StackBlitz handles that for us by default in their online workspace, but when working locally we'll need to run ng serve --open on our own.

And if everything is successful, we can see the default template, which is a simple HTML page with links to various Angular resources. Our first introductory task is to remove this default page and replace it with a blank page that has the application title. I found this to be a mild novelty. Usually our first task in a tutorial is to add some code, but this time around our first step is to remove code.

Once the placeholder was removed, we can proceed to seeing some Angular concepts in action:

  • Component class -- the TypeScript file that will compile to JavaScript.
  • Component template -- the HTML files sprinkled with Angular-specific directives that will be translated during compilation.

The third part of a standard Angular component, the component stylesheet, doesn't get much attention. While CSS is a real and important part of a good looking web app, there's nothing Angular specific about CSS used in this tutorial. So I understand why there's very little focus on the why and how of styling an Angular application and we're merely given our component stylesheets for copying and pasting. I'm fine with focusing on Angular now, and I plan to go (re)learn CSS elsewhere later.