EX00 - Angular, Getting Started - COMP423

Introduction

In this exercise, you will gain experience following an official tutorial authored by the Angular development team. You will also gain experience using a common git branching workflow that is important to start building a habbit of using before we enter pair and team work. Finally, you will be doing this work within the context of a VSCode DevContainer; a modern development environment that is becoming commonplace in industry.

0. Complete the Prerequisites

Install Docker Desktop
Be sure the Docker Desktop program is actually running (check your status bar)
Check for Docker Updates and Install Them
Install VSCode
Install VSCode Extension for DevContainers (Go to Extensions, search for Containers, select the official Microsoft extension for Dev Containers)

1. Accept the GitHub Classroom Assignment

Accept Github Classroom Project via this link: https://classroom.github.com/a/9_7ikkGu

2. Clone the project locally on your machine

You can achieve this through the terminal or via VSCode. At this point in your CS career, we are hopeful you are able to remember, or search to remind yourself, how to clone a git repository from GitHub. Searches along the lines of “clone repository in vs code” should prove fruitful.

3. Open the cloned repository’s directory in VSCode

You will see the project files contain starter files for Angular’s Getting Started tutorial. There are lots of files! Do not let this overwhelm you. You will gain more comfort with the purposes of each in due time.

4. DevContainer - Rebuild and Reopen in Container

Now for the magical step that involves DevContainers. Open VSCode’s command palette (Shortcut: Command+Shift+P on Mac and Control+Shift+P on Windows) and search for “Rebuild and Reopen in Container.” This step will take a few minutes. Sit back and relax. Effectively what is happening here is a complete, virtualized Linux server environment is being built on the fly and all of the required software packages and development kits are being installed. We will explore what is going on behind the scenes here, as well as how to build your own DevContainers for your own projects, very soon. For now know that this step is taking care of a multi-step setup and installation process that otherwise would have taken you 30 minutes to an hour to do on your own, assuming all went to plan.

5. After VSCode Reopens in the DevContainer’s Environment, Open a Terminal

You should be able to open a new terminal and see a prompt that looks like this: /workspace (main) >>

Congratulations, you have started up your first DevContainer! This zsh shell is running inside the container, which has Node.js, Angular, and more installed. The /workspace is the working directory your terminal is in, which is where your repository’s files are mounted, and (main) refers to the branch your HEAD is on. This custom shell prompt is one of the niceties that was setup in the container build.

6. Start the Angular Development Server

Try running the command ng serve in the VSCode Terminal. The ng is short for aNGgular and is a command you will see is used regularly in the Angular development process.

Note for Windows Users: If you do not see changes automatically refreshing when you save files, try running ng serve --poll=2000 instead.

Open a web browser and navigate to localhost:4200. You should see “My Store”, which is the starting point for Angular’s Getting Started tutorial.

7. Create a Branch for Getting Started

Please note! The very specific workflow given for git branches, commits, and pushes is going to be graded and part of the submission. Be sure to complete the git steps at each section.

Let’s practice getting in the habbit of creating a branch for work in progress. Open a new terminal window in VSCode (look for the plus button) and try the following commands:

git branch getting-started
git switch getting-started

Notice how your shell prompt changes to reflect the branch you are working on! Woo! These two steps can be combined in a single command with a special flag of switch, such as git switch --create <new-branch>. In this example, the two commands could have been replaced with git switch --create <new-branch>.

The official first tutorial the development team of Angular put together to give a tour of big ideas can be found here: https://angular.io/start

Complete this first section on getting started, taking you to the point of listing products and seeing an alert of a product going on sale. Then, make a commit of your progress and merge it into the main branch.

Note: If you get asked by VSCode to trust this repository in order to make changes, go ahead and do so.

git status - Check the files changed.
git add . - In this scenario, we want to add all changed files.
git status - Confirm the files in staging/index are those we want to commit. Best practice!
git commit -m 'Completed the Getting started section of Angular Getting Started' - Create a commit
git push origin getting-started - Push your branch to your GitHub repository.

Pleae be sure you completed step 5 successfully now, and in future sections, before continuing on! You can verify via opening your GitHub project repository, navigating to its Code tab, looking for a dropdown button with the main branch. Click it and you should see the getting-started branch (and, in the following sections, their branch names, too). Notice switching between them changes the files you are browsing on GitHub.

git switch main - Back in your terminal, switch to the main branch’s last commit. Notice your work is gone!
git merge getting-started - Merge the getting-started branch into main. Notice, this is a Fast-forward!
git push origin main - Push your remote’s main, also causing it to fast-forward to the same commit as the getting-started branch refers to.

The steps of this workflow may feel like a lot of overhead when working individually on a project, but practicing them now will help when it comes time very soon to work in pairs on projects.

Please note! The very specific workflow given for git branches, commits, and pushes in Section 7 is going to be graded and part of the submission. Be sure to complete those steps before continuing to this section.

Follow the same process shown in Section 7 to create a local branch named adding-navigation, switch to it, and complete the “Adding navigation” section of the Angular Getting Started Tutorial: https://angular.io/start/start-routing

Once you have completed this section, follow the same workflow as before of adding files, creating a commit, pushing your branch, switching back to your main branch, merging the changes in, and so on.

We will look for the existance of these branches in your project’s history as part of the rubric for this exercise, so be sure to follow the steps in the previous section for each of the following sections, as well.

9. Create a Branch for Managing Data

Follow the same process as above to create a local branch named managing-data, switch to it, and complete the “Managing Data” section of the Angular Getting Started Tutorial: https://angular.io/start/start-data

10. Create a Branch for Using forms for user input

Follow the same process to create a local branch named forms-ui, switch to it, and complete the “User Forms and Input” section of the Angular Getting Started Tutorial: https://angular.io/start/start-forms

Great work!

The Gradescope submission for this exercise is open and due by 11:59pm on its due date.