Your first Angular application

Your first app

During installation, I showed you how to create an empty application using the Angular CLI and ng new command. Within this tutorial we will use MDB Framework which will allow us to use Bootstrap for responsiveness as well as Material Design for an effortlessly great design.

1. Download a starter package

1. Navigate to the download page
2. Download the package by clicking on the button:

3. Unzip the package
4. Rename folder to my-app
5. Optionally you can move to a location where you will be able to easily navigate (tip: avoid spaces in your path)
   I will be using /Users/Dawid/aworkspace/my-app

2. Install dependencies and run the application

1. Open the terminal and navigate to your project directory:

cd Users/Dawid/aworkspace/my-app

2. Install npm dependencies using the following command:

npm install

Note: you can use shorter form: npm i

3. Compile our application and run it:

ng serve -o

Your browser should open website localhost:4200 and display MDB Welcome screen:

3. Hello World

1. Open a code editor — I strongly suggest Visual Studio Code
2. Click File->Open and choose our project
3. Open file:

   src/app/app.component.html

   and replace the entire code inside the file with following:

<h1>Hello World from my first angular application.</h1>

4. Save the file

If you didn't stop the previous command (ng serve -o), you should notice in the terminal, that the CLI has automatically detected that file had changed, recompiled the code again, and refreshed a tab in a web browser. Now it should look like below:

Good job. Your app is ready, let's have a closer look at the structure of our new application.