Angular 2, TypeScript e Além
Transferir como PPTX, PDF5 gostaram2,838 visualizações
O documento aborda o desenvolvimento de aplicações com Angular 2 e TypeScript, incluindo a criação e configuração de componentes, uso do Angular CLI e implementação de Progressive Web Apps. Também menciona ferramentas e bibliotecas necessárias, como SystemJS e Angular Material. Há demonstrações de criação de aplicações e testes, além de links para cursos e eventos relacionados.
Angular 2, TypeScript e Além
- 2. Angular 2, TypeScript e além
- 3. André Baltieri • Microsoft MVP desde 2013 • Visual Studio & Dev Technologies • Web Developer desde 2005 • http://andrebaltieri.net/ • [email protected] • ASP.NET Cast
- 4. Agenda • Angular 2 e TypeScript • Angular CLI • Angular Material • Progressive Web Apps • Angular Mobile Toolkit • NativeScript
- 5. Angular2 e TypeScript • Dart, JavaScript ou TypeScript • Ótimo suporte no VS Code • Apoio da Microsoft
- 6. Angular2 e TypeScript 1. Criar a pasta, iniciar app e configuração 2. Criar o RootComponent 3. Apontar o RootComponent no main.ts 4. Criar o HTML e chamar os scripts 5. Rodar a aplicação
- 7. Iniciando 1. Criar a pasta, iniciar app e configuração 1. package.json 2. tsconfig.json 3. typings.json 4. systemjs.config.json
- 8. Demonstração Inciando a aplicação e configurando
- 9. RootComponent • AppComponent é o item principal da aplicação • Precisamos ter pelo menos um RootComponent • Convencionalmente chamado de AppComponent • Componentes são a base do Angular 2 • Controlam um pedaço da tela, uma View, através de seu template
- 10. RootComponent • Contém um ou mais Imports • Referenciando o necessário para o componente ser executado • Possui um decorator @Component que define itens como template e afins • Controla aparência e comportamento da View
- 11. Import • O Angular é modular • Cada arquivo dedicado a um único propósito • Quando precisamos de algo, importamos
- 12. Component Decorator • Component é um decorador • Sempre contém o prefixo @ e vem antes do nome • Permite a associação do metadata com a classe • Metadata diz ao Angular como criar e utilizar o componente • É como uma ”especificação” do componente
- 13. Component Decorator • Selector – Especifica uma tag HTML onde o componente será renderizado • Template – Especifica o conteúdo (HTML) do componente
- 14. Component Class • Define o comportamento do componente como manipulação de DOM
- 16. main.ts • Separamos o arquivo de inicialização por motivos de organização • Bootstrap da aplicação é algo diferente de uma View • Testes ficam fáceis e isolados • Não custa nada
- 17. Bootstrap • Específico por plataforma (Lindo) • Neste caso, importado de @angular/platform-browser-dynamic • Não faz parte do Core pois tem várias maneiras de aplicá-lo • Possível carregar componentes em ambientes diferentes como Cordova ou Native Script • Podemos carregar a aplicação inicialmente no servidor por exemplo, para aumentar performance e SEO • Isto requer diferentes implementações do Bootstrap
- 19. Juntando tudo... • O Index.html é o ponto de partida da aplicação, onde temos: • As bibliotecas JavaScript • Configuração do SystemJs e script onde vamos importar e executar a aplicação • A chamada do componente no <body>, usando o seletor que definimos
- 20. Bibliotecas • Core-js (ES2015/ES6) • Pacotes para contextos globais e funções do ES • Polyfills do Angular2 e Zone.js • Metadata e afins • SystemJs • Modularização e carregamento
- 21. SystemJs • Configurado através do systemjs.config.js • Cria o map • Registra os pacotes • Modularização também funciona com WebPack por exemplo
- 23. Angular CLI • Cliente via comando para aplicações com Angular 2 • Ainda está em construção (Demos podem falhar)
- 24. Instalação • npm install -g angular-cli
- 25. Uso • ng new PROJECT_NAME • cd PROJECT_NAME • ng serve • ng serve --port 4201 --live-reload-port 49153
- 26. Demonstração Criando uma aplicação com Angular CLI
- 27. Scaffolding • ng generate component my-new-component • Component • ng g component my-new-component • Directive • ng g directive my-new-directive • Pipe • ng g pipe my-new-pipe • Service • ng g service my-new-service • Route • ng generate route hero
- 29. Build • ng build
- 31. Ambientes • Na hora do build, o src/client/app/environment.ts será substituido • config/environment.dev.ts • config/environment.prod.ts • ng build -prod
- 32. Testes • ng test • ng e2e
- 34. Deploy • Deploy instantâneo via GH Pages • ng github-pages:deploy • O que acontece • Cria um repositório no GitHub • Compila a aplicação em modo produção no HEAD atual • Cria uma branch local pro gh-pages • Move a aplicação pro gh-pages e cria um commit • Edita a tag base do index.html pra suportar github pages • Envia a branch para o github • Volta ao HEAD original • Necessário um Token • https://github.com/settings/tokens
- 36. Angular Material 2 • Modular • Instalável através do NPM • npm install --save @angular2-material/{core,button,card}
- 37. Registrando os Componentes • Precisamos compilar o @angular2-material na pasta dist/vendor. • Esta configuração é feita no angular-cli-build.js • Mapear no SystemJs • Registrar todos os pacotes
- 38. Demonstração Adicionando componentes do Material Design
- 39. Importando os componentes • Importar utilizando import • Adicionar a diretiva
- 41. Progressive Web Apps • Carregamento instantâneo • Adicionar a tela inicial • Push Notifications • Rápidas • Seguras • Responsívas
- 42. Angular Mobile Toolkit • ng new minhaapp --mobile • Cria uma aplicação com recursos extras para PWA • Web Application Manifest • Fornece informações ao Browser de como instalar sua App • App Shell • Processo de build para gerar o App Shell do componente principal • Service Worker • Cache automático da App para carregamento rápido com ou sem internet
- 43. Demonstração Criando um PWA com Angular CLI
- 45. Links http://lab1024.com.br/ • Angular 2 • https://angular.io/docs/ts/latest • Angular Mobile Kit • https://github.com/angular/mobile-toolkit • Angular 2 Material • https://github.com/angular/material2/ • Progressive Web Apps • https://developers.google.com/web/progressive-web- apps
- 46. Eventos Gratuitos http://lab1024.com.br/ • 16/06 – Conhecendo o Angular 2 • 30/06 – Migrando para o Angular 2 • 14/07 – Diferenças entre Angular 2 e React • 28/07 – Bem vindo ao Ionic 2
- 47. Cursos Pagos http://lab1024.com.br/ • http://andrebaltieri.net/ • Mais de 80 cursos online • Apenas R$ 59,90 mensais • Cancela quando quiser • Próximos Cursos (Junho/Julho) • Aplicações Híbridas • Angular 2 • Progressive Web Apps
- 48. PROMOÇÃO http://lab1024.com.br/ • Compre 6 ganhe 8 • Compre 12 ganhe 15 http://bit.ly/abt-promo
- 49. Ajude-nos http://lab1024.com.br/ • Curta nossa página no Facebook • Inscreva-se em nosso canal do YouTube • Siga-nos no Twitter • Participe do nosso Slack • Codifique com a gente no GitHub • Estamos em todo lugar!
- 50. Obrigado! E-mail: [email protected] Site: http://lab1024.com.br/ Twitter: http://twitter.com/lab1024 Facebook: http://fb.com/lab-1024
Notas do Editor
- #9: mkdir angular2-quickstart cd angular2-quickstart package.json tsconfig.json typings.json systemjs.config.json npm install npm start npm run tsc npm run tsc:w
- #16: import { Component } from '@angular/core';@Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>'})export class AppComponent { }
- #19: import { bootstrap } from '@angular/platform-browser-dynamic';import { AppComponent } from './app.component';bootstrap(AppComponent);
- #23: <html> <head> <title>Angular 2 QuickStart</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <!-- 1. Load libraries --> <!-- Polyfill(s) for older browsers --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <!-- 2. Configure SystemJS --> <script src="systemjs.config.js"></script> <script> System.import('app').catch(function(err){ console.error(err); }); </script> </head> <!-- 3. Display the application --> <body> <my-app>Loading...</my-app> </body></html>