Embed Size (px)
Citation preview
Angular 2, TypeScript e além
André Baltieri• Microsoft MVP desde 2013• Visual Studio & Dev Technologies
• Web Developer desde 2005• http://andrebaltieri.net/• [email protected]• ASP.NET Cast
Agenda• Angular 2 e TypeScript• Angular CLI• Angular Material• Progressive Web Apps• Angular Mobile Toolkit• NativeScript
Angular2 e TypeScript• Dart, JavaScript ou TypeScript• Ótimo suporte no VS Code• Apoio da Microsoft
Angular2 e TypeScript1. Criar a pasta, iniciar app e configuração2. Criar o RootComponent3. Apontar o RootComponent no main.ts4. Criar o HTML e chamar os scripts5. Rodar a aplicação
Iniciando1. Criar a pasta, iniciar app e configuração
1. package.json2. tsconfig.json3. typings.json4. systemjs.config.json
DemonstraçãoInciando a aplicação e configurando
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
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
Import• O Angular é modular• Cada arquivo dedicado a um único propósito• Quando precisamos de algo, importamos
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
Component Decorator• Selector – Especifica uma tag HTML onde o componente
será renderizado• Template – Especifica o conteúdo (HTML) do
componente
Component Class• Define o comportamento do componente como
manipulação de DOM
DemonstraçãoCriando o RootComponent
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
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
DemonstraçãoCriando o main.ts
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
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
SystemJs• Configurado através do systemjs.config.js• Cria o map• Registra os pacotes• Modularização também funciona com WebPack por
exemplo
DemonstraçãoCriando o Index.html
Angular CLI• Cliente via comando para aplicações com Angular 2• Ainda está em construção (Demos podem falhar)
Instalação• npm install -g angular-cli
Uso• ng new PROJECT_NAME• cd PROJECT_NAME• ng serve• ng serve --port 4201 --live-reload-port 49153
DemonstraçãoCriando uma aplicação com Angular CLI
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
DemonstraçãoCriando componentes
Build• ng build
DemonstraçãoCompilando a aplicação
Ambientes• Na hora do build, o src/client/app/environment.ts será
substituido• config/environment.dev.ts• config/environment.prod.ts
• ng build -prod
Testes• ng test• ng e2e
DemonstraçãoExecutando testes
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
DemonstraçãoPublicando a aplicação
Angular Material 2• Modular• Instalável através do NPM• npm install --save @angular2-material/{core,button,card}
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
DemonstraçãoAdicionando componentes do Material Design
Importando os componentes• Importar utilizando import• Adicionar a diretiva
DemonstraçãoUtilizando os componentes
Progressive Web Apps• Carregamento instantâneo• Adicionar a tela inicial• Push Notifications• Rápidas• Seguras• Responsívas
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
DemonstraçãoCriando um PWA com Angular CLI
DemonstraçãoAdicionando a HomeScreen
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
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
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
PROMOÇÃO
http://lab1024.com.br/
• Compre 6 ganhe 8• Compre 12 ganhe 15
http://bit.ly/abt-promo
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!
Obrigado!E-mail: [email protected]: http://lab1024.com.br/Twitter: http://twitter.com/lab1024Facebook: http://fb.com/lab-1024
![Aktion ruller ni kilometer dagpengeregler ud [s.08]€¦ · Angular 2 Grundkursus Vi bruger Angular 2 compo nents, TypeScript, CSS3 og HTML5 og udvikler en web løsning (vha. Angular](https://img.pdfslide.tips/doc/110x75/60488553fc35c7490674ed02/aktion-ruller-ni-kilometer-dagpengeregler-ud-s08-angular-2-grundkursus-vi-bruger.jpg)
