ANGULAR 2

http://www.matera.com/br/2017/02/09/comecando-com-
angular-2/
http://kazale.com/curso-angular-2-aula-1-criando-primeira-
aplicacao/
HISTRICO E CARACTERSTICAS

Em setembro de 2016, aGoogle anunciouo novo Angular 2.x em sua verso final. Uma
completa reescrita do bom (e no to velho assim) AngularJS.
Utilizando Angular 2 osprogramadores podem concentrar seus esforos nas regras de
negcio, tirando todo proveito das vantagens do ECMAScript 6 e da orientao a objetos.
Os componentes do Angular 2 so consideravelmente mais fceis de ler, e seus recursos
de API requerem menos cdigo para serem escritos do que as diretivas da sua verso
anterior.
Por depender do Node.js Angular 2 fornece um conjunto de features para o
desenvolvimento que sua verso anterior no possua.
Por conta disso, precisamos lidar comalgumas configuraes e dependncias at ento
inexistentes, o que pode parecer um tanto quanto mais complexo, mas apenas no incio.
HISTRICO E CARACTERSTICAS

Angular 2 foi escrito em TypeScript*, um superconjunto (superset) de JavaScript feito pela

Microsoft e que implementa muitas novas funcionalidades em cima do ES2015 (ECMAScript
6).
Angular 2 foi uma reescrita necessria para adequar o framework realidade atual da web.
Com o ECMAScript 6, os Web Components e o Mobile em mente, o Angular 2 acaba sendoum
forte e mais preparado concorrente que seu antecessor.
Alm de ter criado o TypeScript, a Microsoft tambm disponibilizou para a comunidade um
editor para Angular 2 chamado Visual Studio Code. Esse editor pode ser baixado
gratuitamente no link: https://code.visualstudio.com/download
TypeScript: uma linguagem open source desenvolvida pela Microsoft que funciona como um superset do ES2015 (
um ES6 com recursos extras, como tipagem esttica e decorators).
ANGULAR 2: PRINCIPAISARQUIVOS

Angular 2 orientado a componentes, isso significa que voc vai escrever diversos
componentes minsculos que juntos constituiro uma aplicao inteira. Um Component a
combinao de um template HTML com uma classe que controla parte da tela:
app/app.component.ts aqui que definimos o nosso componente raiz (root
component), que se tornar uma rvore de componentes aninhados conforme a aplicao
for evoluindo. Listagem 1 - Criamos uma classe Java Script 6
chamada AppComponent com o export, que
informa que a classe poder ser utilizada em outros
pontos do cdigo, funciona como o modificador de
acesso public do Java. Usamos o decorator
@Component, que importamos de @angular/core,
passando dois parmetros: o selector define a tag
que utilizaremos no nosso arquivo HTML e o template
define o contedo a ser renderizado toda vez que
nosso selector for localizado.
ANGULAR 2: PRINCIPAISARQUIVOS

index.html esta a pgina em que o componente ser renderizado atravs do selector

app-root.
Listagem 2 - Arquivo HTML5 simples com uma
tag <app-root></app-root> que ser renderizada
pelo Angular 2.
ANGULAR 2: PRINCIPAISARQUIVOS

app/app.module.ts o mdulo principal responsvel por dizer ao Angular 2 como

montar a aplicao.
ANGULAR 2: PRINCIPAISARQUIVOS

app/main.ts a cola que combina o componente (app.component.ts) com a

pgina (index.html).

Listagem 4 -Arquivo de bootstrapping(inicializao) da aplicao.

ANGULAR 2: PRINCIPAISARQUIVOS

1.app.component.ts (Component);
2.index.html (Template);
3.app.module.ts (Module);
4.main.ts (Bootstrap).
CRIAO DE UM NOVO PROJETO
ANGULAR 2

Existem duas formas bem simples de criar um novo projeto Angular 2

1 - Quickstart Project
A primeira delas consiste em efetuar o download no GitHub do projeto semente (seed
project), que nada mais que um projeto Angular 2 chamado QuickStart com as
dependnciasLink:
configuradas e com os diretrios principais j criados.
https://github.com/angular/quickstart
II - Angular-CLI
Outra forma de realizar a criao de um projeto Angular 2, ainda mais simples que a
anterior e que vem sendo adotada como um padro de mercado, atravs da ferramenta
Angular-CLI.