angular 4 - introdução
TRANSCRIPT
![Page 1: Angular 4 - Introdução](https://reader033.vdocuments.pub/reader033/viewer/2022050914/5a64b2547f8b9a2c5d8b463d/html5/thumbnails/1.jpg)
AngularIntrodução
![Page 2: Angular 4 - Introdução](https://reader033.vdocuments.pub/reader033/viewer/2022050914/5a64b2547f8b9a2c5d8b463d/html5/thumbnails/2.jpg)
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)
![Page 3: Angular 4 - Introdução](https://reader033.vdocuments.pub/reader033/viewer/2022050914/5a64b2547f8b9a2c5d8b463d/html5/thumbnails/3.jpg)
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
![Page 4: Angular 4 - Introdução](https://reader033.vdocuments.pub/reader033/viewer/2022050914/5a64b2547f8b9a2c5d8b463d/html5/thumbnails/4.jpg)
![Page 5: Angular 4 - Introdução](https://reader033.vdocuments.pub/reader033/viewer/2022050914/5a64b2547f8b9a2c5d8b463d/html5/thumbnails/5.jpg)
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
![Page 6: Angular 4 - Introdução](https://reader033.vdocuments.pub/reader033/viewer/2022050914/5a64b2547f8b9a2c5d8b463d/html5/thumbnails/6.jpg)
Blocos Principais
![Page 7: Angular 4 - Introdução](https://reader033.vdocuments.pub/reader033/viewer/2022050914/5a64b2547f8b9a2c5d8b463d/html5/thumbnails/7.jpg)
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
![Page 8: Angular 4 - Introdução](https://reader033.vdocuments.pub/reader033/viewer/2022050914/5a64b2547f8b9a2c5d8b463d/html5/thumbnails/8.jpg)
Componente
![Page 9: Angular 4 - Introdução](https://reader033.vdocuments.pub/reader033/viewer/2022050914/5a64b2547f8b9a2c5d8b463d/html5/thumbnails/9.jpg)
Contém a lógica de negócio
Serviço
![Page 10: Angular 4 - Introdução](https://reader033.vdocuments.pub/reader033/viewer/2022050914/5a64b2547f8b9a2c5d8b463d/html5/thumbnails/10.jpg)
Responsável pelo roteamento das páginas
● Angular utiliza o conceito SPA
● Responsável pela navegação (entre telas)
Rotas
![Page 11: Angular 4 - Introdução](https://reader033.vdocuments.pub/reader033/viewer/2022050914/5a64b2547f8b9a2c5d8b463d/html5/thumbnails/11.jpg)
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
![Page 12: Angular 4 - Introdução](https://reader033.vdocuments.pub/reader033/viewer/2022050914/5a64b2547f8b9a2c5d8b463d/html5/thumbnails/12.jpg)
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
![Page 13: Angular 4 - Introdução](https://reader033.vdocuments.pub/reader033/viewer/2022050914/5a64b2547f8b9a2c5d8b463d/html5/thumbnails/13.jpg)
Esta é a página em que o componente será renderizado através do selector app-root.
Principais Arquivos - index.html
![Page 14: Angular 4 - Introdução](https://reader033.vdocuments.pub/reader033/viewer/2022050914/5a64b2547f8b9a2c5d8b463d/html5/thumbnails/14.jpg)
É o módulo principal responsável por dizer ao Angular 2 como montar a aplicação.
Principais Arquivos - app/app.module.ts
![Page 15: Angular 4 - Introdução](https://reader033.vdocuments.pub/reader033/viewer/2022050914/5a64b2547f8b9a2c5d8b463d/html5/thumbnails/15.jpg)
É o vínculo que combina o componente (app.component.ts) com a página (index.html).
Principais Arquivos - app/main.ts
![Page 16: Angular 4 - Introdução](https://reader033.vdocuments.pub/reader033/viewer/2022050914/5a64b2547f8b9a2c5d8b463d/html5/thumbnails/16.jpg)
● 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
![Page 17: Angular 4 - Introdução](https://reader033.vdocuments.pub/reader033/viewer/2022050914/5a64b2547f8b9a2c5d8b463d/html5/thumbnails/17.jpg)
● 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