Angular Hello World: Creating Your First Angular Application

Full-stack development is a booming field. It includes the front-end and back-end development of an application. Many applications used today like, Instagram, Facebook, and Netflix, are developed using powerful front-end tools to give seamless user experience. One such tool is Angular.

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program

What is Angular?

Angular is a JavaScript framework for building single-page client applications using HTML and TypeScript. It is primarily written in TypeScript and implements core functionality as a set of TypeScript libraries that you import into your apps. 

Angular is maintained by Google and has clear advantages while also providing a standard structure for developers on a team to work with. It enables users to develop large applications in a maintainable manner. 

Here are some of the salient features of Angular: 

Custom Components

Angular enables users to build their components that can pack functionality along with rendering logic into reusable pieces.

Data Binding

Angular enables users to effortlessly move data from JavaScript code to the view, and react to user events without having to write any code manually. 

Dependency Injection

Angular enables users to write modular services and inject them wherever they are needed. This improves the testability and reusability of the same services. 

Testing

Tests are first-class tools, and Angular has been built from the ground up with testability in mind. You will have the ability to test every part of your application—which is highly recommended. 

Comprehensive

Angular is a full-fledged JavaScript framework and provides out-of-the-box solutions for server communication, routing within your application, and more.

Browser Compatibility

Angular works cross-platform and compatible with multiple browsers. An Angular application can typically run on all browsers (Eg: Chrome, Firefox) and operating systems, such as Windows, macOS, and Linux.

Now that you’re familiar with Angular, in the next segment, you’ll learn about the prerequisites for creating an Angular HelloWorld Application. 

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program

Angular Prerequisites

There are three main prerequisites.

NodeJS

Angular uses Node.js for a large part of its build environment. As a result, to get started with Angular, you will need to have Node.js installed on your system. You can head to the NodeJS official website to download the software. Install the latest version and confirm them on you command prompt by running the following commands: 

node--version 

npm--v 

Angular CLI

The Angular team has created a command-line interface (CLI) tool to make it easier to bootstrap and develop your Angular applications. As it significantly helps to make the process of development easier, we highly recommend using it for your initial angular projects at the least. 

To install the CLI, in the command prompt, type the following commands

Installation:

npm install -g @angular/cli

Confirmation - 

ng--version

Text Editor

You need a text editor to write and run your code. The most popularly used integrated development environment (IDE) is Visual Studio Code (VS Code). It is a powerful source code editor that is available on Windows, macOS, and Linux platforms.

Now, Let’s create our first Angular HelloWorld Application.

Learn 15+ In-Demand Tools and Skills!

Automation Testing Masters ProgramExplore Program

Creating the Angular HelloWorld Application

Step 1

Create a folder for your application in the desired location on your system and open it on VSCode. Open a new terminal and type in the following command to create your app folder. 

ng create hello-world

When the command is run, Angular creates a skeleton application under the folder. It also includes a bunch of files and other important necessities for the application.

Step 2

To run the application, change the directory to the folder created, and use the ng command.

cd hello-world

ng serve 

Once run, open your browser and navigate to localhost:4200. If another application is running on that address, you can simply run the command.
ng serve--port

It will generate a port for you to navigate to. Typically, the browser looks something like this

You can leave the ng serve command running in the terminal, and continue making changes. If you have the application opened in your browser, it will automatically refresh each time you save your changes. This makes the development quick and iterative.

Basics of an Angular App

At its core, any Angular application is still a Single-Page Application (SPA), and thus its loading is triggered by a main request to the server. When we open any URL in our browser, the very first request is made to our server. This initial request is satisfied by an HTML page, which then loads the necessary JavaScript files to load both Angular as well as our application code and templates. 

Root HTML - index.html

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>HelloWorld</title>

  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="icon" type="image/x-icon" href="favicon.ico">

</head>

<body>

  <app-root></app-root>

</body>

</html>

The root component looks very pristine and neat, with barely any references or dependencies. The only main thing in this file is the <app-root> element. This is the marker for loading the application. All the application code, styles, and inline templates are dynamically injected into the index.html file at run time by the ng serve command. 

Unleash a High-paying Automation Testing Job!

Automation Testing Masters ProgramExplore Program

The Entry Point - main.ts

The second important part of our bootstrapping piece is the main.ts file. The index.html file is responsible for deciding which files are to be loaded. The main.ts file, on the other hand, identifies which Angular module is to be loaded when the application starts.

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

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

import { AppModule } from './app/app.module';

import { environment } from './environments/environment';

if (environment.production) {

  enableProdMode();

}

platformBrowserDynamic().bootstrapModule(AppModule)

.catch(err => console.error(err));

Most of the code in the main.ts file is generic, and you will rarely have to touch or change this entry point file. Its main aim is to point the Angular framework at the core module of your application and let it trigger the rest of your application source code from that point. 

Main Module - app.module.ts

This is where your application-specific source code starts from. The application module file can be thought of as the core configuration of your application, from loading all the relevant and necessary dependencies, declaring which components will be used within your application, to marking which is the main entry point component of your application.

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

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

import { AppRoutingModule } from './app-routing.module';

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

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program

Root Component - AppComponent

The app.component.ts is the actual Angular code that drives the functionality of the application.

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

@Component({

  selector: 'app-root',

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

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'hello-world';

}

A component in Angular is nothing but a TypeScript class, decorated with some attributes and metadata. The class encapsulates all the data and functionality of the component, while the decorator, @Component, specifies how it translates into the HTML. 

We suggest you check out the article on Angular components to understand the concept better. 

Back in our app.component.html file of the Angular HelloWorld application, you can delete all the code and type in something that you wish to render on the browser. We have added Simplilearn’s logo in the assets file and rendered it on the browser with a message.

<img src= "assets/Logo.png" class="center" width="200" height="80" display:block>

<h1>Hello! Welcome to the Hello-World tutorial</h1>

The browser looks like this.

Next Steps

We hope that this article on Angular HelloWorld helped you get a brief insight into the concept of Components. But, to learn more about Angular entirely, certification is highly recommended and could act as a catalyst for your coding career. 

Simplilearn's Full Stack Developer - MERN Stack will help you master front-end web development with Angular. You will gain in-depth knowledge of concepts like facilitating the development of single-page web applications, dependency injection, typescript, components, and directives with this Angular Course. You will also have the opportunity to apply your skills by building a real-time application.

If you have any questions or feedback, let us know in the comments section of this article. Our experts will get back to you immediately!