• Java
    • JAXB Tutorial
      • What is JAXB
      • JAXB Marshalling Example
      • JAXB UnMarshalling Example
  • Spring Tutorial
    • Spring Core Tutorial
    • Spring MVC Tutorial
      • Quick Start
        • Flow Diagram
        • Hello World Example
        • Form Handling Example
      • Handler Mapping
        • BeanNameUrlHandlerMapping
        • ControllerClassNameHandlerMapping
        • SimpleUrlHandlerMapping
      • Validation & Exception Handling
        • Validation+Annotations
        • Validation+ResourceBundle
        • @ExceptionHandler
        • @ControllerAdvice
        • Custom Exception Handling
      • Form Tag Library
        • Textbox Example
        • TextArea Example
        • Password Example
        • Dropdown Box Example
        • Checkboxes Example
        • Radiobuttons Example
        • HiddenValue Example
      • Misc
        • Change Config file name
    • Spring Boot Tutorial
  • Hibernate Tutorial
  • REST Tutorial
    • JAX-RS REST @PathParam Example
    • JAX-RS REST @QueryParam Example
    • JAX-RS REST @DefaultValue Example
    • JAX-RS REST @Context Example
    • JAX-RS REST @MatrixParam Example
    • JAX-RS REST @FormParam Example
    • JAX-RS REST @Produces Example
    • JAX-RS REST @Consumes Example
    • JAX-RS REST @Produces both XML and JSON Example
    • JAX-RS REST @Consumes both XML and JSON Example
  • Miscellaneous
    • JSON Parser
      • Read a JSON file
      • Write JSON object to File
      • Read / Write JSON using GSON
      • Java Object to JSON using JAXB
    • CSV Parser
      • Read / Write CSV file
      • Read/Parse/Write CSV File – OpenCSV
      • Export data into a CSV File
      • CsvToBean and BeanToCsv – OpenCSV

JavaInterviewPoint

Java Development Tutorials

Angular 5 Hello World Step By Step (formerly Angular 2) + Angular CLI

April 23, 2018 by javainterviewpoint 1 Comment

In this Angular 5 tutorial, we will learn how to create an Angular 5 Hello World application using Angular CLI. Angular 2/4/5 is completely new framework than Angular Js 1.X and written in Typescript, a superset of JavaScript. In order to use TypeScript, we need to install the compiler which runs on top of Node.js. In this Angular5 hello world example, I will be using node v7.8.0 and npm v5.8.0.

Environment setup for Angular 2 /Angular 4 / Angular 5 is the same.

Step 1: Prerequisites

Install Node.js & npm

  1. If you’re using Windows or MAC, download one of the installers from the Node.js download page. Make sure you are downloading and installing the version which is labeled “LTS” and not the “Current” version.
  2. Once Node.js is installed, validate the installation by opening the Node.js command prompt/command prompt and type the command “node -v” (without quotes), it should display the version of the Node.js
  3. Now we need to install npm, run the command “npm install [email protected] -g” (without quotes) to install the latest we version of the npm.
  4. Once npm is installed, run the command “npm -v” to get the version of the npm installed.

Install Angular CLI

Creating a new Angular app is a bit tedious job especially when you are new to Typescript as there will be lot of initial configurations involved. In order make it simpler Google came up with the utility called Angular CLI, using which we can create and manage our app from command line itself

In order to install Angular CLI open Node.js command prompt/command prompt and run the below command

npm install -g @angular/cli

Install Code Editor

I am using Microsoft Visual Code Studio as my Angular Editor, You are free to choose your own editor as there will lot of free tools such as Brackets, Notepad++, Sublime Text etc.. which can be used as an Angular editor.

Step 2: Create our First Angular 5 Hello World application

Once after installing all the above prerequisite, we are all set for building our first Angular 5 Hello World application.

  1. Create a new folder for our all our Angular 5 code in my case, I am creating a folder name “Angular5”, in the Node.js command prompt navigate to the folder.
  2. Use the ng new command to create our Hello World Angular Project “ng new hello-world-app” (without quotes), Angular CLI will create our project with below content.
