Search⌘ K
Home
Courses
Bootstrap 4 Layouts in Depth

Inspecting the App Folder

Explore the structure of an Angular app folder to effectively modularize Bootstrap layouts. Learn how app.module.ts manages imports and declarations, how app.component.ts and its HTML integrate components, and how navbar components function. This lesson helps you understand the organization of Angular files for building efficient modular web layouts.

We'll cover the following...

Inspecting the app/ folder

The app.module.ts file

Now, let’s see what’s going on inside the app.module.ts file. 

Javascript (babel-node)
import{NgModule}from'@angular/core'; 
import{BrowserModule}from'@angular/platform-browser'; 
import{FormsModule}from'@angular/forms';
import{AppComponent}from'./app.component'; 
import{NavbarComponent}from'./navbar/navbar.component';
@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, NavbarComponent ],
  bootstrap:    [ AppComponent ]
}) 
export class AppModule{}

Explanation

  • Lines 1–3: We import some basic functionality that does Angular work. We don't need to focus on that now.

  • Lines 4–5: We import AppComponent and NavbarComponent. These class names were exported from the app.component.ts and navbar/navbar.component.ts files, respectively.

  • Lines 6–10: We specify the module’s metadata in its @NgModule decorator. It is similar to what we discussed earlier when we saw how the @Component decorator ...