Fala galera,
Venho aqui falar sobre o Angular 2.0 que está em sua versão beta. 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 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>
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