Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Angular
Introdução
O que é?
http://angular.io
● Parceria Google + Microsoft
● Open Source (código no github)
● Não é continuação da versão 1
...
TypeScript
● Desenvolvido pela Microsoft
● Muito parecido com o C# (tipagem, orientação a
objetos, recursos, etc)
● Utiliz...
Se você pretende desenvolver aplicativos híbridos, está mais um excelente motivo para usar
Angular, a equipe do Ionic está...
Blocos Principais
Encapsula:
● Template (código html)
● Metadata (são os metadados, permitem ler e processar as
classes do angular)
● Dado a...
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 modif...
Aqui que definimos o nosso componente raiz (root component), que se tornará uma árvore
de componentes aninhados conforme a...
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” funcion...
● http://www.matera.com/br/2017/02/09/comecando-com-angular-2/
● http://loiane.training/curso/angular-2/
● https://code4co...
Angular 4 - Introdução
Upcoming SlideShare
Loading in …5
×

Angular 4 - Introdução

1,350 views

Published on

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)

Published in: Software
  • Login to see the comments

Angular 4 - Introdução

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

×