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.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>DemoApp</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>

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'demo-app';
}

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 { }

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

We now understand the default angular application and the main structure of an angular app.

PreviousAngular Files NextComponents & Data Binding

Last updated 6 years ago

hashtagUnderstand how the lines from the above files connect.

hashtagKey Concepts:

Understand how the lines from the above files connect.

Key Concepts: