Angular Hello World example

Background

In some of the earlier post, we saw Angular JS which is the older version of angular. 

•  AngularJS Hello World Example
•  AngularJS Routing Using UI-Router

Current LTS version of angular is angular 6 (at the time of this writing). We will however be using angular 7 which is the active angular release.  In this post I will show you how to write a simple angular Hello World app. In the subsequent posts we will try to understand all files in the angular app and their purpose, angular routing, data binding etc.

Angular CLI

For generating angular app and it's components we are going to use Angular CLI (command line interface). You can see the wiki here. You need to have npm (node package manager) installed for this. If not please refer to my earlier posts on NodeJS(Links in the related section at the bottom).

To install Angular CLI execute following command -

• npm install -g @angular/cli 

 NOTE: You may have to run it with sudo of you are seeing permission issues. Once installed you can verify the installation by typing

• ng --version

 Once angular CLI is installed you are all set to create your 1st angular app.

Angular Hello World example

Now let's create a new angular app, to begin with. To create a new angular application execute following command -

• ng new angulardemo

 It if of format

• "ng new projectname"

 You will now be asked for choices like would you like to add routing to the application. Would you be using CSS, SASS etc? For now, select Yes for routing and CSS as an option. We will see this later. For our current demo, these are not really essential.

 Once done you can go into the project directory and run.

• ng serve -o

 This should build your app and open it in your browser.

 This is what the default application looks like. Now it's time to make some changes of our own. To do that open your application in your favorite IDE. I prefer using Visual Studio code. If you ae using this you can just open your project by going into the project directory and running -

• code .

The directory structure looks like below -

 As you can see there are bunch of files here but not to worry. We will see each in time. In this post, we will see how we can make changes and deploy our own code.


The entry point is a file called angular.json. This file has all the configuration information used for building and developing your angular app. Look at the following part-

          "options": {
            "outputPath": "dist/angulardemo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }

You can see the important files we would have to check. You can see the index file is "src/index.html", the corresponding type file is "src/main.ts". Similarly, the CSS file is "src/styles.css". There are other files but not to worry about it as of now. We will just worry about these files for now.

Now let's go to our index.html and here you can see the following tag -

• <app-root></app-root>

Now let's try to understand what would get rendered in this tag.  As I mentioned before the main file in "main.html" and corresponding typescript file is "main.ts". If you go to main.ts you will see -

import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

This basically instructs to bootstrap a module called AppModule which is located at './app/app.module'. So go to this file. And you will see the following content in it -

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 { }

This is the main module of your Angular app. A module can have multiple components. An angular can have multiple modules as well. You can see in the above example it imports 2 modules BrowserModule, AppRoutingModule. You can see where it is imported from. The important part to see here is the bootstrap part because that is the component that actually gets rendered on loading an angular app. So lets go to ./app.component file.

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

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

export class AppComponent {
  title = 'angulardemo';
}

Here you can see AppComponent is a component. Also, you can see it's selector is "app-root" which we saw in index.html. You can also see the HTML file and CSS file this component is using to render itself. So let's go its HTML file './app.component.html'. You can see this has some HTML code that got rendered when we ran "ng serve" command above.

Time to make some changes. Remove this code completely and replace it with following code.

<div class="hello-world">
  <h1>Hello World!</h1>
</div>

Notice we have added a class for the div called "hello-world". Let's add this class to our CSS file - './app.component.css'

 .hello-world {
    font-style: italic;
}

That's it. If you already have "ng serve -o" command running your changes should get reflected immediately in the browser. If you killed the command, run it again and you should see the changes reflecting in the browser.

You can see in above picture that "Hello world!" comes in h1 tag and in italics()as our class defined it.

Related Links

•  AngularJS Hello World Exampe(OSFG)
•  AngularJS Routing Using UI-Router(OSFG)
• NodeJS Hello World Example(OSFG)
• How to install Node and npm to run node.js programs in Linux(OSFG)