Angular 2, TypeScript e além
•Transferir como PPTX, PDF•
5 gostaram•2,824 visualizações
Angular 2 e TypeScript Angular CLI Angular Material Progressive Web Apps Angular Mobile Toolkit NativeScript
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (17)
Semelhante a Angular 2, TypeScript e além
Semelhante a Angular 2, TypeScript e além (20)
Mais de Andre Baltieri
Mais de Andre Baltieri (20)
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/ • contato@andrebaltieri.net • 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: contato@lab1024.com.br Site: http://lab1024.com.br/ Twitter: http://twitter.com/lab1024 Facebook: http://fb.com/lab-1024
Notas do Editor
- 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
- import { Component } from '@angular/core';@Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>'})export class AppComponent { }
- import { bootstrap } from '@angular/platform-browser-dynamic';import { AppComponent } from './app.component';bootstrap(AppComponent);
- <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>