First Angular Application

In this tutorial we will learn how to create our first angular application and test it within 10 minute.

Technologies and tools

  1. NPM
  2. Node.js
  3. Angular CLI
  4. Angular

Preparation

First we have to ensure our computer is installed npm and node.js with command npm -version. If it is not install you may get it from node.js. Note, npm is distributed with node.js, which mean when you get node.js, npm is installed together.

After we get the npm and node.js ready, we can download the angular cli with following command, npm install -g @angular/cli . You may skip this if it is installed.

After the installation, we can type ng version to verify the version

Application Creation

Now we have all the tools we need to create our first angular application and we will use ng new hello command to create our application name “hello”

Here is some files we need to pay attention on.

  • package.json – the project dependency configuration
  • app.module.ts – application main module configuration
  • app.component.ts – application component which contain html and css declaration for that component
  • app-routing.module.ts – application routing configuration

Last, we now navigate to our newly created application project folder with cd hello command and ng serve –open to start our angular project. This should open up your browser and display following website.

TA-DA! and we just finish setup our first angular application.

First Angular Application
Tagged on:     

Leave a Reply

Your email address will not be published. Required fields are marked *