Organizing Your Angular Application

Organizing your closet is easy, an enterprise application not so much. Luckily for us Angular developers, the Angular CLI helps us get started with some basic structure but as you build out your application it gets tricky. In this article, I’ll give you a complex page and show you how I break it down into bite size pieces that results in a clean folder structure.

The CLI Generated Structure

Lets look at the basic structure the Angular CLI generates for us:

my-app/
src/
app/
app.component.ts
assets/
environments/

This is a good start but pretty basic. From this we get a root component called app.component.ts that we can start building on.

Underneath the app folder I create new folders that contain its own module with components related to that feature. It might look something like this:

my-app/
src/
app/
admin/
admin.module.ts
admin.component.ts
dashboard/
dashboard.module.ts
dashboard.component.ts
search/
search.module.ts
search.component.ts

As I build out features underneath those pages, I create more nested folders underneath that feature module.

my-app/
src/
app/
admin/
profile/
profile.component.ts
users/
users.component.ts

I don’t typically group those into modules though unless they become their own major isolated features.

Next, one of the first things I do after scaffolding is create a shared folder where I put:

  • Common components
  • Models
  • Http Services
  • Utils such as validators or guards

This typically looks like:

my-app/ 
src/
app/
shared/
components/
models/
services/
guards/
validators/
utils/

Thats a pretty clean way to share things that are shared between my components.

Breaking down a page

Lets look at this page, it contains a few key elements:

  • Global header that is on every page
  • Edit item page
  • Left navigation specific to this page
  • Body that is the selected left navigation of the page

This page is has a lot of components that are interconnected. Lets say the requirements for this page state:

  • When user clicks Edit Item, they should land on the description.
  • As users click different items in the left hand navigation for the item, it should replace the body with the appropriate item clicked.
  • Navigation should always be represented in the left nav.

Lets start off with our route definition:

[
{
path: 'edit',
component: EditComponent,
children: [
{ path: '', redirectTo: 'description' },
{ path: 'description', component: DescriptionComponent },
{ path: 'images', component: ImagesComponent },
{ path: 'permissions', component: PermissionsComponent }
]
}
]

In this structure, we define a top level component that will host the navigation and title and then define child components with the default match to navigate to the description page.

I like to structure my navigation to match my route definition, with that said here is how I would break it down:

my-app/
src/
app/
edit-item/
description/
description.component.ts
images/
images.component.ts
permissions/
permissions.component.ts
edit-item.component.ts
edit-item.module.ts
shared/
components/
header/
header.component.ts
header.module.ts

In this structure, each route would fall in its own folder under edit-item top level folder/module. Since header is shared between all my components that lives in the shared folder.

Pretty simple huh? To recap:

  • Top level pages live under app in their own modules so we can lazy load
  • Put shared components outside the app folder in a shared or common folder structure
  • Structure your folders around your route definitions
I’m #ngPanda

I hope you enjoyed the post, if you liked it follow me on Twitter and Githubfor more JavaScript tips/opinions/projects/articles/etc!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.