Engenho & Engenhocas: TypeScript

AngularJS 2 vs ReactJS

Por Silvia Pinhão Lopes

Para ler

0 Comentários

Ler mais Comentar

Angular 2 & TypeScript

Por Silvia Pinhão Lopes

Para ler

0 Comentários

Pré-requisitos

Instalação AngularJS 2
Instalação TypeScript

Código AngularJS 2

Componentes

As componentes são os blocos principais para construção de uma app em AngularJs 2:

AngularJS 1	AngularJS 2
App.js	Componente de topo
Directiva	Componente
Controller e view	Componente
Directiva com controller	Componente

Implementação de uma componente

app.ts


import {bootstrap, Component, FORM_DIRECTIVES} from 'angular2/angular2';

class Hero {
  id: number;
  name: string;
}

@Component({
    selector: 'my-app',
    template: '<div>
 <label>name: </label>
 <input [(ng-model)]="hero.name" placeholder="name">
        </div>',
    directives: [FORM_DIRECTIVES]
})

class LittleComponent {
    public title = 'Tour of Heroes';
    public hero: Hero = {
        id: 1,
        name: 'Windstorm'
    };
}

bootstrap(LittleComponent);

Para definir uma componente AngularJS 2 é necessário criar uma classe (TypeScript) e decorá-la (TypeScript) com a anotação @Component. A classe contém a lógica enquanto a anotação define a componente AngularJS 2.

Selector

Indica como a componente vai ser activada no HTML

<my-app></my-app>

Template

O HTML que vai ser inserido na componente. Pode ser URL;

Directives

Array das componentes a usar. FORM_DIRECTIVES componentes nativas.

[(ng-model)]

Two-way data binding. Binding hero.name - input;

Typed language

Instanciação da classe Hero.

Dependency Injection

import {bootstrap, Component, FORM_DIRECTIVES} from 'angular2/angular2';

Com TypeScript há autocomplete enquanto se escreve dentro do 'import { '.

Templating

Bootstrap

bootstrap(LittleComponent);

Código HTML

index.html


<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <script src="../node_modules/systemjs/dist/system.src.js"></script>
    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
    <script>
      System.config({
        packages: {'app': {defaultExtension: 'js'}}
      });
      System.import('app/app');
    </script>
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

Outro exemplo disponível aqui.

fonte: Creating your first Angular 2 app

Ler mais Comentar