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