Thursday, March 12, 2020

Angular First App - Hello world Example

In this Angular tutorial we’ll develop first Angular application which is going to be an Angular hello world app.

While developing Angular hello world app we’ll also go through some of the concepts of Angular like-

  1. What is a component in Angular and how to create a component.
  2. What is a decorator in Angular
  3. How to import dependencies
  4. How to create a template that will show the data.

Prerequisite for Angular

Ensure that you have installed Node.js and an NPM package manager.

Refer this article How to Install Node.js and NPM in Windows to see how to install Node.js

Ensure that you have Angular CLI installed.

Refer this article How to Setup Angular to see how to setup Angular environment.

Creating Angular project

Navigate to the directory where you want to create your first Angular application and run the ng new command to create a new project.

F:\NETJS\Angular WS>ng new hello-world-app

This will install the required NPM dependencies. The ng new command prompts you for information about features to include in the initial app. Accept the defaults by pressing the Enter or Return key.

Understanding the project structure

ng new command generates a lot of files, files of particular interest to you are the files generated under the hello-world-app/src directory.

Angular application example

Refer this article Angular Project Structure With File Description for project structure files explanation.

Running the initial project

When you create an initial app project using Angular CLI it contains a simple Welcome app, ready to run. Before making changes for our Angular Hello World application lets try to run the created welcome app.

Navigate to the root of your application

cd hello-world-app

and run the following command

ng serve

The ng serve command builds the app, starts the built in HTTP development server, watches the source files, and rebuilds the app as you make changes to those files.

By default server listens on port 4200 so you can access the application using http://localhost:4200/

Angular running app

Creating Angular Component

Now lets create our own component with its own custom functionality. We’ll use this component to render data through template.

To understand this concept of component better you can open the index.html file in the src directory. There with in the body tag you can see a new tag <app-root></app-root>.

<body>
  <app-root></app-root>
</body>

This app-root is a component that is defined with in the Angular application.

Open the app.component.ts Typescript file in /src/app directory. There you will see a @Component decorator with the attributes as given below.

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

As you can see selector property here specifies the app-root (same as used in index.html). Which means any <app-root></app-root> tags that are used within a template will be compiled using the AppComponent class and get the functionality as defined in the class.

With this understanding of component lets go ahead and create our own component. A new component is created using the ng generate command.

F:\NETJS\Angular WS/hello-world-app>ng generate component hello-world

CREATE src/app/hello-world/hello-world.component.html (26 bytes)
CREATE src/app/hello-world/hello-world.component.spec.ts (657 bytes)
CREATE src/app/hello-world/hello-world.component.ts (294 bytes)
CREATE src/app/hello-world/hello-world.component.css (0 bytes)
UPDATE src/app/app.module.ts (414 bytes)

As you can see the implementation of the hello-world component is distributed over four files-

  1. hello-world.component.ts- This is the class where code for the component is written in TypeScript.
  2. hello-world.component.html- The component template, written in HTML.
  3. hello-world.component.css- The component's private CSS styles.
  4. hello-world.component.spec.ts- Defines a unit test for the hello-world component.

Now open the generated hello-world.component.ts file from the location src\app\hello-world to go through the generated class code.

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

@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

As you can see component class HelloWorldComponent is decorated using the @Component decorator which has three properties.

Specified selector is app-hello-world which means any <app-hello-world ></app-hello-world> tags that are used within a template will be compiled and rendered using the HelloWorldComponent class.

Template URL is ./hello-world.component.html which means view template is loaded from the file hello-world.component.html in the current directory (where component resides).

styleUrls is specified as ./hello-world.component.css which means styling for the component is done using hello-world.component.css in the current directory.

HelloWorldComponent uses two other modules Component and OnInit which are imported using import statement. These two dependencies are imported from @angular/core.

Changing the template

Since we want to display “Hello World” so open hello-world.component.html and add the following to it.

<h2>Hello World</h2>

When Angular loads the hello-world component this html is used as the view template.

Adding application styles

To style the component open hello-world.component.css and add following to it.

/* Application-wide Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 200%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}
body {
  margin: 2em;
}
body, input[type="text"], button {
  color: #333;
  font-family: Cambria, Georgia;
}
/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}

Loading the hello-world component

We are done with the creation of component in order to load it we need to add <app-hello-world ></app-hello-world> tag in /src/spp/app.component.html. That has to be done as bootstrapped component is AppComponent.

Refer this article Angular Application Bootstrap Process to see how Angular bootstraps an application.

Open app.component.html file, delete everything there and add the following.

<h1>{{title}}</h1>
<app-hello-world ></app-hello-world>

title displays the value assigned to title in app.component.ts where as <app-hello-world ></app-hello-world> is the selector specified in HelloWorldComponent.

If your application is not currently running then use ng serve command to start the server or refresh the page if is already running.

Access the URL- http://localhost:4200/

angular hello world example

That's all for this topic Angular First App - Hello world Example. If you have any doubt or any suggestions to make please drop a comment. Thanks!

>>>Return to Angular Tutorial Page


Related Topics

  1. How to Add Bootstrap to Angular Application
  2. Creating New Component in Angular
  3. Angular @Component Decorator
  4. Angular ngFor Directive With Examples
  5. Angular Property Data Binding

You may also like-

  1. Angular Disable Button Example
  2. Angular One-Way Data Binding Using String Interpolation
  3. Angular Two-Way Data Binding With Examples
  4. Service in Angular With Examples
  5. Serialization in Java
  6. Garbage Collection in Java
  7. Spring Web MVC Example With Annotations And XML Configuration
  8. Introduction to Hadoop Framework