Install Angular 5 [Hello World] In Less Than 5 Minutes

0

This article will allow you to install Angular 5 and create your first Angular 5 Hello World app.

Excited! As you know that, Angular 5 has been launched with New Features and I am sure you also looking to get your first feet into the one of the most popular front-end JavaScript framework.

Also, if you’re already aware of Angular 4 basics, it’s gonna be pretty much easy to be with Angular 5.

Howeover, if you have no previous experience with Angular 4, don’t worry Angular 5 installing process is very simple and easy to understand. So, let’s get started.

Install Angular 5 – Hello World

Angular CLI [with options] is a tool that will make your life easier with Angular app, it helps us to build our Angular apps in quick time.

Bascially, angular CLI will allow us to scaffold our apps and use many more Angular CLI options like –routing, –style, etc.

First of all, let’s install the Angular CLI.

npm install @angular/cli -g

Great! I think you’re ready to use Angular CLI. Just make sure that version of Angular CLI should be 1.5.0 by using following command.

ng -v

Next, let’s create your first app.

ng new angular-5-hello-world

Next, let’s go to that directory.

cd angular-5-hello-world

Finally, run your app.

ng serve

Moreover, let’s look into the App Component.

App components comes with the importing necessary modules, @Component decorator, and the Class that will be exported.

app/app.component.ts

//Imports
import { Component } from '@angular/core';
//Decorator
@Component({
selector: 'hello-world',
templateUrl: 'src/app/app.component.html'
})
//Class
export class AppComponent {
constructor() {}
title: string = 'This is my fist project on install Angular 5 - Hello World';
}

This will be the App template file and it will just render the title value which we have defined in the app component.

app/app.component.html

<div>
<h2>{{title}}</h2>
</div>

And that’s it, just open http://localhost:4200 in your browser, you’re ready to rock with your first Angular 5 Hello World app.

You will see the text This is my first project on install Angular 5 – Hello World on the browser window.

Installing Angular 5 without Angular CLI

The Angular document will allow you to download the basic Angular 5 structure.

After downloading, you can extract all the folders and files in a project folder.

Now, after going to that project folder directory in terminal, you can install the dependencies by using NPM.

npm install

Here we go! finally, you can run your app using ng serve.

Leave a Reply

avatar
  Subscribe  
Notify of