Angular 2 Basics

You can not just use Angular for web apps, but also iOS and Java using Native kit.

Why Angular?

Angular JS refers to version 1, whereas Angular refers to version 2.

The Parts and Pieces of an Angular Application

How does it work?

You can use Typescript, Javascript or Dart with Angular2.

Typescript

Angular is the first large framework to adopt Typescript. The idea is to keep you in the editor.

We can use Typescript to help enforce static typing.

Intellisense is also used as helping autocompletion intelligence when coding and certain styles of coding allow for this.

Eg. code:

// example 1 

class Greeter{
    greet(name: string) {
        console.log(name);
    }
}

const greeter = new Greeter();

greeter.greet('Jim');

// example 2

function rollCall(students: any[], max?: number) {
    max = max || students.length;
    const attendance = students.slice(undefined, max);
    console.log(attendence);
}
copy

The First Angular Application

As you build out your index.html file you set a <app-root> component as the target for Angular2 entry point.

Within src/app create app.module.ts as the root module.

/* in app.modules.ts */

// note the @ is to do with npm supporting namespace modules
// this allows code to be shared between packages 
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

// create the AppModule 
// export for use in main.ts 
// add the decorator to post-process it
// the decorator is used by angular to compose the app 
// in the most efficient way possible
@NgModule({
    // using BrowserModule lets Angular know this is 
    // for web use
    imports: [BrowserModule],
    // for the target component 
    // before using it the first time - declare we are using it
    // if not there will be a definition error
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {
    
}

/* in main.ts */
import './styles/main.css';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);
copy

In order for this to work, we need to create a component!

/* in app.component.ts */

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

@Component({
    // we should target app-root in the component 
    // best practise to prefix components with something related to app eg app or another namespace convention
    selector: 'app-root',
    template: `<h2>Hello World!</h2>`,
    style: [
        `
        h2 {
            color: blue;
        }
        `
    ]
})
export class AppComponent {
    
}
copy

The Anatomy of the Component

In Angular, a Component = Template + Class + Decorator.

This will cover each section.

The @Component decorator

General all files (including the styling) will be placed in the same place as the component.

// example component file 

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

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

    constructor() {
        this.example = ["Hi", "ho"];
    }
}
copy

Data Binding

1

<h1>{{ exp }}</h1> view will update to changes to the expression. <input [target]="expression" /> is another form of binding

2 <button (event)="expression"></button> for event listening

3 <input [(target)]="expression" /> - takes input and sends output

Given the example of 2 above...

// for the event handler 

...
export class AppComponent {
    emojis = ['', '', ''];  // array of emojis
    activeEmoji: string;

    changeEmoji() {
        this.activeEmoji = this.emoji[Math.floor(Math.random() * this.emoji.length)]
    }
}
copy

Nesting Components

Two new components: A list and a component with that list. Entry and Entry-list.

entry-list

After creation of this component, it should be imported to app.module.ts and added to the declarations property.

Because there will probably be many components, we will create a barrel to work as the middle man.

// index.ts

export * from './entry-list/entry-list.component'
copy

Now this entire folder can just be imported to the app.module.ts file.

// entry-list ts 
import { Components } from '@angular/core';

@Component({
    selector: 'app-entry-list',
    templateUrl: 'entry-list.component.html',
    styleUrls: ['entry-list.component.css'] 
})

export class EntryListComponent {
    
}

// in app.component.html 
<app-entry-list></app-entry-list>
copy

entry

// entry-list ts 
import { Components } from '@angular/core';

@Component({
    selector: 'app-entry',
    templateUrl: 'entry.component.html',
    styleUrls: ['entry.component.css']  
})

export class EntryComponent {
    
}
copy

What we can now do in the entry-list.component.html, we can now add in the children.

Structural Directives

Directives let you...

There are things such as structural directives, attribute directives.

// example for a click action
// here we can add styles for liked give toggled class (attribute)
<div class="actions">
    <button type="button" (event)="isLiked = !isLiked" [ngClass]="{liked: isLiked}">Show if true</button>
    <button type="button" (event)="showComments = !showComments">Comments ({{comments.length}})</button>
</div>

// *ngFor to iterate (structural)
// using Angulars template engine
<div class="comments">
    <div class="comment" *ngFor="let comment of comments">
        <p>{{comment.comment}}<strong>{{comment.name}}</strong></p>
    </div>
</div>
copy