Building Blocks of Angular Application

Building Block Of Angular Application By Sagar Jaybhay

Component

It is heart of angular app. In our real world application we 10 to 100 components. Component can encapsulate data, Html markup and View.

Angular WebApplication Layout by sagar Jaybhay

The use of component is that we can reuse this in multiple places. In angular is component based architecture and it is for easy to manage large application. Every application have app-component or root-component. There are 3 step process to use component.

  1. Create component
  2. Register your component in module
  3. Add selector tag in respective html

To create component follow the below process.

  1. Create class and export it.
  2. Import Component from angular/core
  3. Then mark class with component decorator.
import { Component} from '@angular/core'

@Component({
    selector:'course'    
})
export class CourseComponent
{

}

In this selector course we have <course></course> tag present in index html or respective html file.Custom UI component selection way.

Selector By Class Name

@Component({
    selector:'.css_class_name'    
})

Selector By ID

@Component({
    selector:'#divID'    
})

Template in component

It is for adding the template or html markup to your ui component or htmlpage.

@Component({
    selector:'#divID',
    template:'<h2>Courses</h2>'
})

Registering Component

To register the component in module you need to add in root module which is generally app.module.ts and in that declarations array you need to add this.

@NgModule({
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CourseComponent } from './courses.component';

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

This is default module and component when we generate our application. To add custom component you need to include this declarations array.

Registration of component in angular application
Full Details Of Component in angular application

Module

  1. Every angular application have 1 or more module and it is a container of 1 or more related component. Every application have at least 1 module is 1 app – module. If your application is smaller then 1 module is ok but as your application grows you need to create different module with each one have separate functionality.

Service

when you want some code which is reuse again and again then write that code in service and where you use that service you need to inject that service reference in constructor.

import { Component} from '@angular/core'
import { coursesService } from './courses.service';

@Component({
    selector:'course',
    template:`<h2>Courses By {{getTitle()}}</h2>
            <ul>
            <li *ngFor="let cc of courses">
            {{cc}}
            </li>
            </ul>    
    `
})
export class CourseComponent
{
pageTitle="Sagar Jaybhay";
courses;
constructor(service:coursesService){
    this.courses=service.getCourse();
    console.log("i am in constructor"+this.courses)
}
getTitle(){
    return this.pageTitle;
}
}

Then this service need to register in module so in module file you need to add this service inside the providers array.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CourseComponent } from './courses.component';
import { coursesService } from './courses.service';

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

Below is the service code

export class coursesService{

    getCourse()
    {
            return ['C#','Angular','Java'];
    }
}

Injectable

when our service have some dependencies in their constructor we need to add this injectable import statement in service. It follows a singleton pattern. Means single instance is created through the application. Also before the component called service should initialized and angular itself take cares of it.

Service in angular application

You may also like...

Leave a Reply

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