Getting Started Angular 2 and Typescript

Angular 2 uses components. So let me try to describe to you the component layout. Most applications today will have different components that will trigger events when we interact with them. Those events cause different data to be displayed in different places and at different times. Data flows in the opposite direction of the events. So when I click on the filter that is the event, and it will display back to us, what? Of course data. Little illustration for you below.

Blank Diagram - Page 1.png

This might create problems because the more complex applications you create the more data flow you have, and more events are happening. It can happen on a certain click it will trigger the event which causes the data to happen.

Okay so now we sort of discussed the component structure, now let's jump into JavaScript and TypeScript.

So why would you use TypeScript? So, first of all, it is better overall code readability in large codebases. It will allow you to know what the developer before you expected from a certain component. Also, you get a lot easier refactoring. So what does TypeScript really doing? Well, it is compiling your TypeScript to JavaScript and the benefit is it will show the errors about missing colons or semicolons right there on the spot, no need to go to the browser's Console. Also, it helps the editors to analyze your code. So now let's jump into a little code.

So here is a little JavaScript code:

var name = 'Tony Mamedbekov';

console.log('Hello, ' + name + '!');

//should print out > Hello Tony Mamedbekov!

So now let's see how it will look in TypeScript:

var name: string = 'Tony Mamedbekov';

console.log('Hello, ' + name '!');

Now since we got a little understanding of the difference, let's jump into the classes. One thing that I would like to mention is that in JS all the classes are public, in TypeScript you can have a private class. to prove that please see the code below.

class Person {

    constructor(name) {

        this.name = name;

    }

    greet() {

        return 'My name is ' + this.name;

    }

}

var tony = new Person('Tony');

console.log(tony.greet());

now lets see how this looks in TypeScript

class Person {

    constructor(public name: string) {

        this.name = name;

    }

    greet(): string {

        return 'My name is ' + this.name;

    }

}

var tony = new Person('Tony');

console.log(tony.greet());

So you can see the difference now. We can have encapsulation if we would like to do so.

We usually use interfaces to define functionality. Okay what about if we want multiple entities to be able to greet in different ways? So a human might say their name, and the robot will say their ID number, so below you will see two codes, first one will be just a TypeScript and the second one will be TypeScript with Interfaces.

TypeScript

class Person {

    constructor(public name: string) {

        this.name = name;

    }

    greet(): string {

        return 'My name is ' + this.name;

    }

}

var tony = new Person('Tony');

console.log(tony.greet());

TypeScript with Interfaces

interface Greets {

   greet(): string;

}

class Person implements Greets {

    constructor(public name:string) {

        this.name = name;

    }

    greet():string {

        return 'My name is ' + this.name;

    }

}

var tony = new Person('Tony');

console.log(tony.greet());

interface Greets {

   greet(): string;

}

class Robot implements Greets {

    constructor(public id:string) {

        this.id = id;

    }

    greet():string {

        return this.id + ' REPORTING IN';

    }

}

var robbie = new Robot('XL-567');

console.log(robbie.greet());

Next, let's move on to the Modules. Modules are declarative; the relationships between modules are specified in terms of imports and exports at the file level. Module import one another using a module loader. Any file a top-level import or export is considered a module. Let's see an example below.

person.ts

export class Person { // export will allow access from the outside

    constructor(name) {

        this.name = name;

    }

    greet() {

        return 'My name is ' + this.name;

    }

}

app.ts

import {Person} from './person'; // without this code it will cause a problem

var tony = new Person('Tony');

console.log(tony.greet());

Now we now finally reached Angular 2. So how do we build a component?

We have to start with a class. So we add the add, then we will import components from the angular2 project.

import {Component} from 'angular2/angular2';

@Component({

   selector: 'person'

})

export class Person {}

So the component gave us a selector so we can use it, and the class gave us the functionality. So next we will import View. So then we will pass in the object that has a template. Also, we will style it.

import {Component, View} from 'angular2/angular2';

@Component({

   selector: 'person'

})

@View({

   template: `

      Black

      Brown

   `,

   styles: `

      hair { height: 150px; }

      eyes { border-radius: 50%; }

   `

})

export class Person {}

So what do we gain from doing this?  We got external dependencies, we have very clear external API’s. We have an internal structure that is composed of other components. And we have the ability to style directly from children. We also have a place to define internal functionality. So the and are really not components. In order for us to have that in place. We will need to do the following:

import {Component, View} from 'angular2/angular2';

import {HairComponent} from '../hair/hair.component';

import {EyesComponent} from '../eyes/eyes.component';

@Component({

   selector: 'person',

   directives: [

     HairComponent,

     EyesComponent

   ]

})

@View({

   template: `

   `,

   styles: `

      hair { height: 150px; }

      eyes { border-radius: 50%; }

   `

})

export class Person {}