Angular JS Hello World Example

Angular JS is so popular today, it has been used with Node JS as web development tools for both front end and back end. For a beginner, you must want to know how to use it. This article will show you how to create your first hello world example use Angular JS.

Table of Contents

1. Install Angular JS CLI.

Angular JS CLI is a command-line tool that can help developers create, manage, develop, debug and deploy Angular JS web applications.

It is an npm package, so you should first install node js in your machine ( How To Install Node JS In Windows, How To Use Node Package Manager ) and then install the angular js CLI tool use the below command.
```
$npm install -g @angular/cli
```
After that you can find the @angular/cli module directory in /usr/local/lib/node_modules.

2. Create Angular JS Web Application.

Now create a workspace folder and run the command$ ng new hello-world to create the angular js hello world web application. You can find there is a lot of output in the terminal.

If you run this command in macOS and encounter an error message like below. Then you need first run the command $ xcode-select --install in the terminal to fix this error.
```
xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun
```
After fixing the above error, run the command $ ng new hello-world again, the web application will be created successfully. You will find the command create a folder hello-world and there are a lot of subfolders and files under it.

3. Launch Angular JS Hello World Web Application.

In terminal cd into the hello-world directory and execute the command $ ng serve -o. This command will start angular js built-in HTTP web server and open a web browser with the address value http://localhost:4200/. You can also browse the url address separately. Then you can see the angular js welcome web page.

4. Customize The Hello World Angular JS Web App.

4.1 Analyze Default Web Application Source Files.

Below are the example source files.

C:\WORKSPACE\WORK\DEV2QA.COM-EXAMPLE-CODE\JAVASCRIPTEXAMPLEWORKSPACE\ANGULARJSWORKSPACE\HELLO-WORLD\SRC
│   browserslist
│   favicon.ico
│   index.html
│   karma.conf.js
│   main.ts
│   polyfills.ts
│   styles.css
│   test.ts
│   tsconfig.app.json
│   tsconfig.spec.json
│   tslint.json
│
├───app
│   │   app.component.css
│   │   app.component.html
│   │   app.component.spec.ts
│   │   app.component.ts
│   │   app.module.ts
│   │
│   ├───hello-world-tag
│   │       hello-world-tag.component.css
│   │       hello-world-tag.component.html
│   │       hello-world-tag.component.spec.ts
│   │       hello-world-tag.component.ts
│   │
│   ├───single-item
│   │       single-item.component.css
│   │       single-item.component.html
│   │       single-item.component.spec.ts
│   │       single-item.component.ts
│   │
│   └───ul-list
│           ul-list.component.css
│           ul-list.component.html
│           ul-list.component.spec.ts
│           ul-list.component.ts
│
├───assets
│       .gitkeep
│
└───environments
        environment.prod.ts
        environment.ts

First, let us look at the files which the CLI command tool generated by default.
The hello-world/src/index.html is the entrance Html file for this angular js web application.

When you look at it’s source code, you will find there is an Html tag <app-root></app-root> which is not a standard Html tag. This tag is an angular js root component that is defined in the hello-world/src/app folder.
Expand the hello-world/src/app folder, there are 5 files in it.

app.component.ts: This file is the component definition file, it declared the component is an Html tag component, it will use app.component.html file content as the tag content template. It will use the app.component.css file as the Html tag CSS style file.

// Import Component object from @angular/core module.
import { Component } from '@angular/core';

// Decorate this is a component.
@Component({
  // The html tag value.
  selector: 'app-root',
  // Tag template html file.
  templateUrl: './app.component.html',
  // Tag template css file, can add multiple css files.
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // title is the tag class attribute. This attribute is used in app.component.html file.
  title = 'app';
}

app.component.html: This is the component render content template file, you can put any Html content in it.
app.component.css: This is the component render content CSS style file, it is used to define template Html content render style.
app.module.ts: This file contains all the components defined in this module. Now, this module contains only one component, which is AppComponent. When you generate more components, the new component will be added in this file declarations section.

4.2 Create Custom Angular JS Component.

In the above section, we have analyzed the default component. But you can also generate your own custom Angular JS Html tag component use the below command.
Cd into the hello-world folder in the terminal and run the below command.
```
$ ng generate component hello-world-tag
```
You will find hello-world-tag folder has been created in the hello-world/src/app folder.

Expand this folder, you will find the below files. All the files are similar to the default app component, now look at the hello-world/ src/app/app.module.ts file, you will find the new component class has been added in the declarations section.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HelloWorldTagComponent } from './hello-world-tag/hello-world-tag.component';

@NgModule({
  declarations: [
    AppComponent,
    HelloWorldTagComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Edit the file hello-world/src/app/hello-world-tag/hello-world-tag.component.html content to below.
```
<p>
  This is a custom angular js html tag component.
</p>
```
Edit the hello-world/src/app/app.component.html file as below.
```
<app-hello-world-tag></app-hello-world-tag>
```

Then you will find the web page http://localhost:4200 content has changed to what you want ( the content in the hello-world/src/app/hello-world-tag/hello-world-tag.component.html file).
```
This is a custom angular js html tag component.
```

5. Conclusion.

Angular JS component is something like JSP tag library, it contains both the Html page ( for content page rendering ) and backend typescript generated class. So if you are familiar with JSP tag lib, you can understand this concept easily.