First Angular application

Author: Dawid Adach


Our first app

During installation, I have shown you how to create an empty application using Angular CLI and ng new command. Within this tutorial we will use MDB Framework which will allow us to use Bootstrap for responsibility as well as Material Design which will give a great design to our components effortless.

1. Download a starter package

  1. Navigate to download page
  2. Download package clicking at the button:
  3. MDB Download
  4. Unzip the package
  5. Rename folder to my-app
  6. Optionally you can move to 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 application

  1. Open the terminal and navigate to your project directory:
  2. cd Users/Dawid/aworkspace/my-app
  3. Install npm dependencies using the following command:
  4. npm install

    Note: you can use shorter form: npm i

  5. Compile our application and run it:
  6. ng serve -o

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

    MDB Welcome screen

3. Hello World

  1. Open code editor - I strongly suggest Visual Studio Code
  2. Click File->Open and choose our project
  3. Open file:
    and replace entire code inside the file with following:
  4. <h1>Hello World from my first angular application.</h1>
  5. Save the file

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

Hello World

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

Rate this lesson

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding & in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...