This post guides you to create Eclipse Angular Hello World Example. In this example tools and dependencies are preinstalled and it requires prerequisites to start with this example.
Following are the prerequisites for this example.
Prerequisites
Eclipse : Eclipse IDE for Enterprise Java Developers - 2019-12
Eclipse WWD (Wild Web Developer) Plugin for Content Assistance
Node.js : 12.14.0
Angular CLI
Angular Version : 8
If Angular is not preinstalled use the following command to install Angular CLI globally,
npm install -g @angular/cli
-g stands for global
Open Eclipse in new workspace. Example : E:/Workspace. Go to Windows->Show View->Terminal->Open
Launch Terminal. Click the Launch Terminal icon and Choose terminal in drop down as Local Terminal
Check Angular Version in Terminal. Select the Directory of Terminal as Workspace.
Create New Angular project using command ng new AngularProjectName
Angular CLI Command used in this example,
ng new AngularHelloWorld
Select Angular routing with value as Yes and Stylesheet as css. In Console it will show the created files as below. Ignore the warnings.
After Angular project is created, import it in eclipse. Go to File->Import->General->Projects from Folder or Archive->Next->Directory->Select Angular Project Folder->Finish
Go to Terminal. Change Working Directory to the Generated Project. Run the Angular project using ng serve or ng serve - -open CLI command. If ng serve command is used the user have to open the Angular application manually in http://localhost:4200 URL. ng serve - -open command will automatically open the Angular application in browser in 4200 port localhost URL.
In Browser it will display the content as shown in the following image.
app.module.ts and app.component.ts are the TypeScript files. AppModule is the root module and resides in filename called app.modules.ts. AppComponent is the root component and resides in a filename called app.component.ts. app.component.html is the view HTML file of AppComponent.
app.module.ts
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 { }
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'AngularHelloWorld';
}
Open app.component.html and edit the html code as follows,
app.component.html
<div>
<body>
Hello World
</body>
</div>
Now switch back to the browser. The changes should be published automatically.