Learn Angular 4 from scratch

Angular 4 is the latest version of AngularJs released in March 2017.

The basic steps to accomplish our first Angular 4 hello world example.

Here, we’ll simply create a component that passes the title from component to the view.

1. Install Angular CLI

The Angular CLI is a command line interface that helps to scaffold and build angular apps in Node.js style.

Also, it set up the angular 4 environments and will be helpful for us to work with angular apps like creating, running, etc.

Now, install Angular-CLI.

<code>npm install -g angular-cli</code>

Once installation is done, just make sure that it’s installed by checking it’s version.

<code>ng -v</code>

2. Install an Angular 4 Hello World App

Here, we will create an app named hello-world

ng new hello-world

Now, go to the directory of a newly created project.

cd hello-world

Before running your app, let’s dive a bit deeper in coding behind the picture.

2.1 Firstly, let’s see what’s AppModule is?

App Module Filepath: app/app.module.ts

<code>//Import angular core

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

//Import Browser module

import { BrowserModule } from '@angular/platform-browser';

//Import App Component

import { AppComponent } from './app.component';

//Declarations

@NgModule({

imports: [ BrowserModule ],

declarations: [ AppComponent ],

bootstrap: [ AppComponent ]

})

//Bootstrap

export class AppModule {}</code>

After the import statements, you can see the class with the @NgModule decorator.

The @NgModule decorator will identify the main module (i.e AppModule) as an Angular module class or a NgModule class. @NgModule tells Angular about the compilation and launch of an application.

Basically, three things you should know at this point.

imports — the BrowserModule that this and every application needs to run in a browser.

declarations — the application’s lone component, which is also …

bootstrap — is the root component that Angular creates and inserts into the index.html.

The Angular Modules (NgModule) will take you deep into the details of Angular modules. All you need to know at the moment is a few basics about these three properties.

2.2 Secondly, let’s see what App Component has

The app component has defined the title and this title will be rendered by template.

App Component Filepath: app/app.component.ts

<code>//Imports

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

//Decorator

@Component({

selector: 'hello-world',

templateUrl: 'src/app/app.component.html'

})

//Class

export class AppComponent {

constructor() {}

title: string = 'A Hello World App In Angular 4';

}</code>

2.3 Finally, let’s see HTML of an App Component

Here, the title will be rendered with the value which is set for title variable in-app component.

Template Filepath: app/app.component.html

<code><div>

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

</div></code>

3. All set to run the App

Finally, let’s run.

<code>ng serve</code>

That’s it, open your browser on http://localhost:4200 which will say A Hello World App In Angular 4