Exploring

In the last tutorial, we successfully created a new angular app.

In this tutorial, we learn about folder structure used in the angular.

Open the myfirst-app folder in your favorite code editor have you seen app folder which is present inside the src folder.

Four files present inside the app folder which are.

- app.component.html
- app.component.css
- app.component.ts
- app.module.ts

Open app.module.ts file

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

It also called root app module in angular where we need to import and declare the modules, components so that angular has aware of the components and modules because angular first runs the app.module.ts.

Now open app.component.ts.

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

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

@Component(): It is a decorator method provided by the angular. where we need to declare the three things.

  • selector: it means the name of the template.
  • template: we need to refer the template url for that component.
  • styleUrls: we need to refer the css url for that component.

At last open index.html

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

Have you seen app-root template it means anything you write inside the app.component.html goes inside the body tag.