Skip to main content

Lab 1 - Creating an Angular Application

Intro​

In this lab we will see what basic Angular application looks like in the browser.

Pre-requisites​

Before starting this lab, you should have created an Angular application by running the command

ng new hello-world

and selecting the following options:

Stylesheet format: css

Server side rendering: N

1. Start the Angular development webserver​

When we create a new Angular application, we get a full application with some dummy content ready to edit. We will explore the code files that have been created in a later exercise.

To be able to see the website in the browser we need a webserver - this is because the code files need to be transpiled before we can see the generated content. The transpiling process converts the code files into plain javascript that the browser can execute.

Angular comes with a built in webserver designed for use in development, so we'll use that to help us view the site.

  1. Open the project in your preferred IDE such as VSCode or IntelliJ Idea.

  2. Start the web server by entering the following into a terminal window in the IDE:

ng serve
  1. When the server tells you that the site is ready to view, open your browser and visit the URL that is presented (probably http://localhost:4200)

2. Explore the website​

  1. Notice that the browser displays what looks like a full web page.

  2. View the page source - in most browsers you can do this by right clicking on the page and selecting view source from the menu.

  3. Notice how little html there is - the page is made up of almost no HTML, but inside the <body> tag there is what looks like an html tag <app-root>. There are also some reference to Javascript files. Everything you are seeing on the web page has been generated by the javascript that is run in the browser.

  4. Now look at the generated HTML using your browser's developer tools. To do this in Chrome, right click on the web page and choose inspect. In the Elements tab you'll see all the HTML that was generated by the javascript code.

3. Stop the web server​

  1. To stop the development web server, press CTRL + C