Sample Angular Application

Go back to Tutorial

Following are the steps to get a sample application up and running via github.

Step 1 − Go the github url – https://github.com/angular/quickstart

Step 2 − Go to your command prompt, create a project directory. This can be an empty directory called Project.

Step 3 − Next, in the command prompt, go to this directory and issue the following command to clone the github repository on your local system. You can do this by –

git clone https://github.com/angular/quickstart Demo

This will create a sample Angular JS application on your local machine.

Step 4 − Open the code in Visual Studio code.

Step 5 − Go to the command prompt and in your project folder again and issue the following command −

npm install

This will install all the necessary packages which are required for the Angular JS application to work.

Once done, you should see a tree structure with all dependencies installed.

Step 6 − Go to the folder Demo → src → app → app.component.ts. Find the following lines of code −

import { Component } from ‘@angular/core’;

@Component ({

selector: ‘my-app’,

template: `<h1>Hello {{name}}</h1>`,

})

export class AppComponent  { name = ‘Angular’; }

And replace the Angular keyword with World as shown below −

import { Component } from ‘@angular/core’;

@Component ({

selector: ‘my-app’,

template: `<h1>Hello {{name}}</h1>`,

})

export class AppComponent  { name = ‘World’; }

There are other files that get created as part of the project creation for Angular 2 application. At the moment, you don’t need to bother about the other code files because these are all included as part of your Angular 2 application and don’t need to be changed for the Hello World application.

Visual Studio Code will automatically compile all your files and create JavaScript files for all your typescript files.

Step 7 − Now go to your command prompt and issue the command npm start. This will cause the Node package manager to start a lite web server and launch your Angular application.

The Angular JS application will now launch in the browser and you will see “Hello World” in the browser as shown in the following screenshot.

 

Go back to Tutorial