Angular 2 & TypeScript
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);
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
Licença CC BY-SA 4.0
Silvia Pinhão Lopes, 4.11.15
Sem comentários: