O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
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
Próximos SlideShares
Carregando em…5
×

Angular 4 - Introdução

1.351 visualizações

Publicada em

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)

Publicada em: Software
  • Entre para ver os comentários

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

×