# App Module

## Overview

Angular applications contain modules. Modules are used to organize areas of an Angular application into cohesive areas of functionality.

Imagine that a large Angular 2 application is like a large company. Modules are like the different departments in this company. A huge company has many, many different departments while a small one may only have one or two. Departments are physically organized into their own offices (or even their own buildings). And while each works for the same company, they have a unique, cohesive purpose and require their own special equipment to work toward that purpose.

A module may contain multiple components (and other stuff we'll learn about later like directives, pipes, and services). These are similar to the equipment and employees that belong to a specific department of a company. A component, on the other hand, can only belong to one module, except for a few very advanced special circumstances. This is similar to how an employee generally belongs to only one company department outside of a few special circumstances.

Every Angular application requires at least one module called a\
root module (this is like our "company headquarters"). This file will also be responsible for loading other parts of our app and any Angular-specific dependencies. Essentially, the root module instructs Angular how to assemble our application.  If you look in your src/app folder within the test-app you will find the root module of our test-app.  By default the file is always called app.module.ts

&#x20;Our application will not yet become large enough to require multiple modules. For now, we'll only use a single, default root module our app.module.ts .

### **Import Statements**

Our **app.module.ts** is where **EVERY** component, module or any other code libraries needed for our app must be imported. Inside app.module.ts file in **src/app** folder you will find the following imports statements:

{% code title="app.module.ts" %}
```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
```
{% endcode %}

**Each of these imports a portion of the Angular framework's core library.**

* **NgModule** imports general Module code from the Angular framework's core.
* **BrowserModule** imports code necessary to run our app in the browser, including built-in directives that allow us to add things like conditionals and loops to our components. We'll explore these soon.
* **AppComponent** actually refers to the root component we created! We call it AppComponent because that's the name of the class declaration exported at the bottom of its file.

## **Other Resources**

* [**Angular Modules Cheat Sheet**](https://www.tutorialspoint.com/angular2/angular2_modules.htm)
* [**Angular 2 Architecture Cheat Sheet**](https://www.tutorialspoint.com/angular2/angular2_architecture.htm)
* [**File Pathing Examples**](https://www.w3schools.com/html/html_filepaths.asp)
* [**Import Export**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)
