Angular 2 - Hello World

Advertisements

Previous Page
Next Page  

There are various ways to get started with your first Angular JS application.

  • One way is to do everything from scratch which is the most difficult and not the preferred way. Due to the many dependencies, it becomes difficult to get this setup.

  • Another way is to use the quick start at Angular Github. This contains the necessary code to get started. This is normally what is opted by all developers and this is what we will show for the Hello World application.

  • The final way is to use Angular CLI. We will discuss this in detail in a separate chapter.

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

github

Step 2 − Go to your command prompt, create a project directory. This can be an empty directory. In our example, we have created a 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 issuing the following command −

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

Quickstart

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

Step 4 − Open the code in Visual Studio code.

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

NPM Install

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

Tree Structure

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.

We will be discussing these files in the subsequent chapters in detail.

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

Angular Application

Lite Server

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.

Hello World

Deployment

This topic focuses on the deployment of the above Hello world application. Since this is an Angular JS application, it can be deployed onto any platform. Your development can be on any platform.

In this case, it will be on Windows using Visual Studio code. Now let’s look at two deployment options.

Deployment on NGNIX Servers on Windows

Note that you can use any web server on any platform to host Angular JS applications. In this case, we will take the example of NGNIX which is a popular web server.

Step 1 − Download the NGNIX web server from the following url http://nginx.org/en/download.html

nginx

Step 2 − After extracting the downloaded zip file, run the nginx exe component which will make the web server run in the background. You will then be able to go to the home page in the url – http://localhost

Download

Step 3 − Go to Angular JS project folder in Windows explorer.

Step 4 − Copy the Project → Demo → node-modules folder.

Demo

Step 5 − Copy all the contents from the Project → Demo → src folder.

Src Folder

Step 6 − Copy all contents to the nginx/html folder.

HTML Folder

Now go to the URL − http://localhost, you will actually see the hello world application as shown in the following screenshot.

Hello World Application

Setting Up on Ubuntu

Now let’s see how to host the same hello world application onto an Ubuntu server.

Step 1 − Issue the following commands on your Ubuntu server to install nginx.

apt-get update

The above command will ensure all the packages on the system are up to date.

Packages on up to date

Once done, the system should be up to date.

System on up to date

Step 2 − Now, install GIT on the Ubuntu server by issuing the following command.

sudo apt-get install git

html GIT on Ubuntu

Once done, GIT will be installed on the system.

GIT Installed

Step 3 − To check the git version, issue the following command.

sudo git –version

GIT Version

Step 4 − Install npm which is the node package manager on Ubuntu. To do this, issue the following command.

sudo apt-get install npm

Install npm

Once done, npm will be installed on the system.

Installed npm

Step 5 − To check the npm version, issue the following command.

sudo npm -version

Check the Version

Step 6 − Next, install nodejs. This can be done via the following command.

sudo npm install nodejs

Nodejs

Step 7 − To see the version of Node.js, just issue the following command.

sudo nodejs –version

Nodejs Command

Step 8 − Create a project folder and download the github starter project using the following git command.

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

GIT Hub

This will download all the files on the local system.

Local System

You can navigate through the folder to see the files have been successfully downloaded from github.

Navigate

Step 9 − Next issue the following command for npm.

npm install

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

Angular JS Application

Once done, you will see all the dependencies installed on the system.

All Dependencies

Step 10 − Go to the folder Demo → src → app → app.component.ts. Use the vim editor if required. 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 in the following code.

import { Component } from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   template: '<h1>Hello {{name}}</h1>'; 
}) 
export class AppComponent { name = 'World'; }
app

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 they are included as part of your Angular 2 application and don’t need to be changed for the Hello World application.

We will be discussing these files in the subsequent chapters in detail.

Step 11 − Next, install the lite server which can be used to run the Angular 2 application. You can do this by issuing the following command −

sudo npm install –save-dev lite-server

Save dev

Once done, you will see the completion status. You don’t need to worry about the warnings.

Warn

Step 12 − Create a symbolic link to the node folder via the following command. This helps in ensuring the node package manager can locate the nodejs installation.

sudo ln -s /usr/bin/nodejs /usr/bin/node

Node

Step 13 − Now it’s time to start Angular 2 Application via the npm start command. This will first build the files and then launch the Angular app in the lite server which was installed in the earlier step.

Issue the following command −

sudo npm start

npm start

Once done, you will be presented with the URL.

URL

If you go to the URL, you will now see the Angular 2 app loading the browser.

App Loading

Deploying nginx on Ubuntu

Note − You can use any web server on any platform to host Angular JS applications. In this case, we will take the example of NGNIX which is a popular web server.

Step 1 − Issue the following command on your Ubuntu server to install nginx as a web server.

sudo apt-get update

This command will ensure all the packages on the system are up to date.

Command Ensure

Once done, the system should be up to date.

Once Done

Step 2 − Now issue the following command to install nginx.

apt-get install nginx

Install nginx

Once done, nginx will be running in the background.

Background

Step 3 − Run the following command to confirm that the nginx services are running.

ps –ef | grep nginx

nginx Services

Now by default, the files for nginx are stored in /var/www/html folder. Hence, give the required permissions to copy your Hello World files to this location.

Step 4 − Issue the following command.

sudo chmod 777 /var/www/html

Issue Command

Step 5 − Copy the files using any method to copy the project files to the /var/www/html folder.

Method

Now, if you browse to the URL − http://192.168.1.200/index.html you will find the Hello world Angular JS application.

Link
Advertisements