Getting started

web
mobile

Author: Dawid Adach

-

1. Download project files

Once we have our environment ready (i.e. npm installed). Let's download the working files. We can do it in two ways:

1.1 GIT repository

In order to download the working files, open a console and type:


        git clone https://github.com/mdbootstrap/Angular-Tutorial-Agenda-App.git
    

1.2 ZIP file

If for some reason you don't want to use Git directly, you can simply download this zip file and extract it.

Info:
The working directory contains multiple folders for each section (getting-started, agenda-app) and inside those are other folders called lesson-x where x is the number of the lesson. Each of the folders contains the final code from a given lesson. In case of facing issues you can always refer to the corresponding lesson folder, check final code and compare with yours to spot the difference.

2. Open project

Open a project in your favorite editor. I use and recommend Visual Studio Code (VSC) from Microsoft

In order to open a project using VSC:

  1. Open VSC
  2. File > Open Folder
  3. Navigate to getting-started/start-here folder
  4. Click on Select Folder
Open project in VSC

3. Start project

In order to start a project we will use Node Package Manager (npm). Make sure you have npm installed in order to verify that you can open a default terminal/command line:

  1. Open Command line (below instruction how to open it for Windows, MacOS and Linux)
  2. How to run command line?

    Keyboard shortcut:

    On your keyboard press: + R . You will see Run windows. Type cmd and click OK or press Enter

    Run window

    You will see a screen like below:

    Windows command line

    That's it. You can now use a command line, however, please keep in mind that Windows Command Line is - frankly speaking - a crappy tool. That's why we strongly encourage you to use some alternative such as GitBash (installation guide here). It has more Unix-like commands that are more user-friendly than built in windows commands.

    How to run command line?

    Keyboard shortcut:

    Press cmd ⌘ + space to open Spotlight search, then type terminal and hit Enter ⏎

    Spotlight search

    You will see a screen lke below:

    macOS terminal

    Unix unlike Windows or macOS, doesn't necessarily have a Graphic User Interface (GUI), therefore in some distributions like RedHat, CentOS, Debian, and Ubuntu Server the terminal will launch immediately after bootin up the machine.

    In case you use a GUI, they may look different. However in most cases you they will have Windows-like "Start" button which will open the search menu that allow you to find terminal app.

    Sample start screen on Ubuntu:

    Ubuntu Home

    Also terminal windows and colors may vary depending on the distribution, - here is a sample Ubuntu terminal:

    Ubuntu terminal

  3. Type npm -v and press Enter
  4. If you can see the version of npm we can start the project (go to the next step). Otherwise you have to install npm first. Here you can find the guide on how to do it.

  5. Navigate to the project location using the command cd (the location on your computer will be different):
  6. cd C:\Users\Dawid\angulartutorial\agenda-app\start-here>

  7. Install dependencies using the npm install command
  8. Start the project using the npm start command
  9. Start project

    Note:
    When you run npm start command npm will invoke another command underneath: ng serve

    ng serve is an Angular CLI command so you can use it directly to run your project instead of npm start

  10. Open a web browser and navigate to http://localhost:4200

4. Hello World!

  1. Open the src/app/app.component.html file.
  2. Replace the content of the file with Hello World.
  3. Hello World
  4. Check the result in a browser:
  5. Hello World Preview

    Voila! Our application is running. That was easy, wasn't it? Now let's have a closer look at our project structure to understand how Angular project works.

5. Project structure

Let's have a look at the files within our project. There are multiple folders and files and each is responsible for a variety of functionalities, however you don't have to know all of them, for now, I will introduce you to the key files and directories within our project.

  1. The node_modules directory is where all of the libraries we need to build Angular are stored.
  2. In the src directory, is placed the source code of your application.
  3. The app/ folder contains file related to our initial App component:
  4. The app.component.html contains template of the component
  5. The app.component.scss contains the CSS styles for the component
  6. The app.component.spec.ts contains the tests of our component
  7. The app.component.ts contains a TypeScript code (logic) of the component
  8. The app.module.ts contains the configuration of the App module
  9. In the assets directory, you place any static assets like images or icons.
  10. index.html is the main file of our app.
  11. If we peek inside our index.html file, we can see there’s a element <app-root></app-root>, which will generate (render) our App component in the following place.

    Index.html
  12. The styles.scss contains the global styles for our application
  13. Note:
    Within the project you can either use CSS, SASS, Less and Stylus. In case of CSS you would see the style.css file within your project. Since we are using SASS (the more powerfull CSS), there is style.scss file (note different extension).

    The configuration whether project uses CSS or SASS is kept in angular.json file. We will learn how to switch between both in a future lesson. You can learn more about SASS here.

  14. The angular.json file contains the configuration of our app.

In the next lesson, we will learn how to use build sample components.

Important!
I am very happy that you reached this far. I would like to thank you and ask you for a small favor. Please rate this lesson using he stars below.

Your feedback is very important to us! Once you vote (it's just a single click!) there will be an optional form which let you leave comment to us. Please let us know what you liked and what you didn't like to help us make later tutorials better and better!

It would be awesome if after each lesson you would be so kind and gie a click to rate every lesson. I would appreciate that! Thanks!


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...