C:\Angular5\hello-world-app>ng new hello-world-app
  create hello-world-app/e2e/app.e2e-spec.ts (297 bytes)
  create hello-world-app/e2e/app.po.ts (208 bytes)
  create hello-world-app/e2e/tsconfig.e2e.json (235 bytes)
  create hello-world-app/karma.conf.js (923 bytes)
  create hello-world-app/package.json (1300 bytes)
  create hello-world-app/protractor.conf.js (722 bytes)
  create hello-world-app/README.md (1029 bytes)
  create hello-world-app/tsconfig.json (363 bytes)
  create hello-world-app/tslint.json (3012 bytes)
  create hello-world-app/.angular-cli.json (1250 bytes)
  create hello-world-app/.editorconfig (245 bytes)
  create hello-world-app/.gitignore (544 bytes)
  create hello-world-app/src/assets/.gitkeep (0 bytes)
  create hello-world-app/src/environments/environment.prod.ts (51 bytes)
  create hello-world-app/src/environments/environment.ts (387 bytes)
  create hello-world-app/src/favicon.ico (5430 bytes)
  create hello-world-app/src/index.html (300 bytes)
  create hello-world-app/src/main.ts (370 bytes)
  create hello-world-app/src/polyfills.ts (3114 bytes)
  create hello-world-app/src/styles.css (80 bytes)
  create hello-world-app/src/test.ts (642 bytes)
  create hello-world-app/src/tsconfig.app.json (211 bytes)
  create hello-world-app/src/tsconfig.spec.json (283 bytes)
  create hello-world-app/src/typings.d.ts (104 bytes)
  create hello-world-app/src/app/app.module.ts (316 bytes)
  create hello-world-app/src/app/app.component.html (1141 bytes)
  create hello-world-app/src/app/app.component.spec.ts (986 bytes)
  create hello-world-app/src/app/app.component.ts (207 bytes)
  create hello-world-app/src/app/app.component.css (0 bytes)
npm WARN deprecated [email protected]: All versions below 4.0.1 of Nodemailer are deprecated. See https://nodemailer.com/status/
npm WARN deprecated [email protected]: This project is unmaintained
npm WARN deprecated [email protected]: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issu
e introduced in 2.1.0
npm WARN deprecated [email protected]: Use uuid module instead
npm WARN deprecated [email protected]: This project is unmaintained
npm WARN deprecated [email protected]: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import iss
ue introduced in 2.1.0

> [email protected] install C:\Angular5\hello-world-app\hello-world-app\node_modules\uws
> node-gyp rebuild > build_log.txt 2>&1 || exit 0


> [email protected] install C:\Angular5\hello-world-app\hello-world-app\node_modules\node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.8.3/win32-x64-51_binding.node
Download complete..] - :
Binary saved to C:\Angular5\hello-world-app\hello-world-app\node_modules\node-sass\vendor\win32-x64-51\binding.node
Caching binary to C:\Users\xbbl47m\AppData\Local\npm-cache\node-sass\4.8.3\win32-x64-51_binding.node

> [email protected] postinstall C:\Angular5\hello-world-app\hello-world-app\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js


> [email protected] postinstall C:\Angular5\hello-world-app\hello-world-app\node_modules\node-sass
> node scripts/build.js

Binary found at C:\Angular5\hello-world-app\hello-world-app\node_modules\node-sass\vendor\win32-x64-51\binding.node
Testing binary
Binary is fine
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): EPERM: operation not permitted, lstat 'C:\Angular5\hello-world-
app\hello-world-app\node_modules\fsevents\node_modules'
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","ar
ch":"x64"})

added 1259 packages from 1242 contributors in 162.821s
Project 'hello-world-app' successfully created.

Step 3: Run our first application

Traverse into the hello-world-app at the command prompt (C:\Angular5\hello-world-app) and run the command ng serve, this command will start the server and will launch the default Angular Application build by Angular CLI

hit on the URL : http://localhost:4200/

Output:

Angular 5 Hello World

Step 4: Creating a Custom Component [helloworld.component.ts ]

Open Code editor (Microsft Visual Code studio) and open our Hello World Application folder (C:\Angular5\hello-world-app)

Create a new folder helloworld, under the src –> app –> helloworld and create a new file named “helloworld.component.ts”, with the below content

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

