In our last article, we got introduced to Angular as a framework, and did a few comparison between Angular and AngularJS. In case you missed it or you might want to read it again, you can find it here

Today's article I'll be sharing about the building blocks of Angular, ie; it's key components

Ooh, and PS: For speedy understanding of Angular, i'ts good to know the following:

JavaScript Fundamentals

Asynchronous Programming

Array methods

Fetch API/HTTP requests

Node Package Manager (NPM)

Let's get right into today's topic :)

So, what really makes up Angular? You may ask...

The architecture of an Angular application relies on certain fundamental concepts. The basic building blocks of Angular are components that are organized into NgModules. NgModules collect related code into functional sets.

Angular is made up of the following;

Components

Modules

Templates

Services and Dependency Injection

Metadata

Components

These are the basic building blocks of an Angular application to control HTML views. Every Angular application has at least one component, the root component, which connects a component hierarchy with the document object model (DOM).

Components are re-usable and can also be embedded into the template as an XML.Example of a component is:

@component({
     selector: 'app-test-list' 
     templateURL: './test-list.component.html' 
     providers: [testservice] // The provider which will be used in the particular component
})

Modules

A module is set of angular basic building blocks like component, directives, services etc. Every Angular application has a root module, conventionally named AppModule, which provides the bootstrap mechanism that launches the application. An application typically contains many functional modules.

Let's take a look at the following example of app.module.ts root module declared with @ NgModule decorator;

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

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

Templates

A template combines HTML with Angular markup that can modify HTML elements before they are displayed. Templates represent the views of an Angular application.

Before a view is displayed, Angular evaluates the directives and resolves the binding syntax in the template to modify the HTML elements and the DOM, according to your program data and logic. Angular supports two-way data binding, meaning that changes in the DOM, such as user choices, are also reflected in your program data.

You can define it inline using the template property, or you can define the template in a separate HTML file and link to it in the component metadata using the @ Component decorator's templateUrl property.

Example of a template;

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

@Component ({
   selector: 'my-app',
   template: '
      <div>
         <h1>{{title}}</h1>
         <div>Learn Angular</div>
      </div>
   '
})

export class AppComponent {
   title: string = 'Hello World';
}

Services and Dependency Injection

A service is used when a common functionality needs to be provided to various modules. Services allow for greater separation of concerns for your application and better modularity by allowing you to extract common functionality out of components.

A service class definition is immediately preceded by the @ Injectable() decorator. The decorator provides the metadata that allows other providers to be injected as dependencies into your class.

Dependency Injection (DI) , lets you keep your component classes lean and efficient. They don't fetch data from the server, validate user input, or log directly to the console; they delegate such tasks to services.

The following below is a service which can be used across components;

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable({ // The Injectable decorator is required for dependency injection to work
  // providedIn option registers the service with a specific NgModule
  providedIn: 'root',  // This declares the service with the root app (AppModule)
})
export class RepoService{
  constructor(private http: Http){
  }

  fetchAll(){
    return this.http.get('https://api.github.com/repositories');
  }
}

Metadata

Metadata is used to decorate a class so that it can configure the expected behavior of the class. The metadata is represented by decorators

Decorator- A function that provides information about the class attached to it.

Examples of metadata represented by decorators are;

i)Class decorators- eg @ component & @ NgModule

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

@Component({
  selector: 'my-component',
  template: '<div>Class decorator</div>',
})
export class MyComponent {
  constructor() {
    console.log('Hey I am a component!');
  }
}

@NgModule({
  imports: [],
  declarations: [],
})
export class MyModule {
  constructor() {
    console.log('Hey I am a module!');
  }
}

ii)property decorators -used for properties inside classes eg, @ input and @ output

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

@Component({
    selector: 'my-component',
    template: '<div>Property decorator</div>'
})

export class MyComponent {
    @Input()
    title: string;
}

iii)Method operators -used for methods inside classes eg @ HostListener

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

@Component({
    selector: 'my-component',
    template: '<div>Method decorator</div>'
})
export class MyComponent {
    @HostListener('click', ['$event'])
    onHostClick(event: Event) {
        // clicked, `event` available
    }
}

iv) Parameter decorator- used for parameters inside class constructors eg @ inject

import { Component, Inject } from '@angular/core';
import { MyService } from './my-service';

@Component({
    selector: 'my-component',
    template: '<div>Parameter decorator</div>'
})
export class MyComponent {
    constructor(@Inject(MyService) myService) {
        console.log(myService); // MyService
    }
}

Now that we're now familiar with the building blocks of Angular, Let's get some practice :)

Hope you enjoyed it and learnt something,

See you in the next article :)

Sandra Kuria