Creating first Angular application – Part 2

In the previous article, we created our first angular application. In this article, we will learn the basic architecture of the angular application and using Visual Studio Code – Code editing tool to write angular code. This is available for free for installation. You can download latest version from Different installers are available for Windows, Mac OS and Linux operating system platforms.

angular vs code setup windows

Once the editor is installed, to open our application on code editor, execute following command from command prompt, from within the created application directory. This will open the application in Visual Studio Code editor as shown in the below image. You can also manually open the project from option : File > Open Folder option.

//Execute following command from within created angular application directory:
code .
angular app structure

Now the application contains lot of files and folders, which are created by angular CLI, which is required for our application. Folder node_modules will contain all the dependency packages required, e2e folder is used for E2E testing, etc. Also, the package.json file contains all the dependency package list. Do not bother too much about these files and folders, as these are the required components, created by the angular CLI for us. 🙂

We need to focus mainly on src folder, as we write our custom code related to our application inside this directory. Following is the files and folder structures created inside the src folder.

angular 2 app folder structure

app folder : This folder contains few of the following files and their usages are listed below.

  • app.component.css : This file can contain application specific css styling details.
  • app.component.ts : This is a typescript file(with .ts extension). This file contains the application component definition. This file is used to bind the data dynamically with application component’s html file(app.componet.html).
  • app.componet.html : This file contains the HTML components of our application.
  • app.module.ts : This file contains all the required modules imported for the application.

We can launch our application from within the Visual Studio Code terminal. Select Terminal > New Terminal from editor tool bar and execute the ng serve command as shown below. Note that any changes in the application files will be directly reflected in the browser if the serve command is running on the terminal.

angular app run on local

Let’s modify the code Now 🙂

Now, modify the app.componet.html content with following content. Here, we are giving user an option to enter his name with standard html <input> tag and we are displaying the entered name in the next line. The [(ngModel)] component here is used for binding (Two way data binding) the variable name dynamically to display the entered value in the next line.

<div style="text-align:center">
  Enter your name: <input type="text" [(ngModel)]="name"/>
    Hello {{ name }}!

Now, Modify the app.component.ts file with the following content. Note that we have modified the AppComponent class with name field and assigned a default value to it.

import { Component } from '@angular/core';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
 //here we have created name field with a default value : ASB 
  name = 'ASB';

If you try to run the application on browser, you may see a blank page. This is because we are trying to bind an input element, for that we have to import FormsModule from @angular/forms library inside our
app.module.ts file.

Modify app.module.ts with following content. Here, we have added an import on the line 3, and registered that import inside @NgModule under imports section as shown in the below code.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Well done.!!

Now, save the files and check the browser (Hope the ng serve is still running!!). Now we can enter our name in the input text field, and it will instantly reflected in the next line as shown below.

Angular hello world app

Congratulations..!! You have created a simple angular application now which says hello to you.!! 🙂 🙂

You may be interested in