@Component({
    selector: 'app-hello',
    templateUrl: './helloworld.component.html'
})
export class HelloWorldComponent
{

}
  • At the first line, we are telling the compiler to import the Component object from ‘@angular/core’ library.
  • @Component Decorator provides the meta-data information about the class. In the above code we have used two properties selector, templateUrl
    • selector: selector property indicates the tag name which we are going to use in DOM (HTML)
    • templateUrl: templateUrl property represents the name of the html file, in our case, it is “helloworld.component.html”, so whenever we use the <app-hello> </app-hello> tag it will be replaced with the content of the “helloworld.component.html”.
  • Instead of using the templateUrl, we can use the template property and specify the content of the html inline as below.
import { Component } from '@angular/core';

@Component({
    selector: 'app-hello',
    template: '<h3>Angular 5 Tutorial</h3>'
})
export class HelloWorldComponent
{
}

Step 5: HTML Template [helloworld.component.html ]

create a new file named “helloworld.component.html” under the src –> app –> helloworld folder with the below content

<h3>Angular 5 Tutorial</h3>

Step 6: app.component.html & app.module.ts

app.component.html

Replace all the content of the app.component.html with the below content.

<app-hello></app-hello>

app.module.ts

Import HelloWorldComponent and add HelloWorldComponent into declarations of our app.module.ts

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


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

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

Output:

Start the server using ng serve command and hit on the url http://localhost:4200

Angular 5 Hello World 1

Filed Under: Angular Tagged With: Angular 5, Angular 5 Hello World, Angular 5 Hello World Step by Step, Hello World

Comments

  1. Chirag Shah says

    July 13, 2019 at 3:24 pm

    Very well explained for novice. thanks a lot

    Reply

Leave a Reply Cancel 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.

Java Basics

  • JVM Architecture
  • Object in Java
  • Class in Java
  • How to Set Classpath for Java in Windows
  • Components of JDK
  • Decompiling a class file
  • Use of Class.forName in java
  • Use Class.forName in SQL JDBC

Oops Concepts

  • Inheritance in Java
  • Types of Inheritance in Java
  • Single Inheritance in Java
  • Multiple Inheritance in Java
  • Multilevel Inheritance in Java
  • Hierarchical Inheritance in Java
  • Hybrid Inheritance in Java
  • Polymorphism in Java – Method Overloading and Overriding
  • Types of Polymorphism in java
  • Method Overriding in Java
  • Can we Overload static methods in Java
  • Can we Override static methods in Java
  • Java Constructor Overloading
  • Java Method Overloading Example
  • Encapsulation in Java with Example
  • Constructor in Java
  • Constructor in an Interface?
  • Parameterized Constructor in Java
  • Constructor Chaining with example
  • What is the use of a Private Constructors in Java
  • Interface in Java
  • What is Marker Interface
  • Abstract Class in Java

Java Keywords

  • Java this keyword
  • Java super keyword
  • Final Keyword in Java
  • static Keyword in Java
  • Static Import
  • Transient Keyword

Miscellaneous

  • newInstance() method
  • How does Hashmap works internally in Java
  • Java Ternary operator
  • How System.out.println() really work?
  • Autoboxing and Unboxing Examples
  • Serialization and Deserialization in Java with Example
  • Generate SerialVersionUID in Java
  • How to make a class Immutable in Java
  • Differences betwen HashMap and Hashtable
  • Difference between Enumeration and Iterator ?
  • Difference between fail-fast and fail-safe Iterator
  • Difference Between Interface and Abstract Class in Java
  • Difference between equals() and ==
  • Sort Objects in a ArrayList using Java Comparable Interface
  • Sort Objects in a ArrayList using Java Comparator

Follow

  • Coding Utils

Useful Links

  • Spring 4.1.x Documentation
  • Spring 3.2.x Documentation
  • Spring 2.5.x Documentation
  • Java 6 API
  • Java 7 API
  • Java 8 API
  • Java EE 5 Tutorial
  • Java EE 6 Tutorial
  • Java EE 7 Tutorial
  • Maven Repository
  • Hibernate ORM

About JavaInterviewPoint

javainterviewpoint.com is a tech blog dedicated to all Java/J2EE developers and Web Developers. We publish useful tutorials on Java, J2EE and all latest frameworks.

All examples and tutorials posted here are very well tested in our development environment.

Connect with us on Facebook | Privacy Policy | Sitemap

Copyright ©2023 · Java Interview Point - All Rights Are Reserved ·