Your first Angular application

Author: Dawid Adach

-

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. MDB Download
  4. Unzip the package
  5. Rename folder to my-app
  6. 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:
  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 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:
  4. <h1>Hello World from my first angular application.</h1>
  5. 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:

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 mdbootstrap.com & brandflow.net in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download

Sign up to follow your progress and get additional benefits