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.

Also, we will use the Visual Studio Code – Code editing tool to write angular code.

Visual studio code IDE

Visual studio code is available for free for installation. You can download the latest version from code.visualstudio.com. Different installers are available for Windows, Mac OS, and Linux operating system platforms.

angular application

After the installation of the editor, to open our application on the code editor, execute the following command from the 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 the option: File > Open Folder option.

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

Application folder structure

Now the application contains a lot of angular CLI-generated files and folders, which is necessary for our application.

The node_modules folder will contain all the dependency necessary packages, and the e2e folder contains the E2E testing files, etc.

Also, the package.json file contains all the dependency package lists. 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 the src folder, as we write our custom code related to our application inside this directory.

Following are the files and folder structures created inside the src folder.

angular 2 app folder structure

app folder: This folder contains a 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 the editor toolbar 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

Modifying the code

Now, modify the app.componet.html content with the following content. Here, we are giving the user an option to enter his name with a 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"/>
  <h1>
    Hello {{ name }}!
  </h1>
</div>

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

import { Component } from '@angular/core';
@Component({
  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 the 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 the following content. Here, we have added an import on line 3 and registered that import inside @NgModule under the 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';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Well done.!!

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

Angular hello world app

Conclusion

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