How architecture of Angular 4 worked

Posted by

How architecture of Angular 4 Worked

Welcome back to lesson 4, Here in this lesson we will discuss the architecture of Angular 4. In Angular 4, by default we contain some files like app.component.css, app.component.html, app.component.ts and app.module.ts. So here in this lesson, we will briefly discuss these terminologies in detail.

First of all, see the below image to understand the directory structure of app folder. let’s see the below image.

Files in App folder
Files in App folder

In the above image, you can see that we have the following files in the app folder:

·         app.component.css

·         app.component.html

·         app.component.spec.ts

·         app.component.ts

·         app.module.ts

Below we are going to discuss the above terminologies in detail. So let’s focus.

Watch the video tutorials to betterly understand the concept of Angular 4. In this lesson we will briefly discuss the architecture of Angular 4


app.component.css is a Case-cadding Stylesheet file, where all your design will be defined in terms of classes and id's. You can modify the CSS file according to your requirements. Right now there are few attribute like color, background-color, and font-size is defined in the class .divinfo. You can take multiple classes and as many attributes as you need. let’s see the example:




  Color: red;

  background-color: yellow;

  font-size: 50px;



The HTML code will be written in app.component.html file. Let’s see the example below to better understand the concept of app.component.html:

<div class=”divinfo”>

  <div style=”text-align:center”>


      Welcome to {{title}}!


    <img src=”Angular-image.jpg” width=”200px” height=”200px”>



      Some links related to Angular 4


    <a href=”” > 
    Angular 4 Tutorials 

    <a href=””> 
    Angular 4 Tutorials- from Podina Tutorials



app.component.spec.ts are automatically generated files which contain unit tests for source component.


app.component.ts is like a controller in Angular 4. The class for the component is already defined. You can do the HTML processing over here in .ts file. The processing will include activities, such as interaction with other components, routing, connection to database etc.

Let’s see the example below:

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

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'] })

export class AppComponent {
  title = Title-of-the-app;


app.module.ts is a mechanism, which group components, directive, pipes, and serives that are related to each other, in such a way that combined with another module to create a web application. Let’s see the example below:

import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NgModule } from '@angular/core';

  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent]
export class AppModule { }


In this lesson, we briefly discuss How it all worked. We discuss multiple files in detail, that what is the functionality and services of each file. Previously we discuss, How to run the first application in Angular 4. In this lesson we discuss, How Angular 4 worked. We discuss the architecture of Angular 4. In next lesson we will be talking about, What is a component in Angular 4 and How to create Custom Angular 4 component. So stay tuned and we will meet in next lesson of Angular 4.


Leave a Reply

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