Venho aqui falar sobre o Angular 2.0. O Angular 2.0 sofreu uma grande mudança, pode ser dizer que é um AngularJS totalmente modificado, desde a sua forma de sintaxe, como o uso propriamente dito.

Principais mudanças:

  • Não temos mais o $scope
  • Não tem mais o conceito de Controller
  • Tudo é Componentes e Views
  • Totalmente preparado para ES6
  • Feito em TypeScript

Então preparei um pequeno exemplo de Todo App para ver o funcionamento dele.

Primeiro vamos criar nosso HTML de exemplo

 

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>
    
    <script src="https://code.angularjs.org/2.0.0-beta.2/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.2/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.2/angular2.dev.js"></script>    
      <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'app': {defaultExtension: 'ts'}} 
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>

  </head>
  <body>
    <display>Loading...</display>
  </body>

</html></pre>

Notem que estou usando TypeScript para carregar as dependências e fazer a compilação dos arquivos. Outro ponto importante é a tag <display> no qual iremos programar o comportamento dela.

Agora que nosso HTML está pronto vamos criar o componente

import {Component} from 'angular2/core';

@Component({
  selector: 'display',
  template: `<h1>{{title}}</h1>
    <ul>
        <li *ngFor='#task of tasks'>
            {{ task }}
        </li>
    </ul>
    <input #task type='text' placeholder='nova tarefa' />
    <button (click)='addTask(task.value)'>Add</button>            
    `
})
export class TaskComponent {
    title = 'Minhas Tasks'
    tasks = ['Comprar Comida', 'Levar o Cachorro para passear']
    
    addTask(newTask:string) {
        this.tasks.push(newTask);
    }
}

Notem que não estamos mais usando a definição de controller, tudo agora é componente e tratamos os eventos diretamente na classe Task

Pronto com o nosso Component Angular2 terminado basta nós fazermos o “bootstrap” ou seja inicializar nosso componente para que funcione tudo.

import {bootstrap}    from 'angular2/platform/browser'
import {TaskComponent} from './app.task'

bootstrap(TaskComponent);

Notem que quando clico no botão de adicionar, ele automaticamente insere um novo valor na lista.

Assim nós criamos nossa primeira aplicação Angular 2.0, muito legal né?

Para conhecer mais sobre o Angular 2.0 clique aqui

Não deixe de comentar!

Abs e até a próxima

Rafael Cruz

É desenvolvedor .NET há mais de 12 anos, certificado Microsoft desde de 2006, instrutor oficial Microsoft há 5 anos, Pós Graduado em Engenharia de Software pela UFRJ, suas certificações são Microsoft Certified Trainer, Microsoft Certified Solution Developer (Web, Application Lifecycle Management), Microsoft Certified Professional Developer, Microsoft Certified Tecnology Specialist.
Atualmente trabalha como arquiteto de sistema, escreve artigos no .NET Coders e no seu blog rafaelcruz.azurewebsites.net para compartilhar experiências na área de desenvolvimento Web, Aplicativos Móveis e Cloud Solutions.

Twitter LinkedIn 

Comentários

comentarios