Baixado 21 vezes
Carregado porAndre Baltieri
Angular 2, TypeScript e Além
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.
- 3. André Baltieri • MicrosoftMVP desde 2013 • Visual Studio & Dev Technologies • Web Developer desde 2005 • http://andrebaltieri.net/ • contato@andrebaltieri.net • ASP.NET Cast
- 4. Agenda • Angular 2e 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 apasta, iniciar app e configuração 1. package.json 2. tsconfig.json 3. typings.json 4. systemjs.config.json
- 8. Demonstração Inciando a aplicaçãoe 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 umou 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 • Defineo comportamento do componente como manipulação de DOM
- 15.
- 16. main.ts • Separamos oarquivo 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 porplataforma (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
- 18.
- 19. Juntando tudo... • OIndex.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ésdo systemjs.config.js • Cria o map • Registra os pacotes • Modularização também funciona com WebPack por exemplo
- 22.
- 23. Angular CLI • Clientevia 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 newPROJECT_NAME • cd PROJECT_NAME • ng serve • ng serve --port 4201 --live-reload-port 49153
- 26. Demonstração Criando uma aplicaçãocom Angular CLI
- 27. Scaffolding • ng generatecomponent 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
- 28.
- 29.
- 30.
- 31. Ambientes • Na horado 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
- 33.
- 34. Deploy • Deploy instantâneovia 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
- 35.
- 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 doMaterial Design
- 39. Importando os componentes •Importar utilizando import • Adicionar a diretiva
- 40.
- 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 PWAcom Angular CLI
- 44.
- 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 6ganhe 8 • Compre 12 ganhe 15 http://bit.ly/abt-promo
- 49. Ajude-nos http://lab1024.com.br/ • Curta nossapá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
- #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>