> For the complete documentation index, see [llms.txt](https://softstack-factory.gitbook.io/mean-stack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://softstack-factory.gitbook.io/mean-stack/angular/wk3/intro-to-angular/angular-architecture/recap.md).
# Recap
Angular Building Blocks
In this section we reviewed the main parts of an angular app, Modules and Components. Each angular app must have one root module, **app.module.ts** and a root component, **app.component.ts**.
**Components** are smaller blocks of code that have their own HTML, CSS, and Typescript. In larger applications angular apps can have many modules that contain their respective components. Modules and components are just to help us organize our code and make it more reusable and composable, just like writing small functions. Our apps main html selector can be found in the ***app.component.ts*** and is used in the ***index.html***. All other components we make will be children of the ***app.component.html***.
{% tabs %}
{% tab title="index.html" %}
```markup
DemoApp
```
{% endtab %}
{% tab title="app.component.ts" %}
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'demo-app';
}
```
{% endtab %}
{% tab title="app.module.ts" %}
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
{% endtab %}
{% endtabs %}
#### **Understand how** the lines from the above files connect.
* [ ] **Line 12:** *index.html*
* [ ] **Line 4 :** *app.component.html*
* [ ] ***Line 5, 9 & 16:** app.module.ts*
## **Key Concepts:**
* Every angular app has a ***app.module.ts*** for its root module
* App.module.ts is the ***heart of our application***, all components and modules we need, must be imported here.
* Every angular app has an ***app.component.ts*** for its main component, that is placed in the ***index.html.***
* Larger angular apps can have multiple modules that contain multiple components, we will not be creating apps that large, however.
* Components are small reusable code that have their own **HTML, CSS and Typescript** files
* Each angular component has a unique **html selector** and can be used just like a normal HTML tag.
* Each angular file name has what angular building block it is in the filename.
* app.component.ts
* foo.component.ts
* header.component.ts
* app.module.ts
{% hint style="success" %}
We now understand the default angular application and the main structure of an angular app.
{% endhint %}