Learn Angular 7 In 12 Days (Day 2)

217
SHARES
986
VIEWS

In the previous tutorial in learn angular 7 in 12 days series, we talked about the basic definition of Angular. Today on day 2 we will discuss the architecture of angular 7 components . So without further ado let’s start.!

Angular 7 Architecture:

Each Angular app consists of Components. Each component is a logical boundary of functionality for the app. You need to have layered services, which are used to share the functionality across the angular components.

learn angular 7 image 01

A component consists of:

Class: Angular class consist of properties and methods.

Template: Template is used to define the HTML view that is displayed in the application.

Metadata:  Metadata is used to decorate the class and extend the functionality of the class.

learn angular 7 in 12 days day 02 image 02

What is Component?

Major part of the Angular App development  is done in the components. Components are basically classes that interact with the .html file of the component, which gets displayed on the browser. We have seen the file structure in one of our previous chapters. The file structure has the app component and it consists of the following files

learn angular 7 image 03

These files were created by default when you created new project using the angular-cli.

if you open up the app.module.ts file, it has some libraries which are imported and also a declarative which is assigned the appcomponent as follows

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

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

The declarations include the AppComponent variable, which we have already imported. This becomes the parent component.

Create a new Component

Angular-cli has a command to create your own component. Let us now run the command to create the component.

$ ng g component my-component

When you run the above command in the terminal window, you’ll receive the following output:

CREATE src/app/my-component/my-component.component.scss (0 bytes)
CREATE src/app/my-component/my-component.component.html (31 bytes)
CREATE src/app/my-component/my-component.component.spec.ts (664 bytes)
CREATE src/app/my-component/my-component.component.ts (293 bytes)
UPDATE src/app/app.module.ts (879 bytes)

Now, if you go and check the file structure, you’ll get the my-component new folder created under the src/app folder.

learn angular 7 in 12 days  image 05

Now, open your app.module.ts file in src/app, your component my-component is already imported in app.module.ts, this file look like

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

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { MyComponentComponent } from './my-component/my-component.component';

@NgModule({
  declarations: [
   AppComponent,
   MyComponentComponent
  ],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Now in the next tutorial we’ll learn angular data and event binding. So stay tuned. Happy Coding.!

Best Resources to Learn Angular, Firebase and ionic 4

Leave a Reply

Your email address will not be published. Required fields are marked *

Trending