AngularIntrodução

O que é?

http://angular.io

● Parceria Google + Microsoft

● Open Source (código no github)

● Não é continuação da versão 1

● Foi reescrito e por que?

● Uso de padrões web e Web Components (iniciado a partir do 1.5)

● AngularJS vs Angular

● Orientado a componente (componente dentro de componente)

TypeScript

● Desenvolvido pela Microsoft

● Muito parecido com o C# (tipagem, orientação a

objetos, recursos, etc)

● Utiliza Decorators (Anotações)

● Ele tem um transpiler que transforma o código TS

em JS

● Prometem ser fiel ao futuro do JS

● É TUDO OPCIONAL

Se você pretende desenvolver aplicativos híbridos, está mais um excelente motivo para usar

Angular, a equipe do Ionic está finalizando o desenvolvimento da sua segunda versão, que é

totalmente escrita em Angular.

Mobile

Blocos Principais

Encapsula:

● Template (código html)

● Metadata (são os metadados, permitem ler e processar as

classes do angular)

● Dado a ser mostrado na tela (Data Binding, associação dos

dados do componente com o html)

● Comportamento da view (junção do template, do controller e

do escopo do AngularJS)

Componente

Componente

Contém a lógica de negócio

Serviço

Responsável pelo roteamento das páginas

● Angular utiliza o conceito SPA

● Responsável pela navegação (entre telas)

Rotas

Responsável por modificar elementos do DOM e/ou seu

comportamento

● Componentes também são diretivas

● Diretivas que modificam o DOM (ao clicar em um input ele

aumentar de tamanho)

Diretivas

Aqui que definimos o nosso componente raiz (root component), que se tornará uma árvore

de componentes aninhados conforme a aplicação for evoluindo.

Principais Arquivos - app/app.component.ts

Esta é a página em que o componente será renderizado através do selector app-root.

Principais Arquivos - index.html

É o módulo principal responsável por dizer ao Angular 2 como montar a aplicação.

Principais Arquivos - app/app.module.ts

É o vínculo que combina o componente (app.component.ts) com a página (index.html).

Principais Arquivos - app/main.ts

● Começa através do arquivo “main.ts”, que é o ponto de entrada da aplicação.

● O AppModule importado em “main.ts” funciona como o módulo root.

● O módulo root é configurado para utilizar o arquivo ”app.component.ts” como o

componente principal a ser inicializado e este será chamado para renderizar toda tag

“<app-root>” encontrada no template HTML.

● Ou seja, uma vez que exista uma tag <app-root> no arquivo “index.html”, quando

solicitamos ao browser que abra index.html, através da transpilação do arquivo

app/main.ts, a função “platformBrowserDynamic().bootstrapModule(AppModule)” se

encarrega de realizar o start do processo de inicialização da aplicação.

Processo de Inicialização

● http://www.matera.com/br/2017/02/09/comecando-com-angular-2/

● http://loiane.training/curso/angular-2/

● https://code4coders.wordpress.com/2017/03/27/angular-4-0-e-suas-novas-features-e-

agora-jose

Referências