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:
    src/app/app.component.html
    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.


Next lesson

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

About author

Dawid Adach
For more than 5 years Dawid was working as an IT Consultant specializing in SOA/EAI/ESB for banking domain. He was gaining experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the biggest companies within a domain. Since 2 years as a co-founder of mdbootstrap.com & brandflow.net is using and teaching others technologies like Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...
Sign up to follow your progress and get additional benefits