Angular JS Hello World Example

Angular JS is so popular today, it has been used with Node JS as web develop 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.

1. Install Angular JS CLI.

Angular JS CLI is a command line tool which can help developer create, manage, develop, debug and deploy Angular JS web application. It is a 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 angular js cli tool use 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 work space folder and run command line ng new hello-world to create the angular js hello world web application. You can find there are a lot of output in the terminal, if you run this command in MacOS and encounter error message like below.

xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun

Then you need first run command xcode-select --install in terminal to fix this error.

After the error fix, run 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 sub folder and files under it.

angular js cli created hello world project files all

3. Launch Angular JS Hello World Web Application.

In terminal cd into hello-world directory and execute $ 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 below web page.

READ :   Debug Java EE Web Application In Tomcat Use Eclipse

angular js hello world web app default web page

4. Customize The Hello World Angular JS Web App.

4.1 Analyze Default Web Application Source Files.

angular js cli created hello world project files all

First let us look at the files which the cli command tool generated by default.

  1. 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 a html tag <app-root></app-root> which is not a standard html tag. This tag is a angular js root component that is defined in hello-world / src / app folder.
  2. Expand the hello-world / src / app folder, there are 5 files in it.
  3. app.component.ts : This file is the component definition file, it declared the component is a html tag component, it will use app.component.html file content as the tag content template. It will use 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';
    }
  4. app.component.html : This is the component render content template file, you can put any html content in it.
  5. app.component.css : This is the component render content css style file, it is used to define template html content render style.
  6. app.module.ts : This file contains all the component defined in this module. Now this module contains only one component, that is AppComponent. When you generate more component, the new component will be added in this file declarations section.
READ :   Java.util.ConcurrentModificationException Examples And Resolution

 

4.2 Create Custom Angular JS Component.

In above section we have analyzed the default component. But you can also generate your own custom Angular JS html tag component use below command.

  1. Cd into hello-world folder in terminal and run below command.
    $ ng generate component hello-world-tag
  2. You will find hello-world-tag folder has been created in hello-world / src / app.
  3. Expand this folder, you will find below files. All the files is similar with 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 { }

    angular js custom html tag component folder

  4. Edit 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>
  5. Edit hello-world / src / app / app.component.html file as below.
    <app-hello-world-tag></app-hello-world-tag>
  6. Then you will find the web page http://localhost:4200 content has changed to what you want.
    custom angular js html tag output web page

5. Conclusion.

Angular JS component is something like JSP tag library, it contains both render html page and backend typescript generated class. So if you are familiar with JSP tag lib, you can understand this concept easily.

(Visited 62 times, 1 visits today)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.