Conhecendo o Angular 2
André Baltieri
• Microsoft MVP desde 2013
• Visual Studio & Dev Technologies
• Web Developer desde 2005
• http://andrebaltieri.net/
• contato@andrebaltieri.net
• ASP.NET Cast
Agenda
• Angular 2 e TypeScript
• Angular CLI
• Progressive Web Apps
• Angular Mobile Toolkit
Angular2 e TypeScript
• Dart, JavaScript ou TypeScript
• Ótimo suporte no VS Code
• Apoio da Microsoft
Angular CLI
• Cliente via comando para aplicações com Angular 2
• Ainda está em construção (Demos podem falhar)
• npm install -g angular-cli
• ng new PROJECT_NAME
• cd PROJECT_NAME
• ng serve
• ng serve --port 4201 --live-reload-port 49153
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
Build
• ng build
• Na hora do build, o src/client/app/environment.ts será
substituido
• config/environment.dev.ts
• config/environment.prod.ts
• ng build -prod
Testes e Deploy
• ng test
• ng e2e
• Deploy instantâneo via GH Pages
• ng github-pages:deploy
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

Conhecendo Angular 2

  • 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 • Progressive Web Apps • Angular Mobile Toolkit
  • 5.
    Angular2 e TypeScript •Dart, JavaScript ou TypeScript • Ótimo suporte no VS Code • Apoio da Microsoft
  • 6.
    Angular CLI • Clientevia comando para aplicações com Angular 2 • Ainda está em construção (Demos podem falhar) • npm install -g angular-cli • ng new PROJECT_NAME • cd PROJECT_NAME • ng serve • ng serve --port 4201 --live-reload-port 49153
  • 7.
    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
  • 8.
    Build • ng build •Na hora do build, o src/client/app/environment.ts será substituido • config/environment.dev.ts • config/environment.prod.ts • ng build -prod
  • 9.
    Testes e Deploy •ng test • ng e2e • Deploy instantâneo via GH Pages • ng github-pages:deploy
  • 10.
    Progressive Web Apps •Carregamento instantâneo • Adicionar a tela inicial • Push Notifications • Rápidas • Seguras • Responsívas
  • 11.
    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