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-
- What is a component in Angular and how to create a component.
- What is a decorator in Angular
- How to import dependencies
- 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.
Starting in Angular version 17 new projects will be standalone by default. To create a project with NgModule use the option ng new APP_NAME --no-standalone. This option --no-standalone ensures that your project is created with NgModule which gives you a module to declare all the components. With Standalone components NgModule is not needed. For this example let's go with the module.
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.
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/
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-
- hello-world.component.ts- This is the class where code for the component is written in TypeScript.
- hello-world.component.html- The component template, written in HTML.
- hello-world.component.css- The component's private CSS styles.
- 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 } from '@angular/core';
@Component({
selector: 'app-hello-world',
templateUrl: './hello-world.component.html',
styleUrl: './hello-world.component.css'
})
export class HelloWorldComponent {
}
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 whenever <app-hello-world ></app-hello-world> tags are used within a template that 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 @Component decorator, file for which is imported using import statement from @angular/core.
Every component you create should be entered in the declarations array in the app.module.ts file. Component file should also be imported.
When you use ng generate component command to create component that is done automatically. You can verify in AppModule that such entries are done or not.
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/
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
You may also like-