×
DocsConsole

DocsConsole

HelloWorld-App

By | | Updated : 2018-06-10 | Viewed : 322 times

Angular-HelloWorld-App

In previous lesion we learned how to install the Node JS as well as Angular CLI. So here, we will create the Angular project by using the below given command. Here we can see basic features of the Angular.

First go the angular work-space folder. If you are not created then create work-space folder. There we need to perform the below given command to create the application

ng new HelloWorld-App

It will be installed all required modules. You can see in the command prompt. Here project root folder HelloWorld-App will be generated

Angular ClI App Creation

Go to the project root folder i.e., HelloWorld-App, then execute the below given command.

ng serve --open

open server by ng serve command

Open the browser and execute the below given URL. You can see the output.

http://localhost:4200/

Angular HelloWorld

Please change the app.component.html (template) as given below.

app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>


Please change the app.component.ts (component) as given below.

app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'HelloWorld-App';
}

Here we have changed the title in app.component.ts. While rendering the template the property of component will be binded to the template. This is nothing but property binding. We will discuss more about this later.

Angular HelloWorld App

Download Source Code HelloWorld-App.zip

Leave A Reply