Angular 8 tutorial | Angular Project Structure

This tutorial on angular 8 directory structure is in continuation of our Angular 8 Tutorial Series and if you have not read the previous part of the tutorial , it is recommended that you go through it first. In the Part-1 of Angular 8 tutorial , we have already created an app called InventionsHub and in this tutorial , we'll explore the code structure and learn about the different files & directories and their roles in an angular project.

An angular app has a well defined structure , following is the screenshot of directory structure of our InventionsHub angular app. In this tutorial we'll explore this structure in detail.

Ng serve successfull

The screenshot above shows most important files and folders in an Angular 8 app , lets look at each of these one by one.

package.json :: package.json comes from traditional nodejs projects and it defines all the npm based dependencies , dev-dependencies and npm scripts etc required for the angular project.
tsconfig.json :: if there's a tsconfig file in a directory , that means that directory is a root directory of a typescript project , moreover it is also used to define different typescript compilation related options.
.angular-cli.json :: .angular-cli.json is a file used by @angular/cli tool which is used to automate the angular workflow by automating different operations related to development and testing of angular apps. .angular-cli serves as a blueprint to the @angular/cli tool.
src :: this is perhaps one of the most important directory in our angular project and it will be the topic of discussion in the rest of the article , this is where we define the actual source code for our application along with all the assets etc. In the following sections , we'll look into this directory and will cover files and folders it contains

short note on webpack
@angular/cli uses webpack under the hood to automate the angular workflow.

src is the directory where the actual source for the app lives. Following is a screenshot of the anglar src directory from our InventionsHub app.

Ng serve successfull

now let's try to understand some of the files and folders which we'll be mostly used when we develop our project.

app :: app directory is where we define the building blocks of our angular project like modules , components , services etc.
assets :: as the name suggests , this directory contains all the static assets of our app like images etc.
environments :: environments directory hold our environment specific settings , e.g. different configuration files for development , testing and staging etc.

index.html is the landing page or the main page of our application and this is where our angular app bootstraps. As shown in the following code snippet , the app-root selector comes from the angular app as we'll see below.

							
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>InventionsHub</title>
	<base href="/">

	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
	<app-root></app-root>
</body>
</html>

main.ts is the main typescript file which is used to bootstrap the angular module. The check for environment is also performed here as shown in the following code snippet.

							
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
	enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

As we can observe in the above snippet , the class AppModule is imported from the app.module.ts file in the app directory. let's move on to explore the app direcoty now.

app directory is where we place the building blocks of our angular app including modules , components , component styles , component templates , services and so on. below is a screenshot of the app directory taken from our InventionsHub app.

Ng serve successfull

Finally , let's look at our app module and the component files.

app.module.ts : In this file , we declare our angular module , the @NgModule decorator is used to initialize different aspects of the angular app , observe that AppComponent is also declared.

										
// app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
	declarations: [
	AppComponent
	],
	imports: [
	BrowserModule
	],
	providers: [],
	bootstrap: [AppComponent]
})
export class AppModule { }

app.components.ts : this file simply defines an angular component and this is where we have defined our app-root selector also.

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

@Component({
	selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})
export class AppComponent {
	title = 'app'; // this is used in the template 
}

note that we also declared a title attribute in our app component , next let's look at the template for our app component called app.component.html

app.component.html : this is the template file for our app component and this represents the visual part of our component which is rendered in the browser.

											
<div style="text-align:center">
<h1>
	Welcome to {{title}}!! <!-- data inside curly braces comes from angular component -->
</h1>
<img width="300" src="logo.png" />
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
	<h2><a target="_blank" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
	<h2><a target="_blank" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
</li>
<li>
	<h2><a target="_blank" href="http://angularjs.blogspot.ca/">Angular blog</a></h2>
</li>
</ul>

So now we know that , all the visual components that we saw in the browser in the last part actually came from our app.component.html template. Also notice that {{ }} curly braces is used for binding component data to template. We'll talk more on this in the upcoming parts of the tutorial series.

Finally we've reached the end of this long tutorial in which we learned about angular project structure. The key takeaways are

src directory is where we will be writing most of our code
angular makes it easy to separate view from data and logic using components and templates
each component can be styled differently using its style files

Hope you enjoyed learning about the angular project structure and don't worry in case you're not clear yet. You'll become more comfortable as we dive further in the future parts and start writing some code.

Project Structure

learn about structure of an angular 8 project

Inside this article!