Angular 4 Structure

Angular 4 Structure/Architecture

Angular 4 Structure

In Angular 4 structure section we will take a look on Angular 4 main structure, i will be trying to give a simple definition for each.

Angular 4 Application

Angular 4 consists of  Components, Services, Modules, Directives, and Dependency injection let us now take a look on each.


While building a single page application, components are the main building blocks, imagine it that way, you have a website that has a header, side menu and content, you can create each of them by different components which will make it easier for you to reuse them or edit them or even different teams to work in a different components in big project.

Each component constructed by 3 separate files:

app.component.ts -- This is the TypeScript class file which you will write all your component code in.
app.component.css -- Which is responsible for styling that piece of the code output.
app.component.html -- The HTML which will be placed in your main app or website.
app.component.spec.ts -- Is the testing component file which is used for unit testing purposes, this is not an essential file.


Simply it's a piece of code which will be used more than once so it's placed in a service to be injected later on inside different components.


It's an instruction code we give it to the DOM "part of the browser", for example 'NgIf' is a directive we can use it to say if user if certain condition is true show this picture and if not show another picture.

Components are directives too since they are used in Angular for instructing the DOM what to do, they are directives with templates.

Dependency Injection

If you have a piece of code 'class' which depends on other code, for example if you are building an application for a bank and now you are creating the account section 'component', this section will depend  on the login service and it will use only part or just a method/function from it.

So in Angular 4 you can inject your dependency by providing it's name in the component that you will use the dependency in.


Since Angular 4 is a JavaScript framework we can use plain JavaScript or TypeScript, for anyone who does not know what a TypeScript is, it's an open-source language which first developed by Microsoft.


I consider modules as a organizing feature. Inside an Angular app you have components, services and directives. Module is like a container for those. You can have different modules which each going to have different components and directives.

Subscribe to
for video tutorials updates

One thought on “Angular 4 Structure

  1. Pingback: Angular 4 Routing and Navigation Tutorial

Comments are closed.