TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team at JavaScript 4
•
0 gostou•34 visualizações
O documento fornece diretrizes para migrar uma aplicação Angular 1 para Angular 2, incluindo: 1) Utilizar ngUpgrade para rodar códigos Angular 2 em aplicações Angular 1; 2) Converter controllers e funções de diretivas para Component Classes de Angular 2; 3) Reescrever serviços para serem injetáveis em Angular 2.
Mais conteúdo relacionado
Mais procurados
Mais procurados (13)
Semelhante a TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team at JavaScript 4
Semelhante a TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team at JavaScript 4 (20)
Mais de tdc-globalcode
Mais de tdc-globalcode (20)
Último
Último (20)
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team at JavaScript 4
- 1. pen4education Trilha - Frameworks JavaScript COMO MIGRAR MINHA APLICAÇÃO ANGULAR PARA ANGULAR 2? RÁDAMES SANTIAGO
- 2. pen4education Rádames Santiago Engenheiro de Software Front-End Caverna Labs Rua Alecrim Escritor, Art Designer e Engenheiro Netherians Games radames.rex@gmail.com
- 7. pen4education LINKS Caverna Labs: www.ruaalecrim.com.br Netherians: www.netherians.tk Beyond ote: www.devendless.com.br Twitter: @radames_rex Facebook: /radames.rex Instagram: @radames.rex Github: radames-rex Steam: radames-rex
- 8. pen4education COMO MIGRAR MINHA APLICAÇÃO ANGULAR PARA ANGULAR 2?
- 11. pen4education NÃO É UPDATE. É UM NOVO SISTEMA!
- 12. pen4education CURVA DE APRENDIZADO É RUIM.
- 14. pen4education Nós não precisamos do Angular 2!
- 18. pen4education Nós vamos precisar do Angular 2!
- 19. pen4education
- 20. pen4education ELE VAI VINGAR E NÃO TEM COMO NEGAR!
- 23. pen4education
- 25. pen4education
- 26. pen4education
- 28. pen4education
- 30. pen4education 1 - Inicializar o Angular no Browser 2 - De ng-controller para Component Class 3 - De ngAnimate para Angular 2 animate 4 - De ngRepeat para ngFor 5 - Criando services injetáveis em Angular 6 - Criando filtros customizáveis 7 - PIPES
- 31. pen4education
- 32. pen4education 1 - Inicializar o Angular no Browser
- 33. pen4education 2 - De ng-controller para Component Class
- 34. pen4education
- 35. pen4education 3 - De ngAnimate para Angular 2 animate
- 36. pen4education
- 37. pen4education 4 - De ngRepeat para ngFor
- 38. pen4education
- 39. pen4education 5 - Criando services injetáveis em Angular
- 40. pen4education
- 42. pen4education ngUpgrade: • é o mecanismo de migração que o Google criou que deixa você rodar códigos do Angular 2 em aplicações feitas em Angular 1. ng-foward: • foi criado pela comunidade para deixar que você escreva códigos parecidos com Angular 2 no Angular 1, mas ainda não usa ng2.
- 43. pen4education Passo 1 [code] Inclua as bibliotecas Angular 2 e ng-upgrade em sua aplicação existente a ser portada
- 44. pen4education Passo 2 [code] Defina um primeiro componente a ser migrado • Edite a directive Angular 1 escolhida e adapte seu código a sintaxe ao Angular2 • Converta o controller e funções ligadas a directive para a sintaxe e semântica do Angular 2 • Use ng-upgrade para exportar a directive (agora um Componente) como um componente Angular 1 (isso é necessário se você deseja chamar o novo componente Angular 2 de um template Angular 1)
- 45. pen4education Passo 3 [code] Escolha um service que deseja migrar • A maioria dos services exige pouca ou nenhuma alteração • Configure os serviço no Angular2 • (Opcional) Re-exportar o service para o Angular 1 usando ng-upgrade se ele ainda for usado por outras partes do seu código Angular 1.
- 46. pen4education Passo 4 [code] Repita o processo 2 e 3 até concluir a migração de todos as directives e services do sistema
- 47. pen4education Passo 5 [code] Uma vez que nenhum service ou directive precisa mais ser convertida, remova o top level Angular 1 bootstrap substituindo pelo Angular 2 bootstrap
- 49. pen4education
- 50. pen4education
- 51. pen4education Mas eu quero pouco retrabalho!
- 52. pen4education Angular 1.6 e ES6
- 53. pen4education
- 54. pen4education Core:Directives • form Define seus métodos no seu prototype, não em cada instância • input[number] Possui um Step validator • input[radio] Status determinado por (===) entre o value do input e o $viewValue • input[range] Total Suporte • ngBind Usa a mesma lógica do $interpolate • ngModel Define seus métodos no seu prototype, não em cada instância • select Usando ngValue em <option> elementos dentro de um <select ng-model> definirão automaticamente valores neles em forma hash
- 55. pen4education Core:Services • $compile A pré-atribuição de bindings nas instâncias do controlador é desativada por predefinição. (Pré-atribuição de bindings vai ser depreciada nas próximas versões) • $http 1. Não pode mais usar placeholder JSON_CALLBACK em suas requisições JSONP 2. success() and error() foram removidos. Usamos agora then()/catch() • $location Possui um prefixo (!) nas URLs. Ex.: mydomain.com/#!/a/b/c • $q Melhorou o tratamento de rejeições e exceções
- 56. pen4education Modules:NgAria Antes: $ariaProvider.config({bindKeypress: xyz}) Depois: $ariaProvider.config({bindKeydown: xyz})
- 57. pen4education Modules:NgClick Responde ao ‘keydown’ ao invés de ‘keypress’
- 59. pen4education MINIMIZAR O TAMANHO DO REFACTORING SE EU QUISER MIGRAR PRA ANGULAR 2
- 60. pen4education PARE de armazenar estado no $scope dos seus controllers. → angular.factory() ao invés de usar o $scope ←
- 62. pen4education COMO MIGRAR MINHA APLICAÇÃO ANGULAR PARA ANGULAR 2? radames.rex@gmail.com