O documento introduz o Angular, uma plataforma open source desenvolvida pela Microsoft que não é uma continuação do AngularJS, mas uma reescrita com foco em padrões web, utilizando TypeScript. Ele destaca a estrutura orientada a componentes e a utilização de diretivas para manipulação do DOM, além de abordar a configuração dos principais arquivos necessários para a inicialização de uma aplicação Angular. O processo de inicialização é detalhado através da importação de módulos e configuração do componente raiz.

1. Angular
Introdução

2. 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)

3. 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

5. 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

6. Blocos Principais

7. 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

8. Componente

9. Contém a lógica de negócio
Serviço

10. Responsável pelo roteamento das páginas
● Angular utiliza o conceito SPA
● Responsável pela navegação (entre telas)
Rotas

11. 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

12. 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

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

14. É o módulo principal responsável por dizer ao Angular 2 como montar a aplicação.
Principais Arquivos - app/app.module.ts

15. É o vínculo que combina o componente (app.component.ts) com a página (index.html).
Principais Arquivos - app/main.ts

16. ● 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

17. ● 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