Core Structure of Angular 2

AngularJS has been completely updated and renamed Angular 2. Here’s you quick guide to a few of the core structural elements:

• Directives
• Components
• Services
• Modules

What are Angular 2 Directives?

From the Angular website:

At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS’s HTML compiler ($compile) to attach a specified behaviour to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.

In the following example, we say that the <input> element matches the ngModel directive

<input ng-model="foo">

The following <input> element also matches ngModel:

<input data-ng-model="foo">

And the following <person> element matches the person directive:

<person>{{name}}</person>

What are Components?

The essential way that we build application page logic via custom elements and attributes.

Component decorators allow you to mark a class as an Angular component and provide additional metadata that determines how the component should be processed, instantiated and used at runtime.

Components are the most basic building block of a UI in an Angular application. An Angular application is a tree of Angular components. Angular components are a subset of directives. Unlike directives, components always have a template and only one component can be instantiated per element in a template.

A component must belong to an NgModule in order for it to be usable by another component or application. To specify that a component is a member of an NgModule, you should list it in the declarations field of that NgModule.

In addition to the metadata configuration specified via the Component decorator, components can control their runtime behaviour by implementing various Life-Cycle hooks.

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

@Component({
  selector: 'my-component',
  template: `
    <div>Hello my name is {{name}}.
      <button (click)="sayMyName()">Say my name</button>
    </div>
   `
})
export class MyComponent {
  name: string;
  constructor() {
    this.name = 'Max'
  }
  sayMyName() {
    console.log('My name is', this.name)
  }
}

What are Services?

Services are reusable code we can inject into our Angular components. We can inject a service directly into individual components, or add to the app.module.ts file, which will give all of our components access to that service. We can create services manually or with the Angular CLI:

ng generate service myservicename

This will create a myservicename.service.ts file into which we must import the angular Injectable member:

import { Injectable } from '@angular/core';
@Injectable()
export class ExampleService {
  someMethod() {
    return 'Hey!';
  }
}

in your component file import the service, add as a provider, and inject into constructor:

import { Component } from '@angular/core';
import { ExampleService } from './example.service';


@Component({
 selector: 'my-app',
 template: '<h1>{{ title }}</h1>',
 providers: [ExampleService]
})

constructor(private _exampleService: ExampleService) {

}

What are Modules?

Modules group directives,components, services, and pipes that are related in an application.

An NgModule is a class adorned with the @NgModule decorator function. @NgModule takes a metadata object that tells Angular how to compile and run module code. It identifies the module’s own components, directives, and pipes, making some of them public so external components can use them. @NgModule may add service providers to the application dependency injectors.

The root module located in: src/app/app.module.ts:

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

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