AngularJS vs angular

Meses atrás, decidi estudar o Angular. Quando eu estava fazendo algum avanço e criei algum aplicativo usando ele, percebi que o Angular 2 está na pré-visualização do desenvolvedor, então é uma questão de tempo antes de ser lançado. Como o Angular 2 não será compatível com o Angular 1, e há muitas mudanças, a pergunta é: é melhor continuar desenvolvendo com o Angular 1.x ou começar a desenvolver o Angular 2?

É um facto que nem sempre temos que usar a versão mais recente nem a mais nova linguagem do mercado, mas, neste caso, a aplicação ainda é pequena, pelo que posso mudar sem problemas.

Deixe-me começar dizendo, eu estou supondo que você e todos que estarão lendo isso já estão confortavelmente com Angular 1 (agora referido como AngularJS , ao contrário de simplesmente Angular para as versões mais novas). Dito isto, vamos entrar em algumas das adições e principais diferenças no Angular 2+.

  1. Eles adicionaram um cli angular.

Você pode iniciar um novo projeto executando ng new [app name] . Você pode servir seu projeto executando ng serve saiba mais aqui: https://github.com/angular/angular-cli

  1. Seu código angular é escrito em ES6 Typescript e é compilado em tempo de execução para JavaScript no navegador.

Para ter uma idéia completa disso, recomendo verificar algumas das listas de resources que tenho na parte inferior da minha resposta.

  1. Estrutura do Projeto

Em uma estrutura básica, você terá uma pasta app/ts onde estará fazendo a maioria do seu trabalho e um app/js Você encontrará nos arquivos da pasta app/js com uma extensão .js.map . Eles “mapeiam” seus arquivos “.ts” para o seu navegador para debugging, pois o navegador não pode ler o texto datilografado nativo.

Atualização : está fora da versão beta. A estrutura do projeto mudou um pouco, na maioria dos casos e se você estiver usando o cli angular, você estará trabalhando na pasta src/app/ . Em um projeto inicial, você terá o seguinte.

 app.component.css app.component.html app.component.spec.ts app.component.ts app.module.ts index.ts 

app.component.css : arquivo CSS que você deve usar específico para o component.html

app.component.html : uma visualização (variável declarada no app.component.js)

app.component.spec.t : usado para testar app.component.ts

app.component.ts : seu código app.component.html a app.component.html

app.module.ts : Isso é o que inicia o seu aplicativo e onde você define todos os plugins, componentes, serviços, etc. Isso é o equivalente do app.js em Angular 1

index.ts usado para definir ou exportar arquivos de projeto

Informação adicional:
Dica: você pode rodar ng generate [option] [name] para gerar novos serviços, componentes, pipes, etc.

Além disso, o arquivo tsconfig.json é importante, pois define as regras de compilation do TS para o seu projeto.

Se você está pensando que eu tenho que aprender uma nova língua? … Uh … tipo, o TypeScript é um superconjunto de JavaScript. Não seja intimidado; está lá para facilitar o seu desenvolvimento. Eu senti como se eu tivesse uma boa compreensão depois de apenas algumas horas brincando com ele, e tinha tudo para baixo depois de 3 dias.

  1. Você se liga ao seu HTML da mesma forma como faria se estivesse em uma diretiva Angular 1. Portanto, variables ​​como $scope e $rootScope foram descontinuadas.

Este você pode ter sido implícito. O Angular 2 ainda é um MV *, mas você usará ‘ components ‘ como uma maneira de ligar o código a seus templates, por exemplo, pegue o seguinte

  import { Component } from '@angular/core'; @Component({ selector:'my-app', template: '

Hello World!

' }) export class AppComponent {}

Aqui pense na declaração de import como sua injeção de dependência em um controlador v1. Você usa import para importar seus pacotes, onde a import {Component} diz que você estará fazendo um component que deseja vincular ao seu HTML .

Observe o decorador @Component você tem um selector e template . Aqui, pense no selector como seu $scope que você usa como se você usasse directives v1 onde o nome do selector é o que você usa para vincular ao seu HTML da mesma forma

   

Onde é o nome da sua tag personalizada que você usará e que funcionará como um marcador de posição para o que é declarado no seu modelo. ou seja,

Hello World!

Hello World!

Considerando que isto seria semelhante ao seguinte na v1:

HTML

 

{{hello}}

JS

 $scope.hello = "Hello World!" 

Você também pode adicionar algo entre essas tags para gerar uma mensagem de carregamento, como esta:

  Loading...  

Em seguida, ele exibirá ” Carregando … ” como a mensagem de carregamento.

Observe que o que está declarado no template é o caminho ou o HTML bruto que você usará no seu HTML na tag de selector .


Uma implementação mais completa do Angular 1 ficaria mais parecida com isso:

HTML

 

{{hello}}

Na v1 isso seria algo parecido

JS

 angular.module('controller', []) .controller('myCtrl', function( $scope) { $scope.hello = "Hello World!" }) 

Isso é o que eu realmente gosto sobre v2. Eu achei que a diretriz era uma curva de aprendizado íngreme para mim na v1 e, mesmo quando eu os tinha descoberto, muitas vezes eu tinha o CSS renderizado não como eu pretendia. Eu acho isso muito mais simples.

O V2 permite uma escalabilidade mais fácil do seu aplicativo, pois você pode dividir seu aplicativo mais facilmente do que na v1. Eu gosto dessa abordagem como você pode ter todas as suas partes de trabalho em um arquivo em oposição a ter vários em v1 angular.

E quanto a converter seu projeto de v1 para v2?


Pelo que ouvi da equipe de desenvolvimento, se você quiser atualizar o seu projeto v1 para a versão 2, você estará apenas excluindo os blobs descontinuados e substituindo seus $scope s por selector . Eu achei este vídeo útil. É com alguns membros da equipe Ionic que trabalham lado a lado com a equipe angular, já que a v2 tem um foco mais forte em dispositivos móveis. https://youtu.be/OZg4M_nWuIk Espero que isso ajude.

UPDATE: Eu atualizei adicionando exemplos como implementações oficiais de Angular 2 surgiram.

ATUALIZAÇÃO 2: Isso ainda parece ser uma pergunta popular, então eu apenas pensei que seria um recurso muito útil quando comecei a trabalhar com o angular 2.

Recursos úteis:

Para mais informações sobre o ES6, recomendo conferir os Tutoriais de Novos Recursos do ECMAScript 6 / ES6 do The New Boston – YouTube Playlist

Para escrever funções de Datilografe e veja como eles compilam a Javascript confira o Playground de idioma Datilografado

Para ver uma function por quebra de function do que a equivalência Angular 1 está em Angular 2, consulte o Angular.io – Cookbook -A1 A2 Referência Rápida

Pode ajudá-lo a conhecer Angular 1 vs Angular 2.

O Angular 2 provou ter muitos benefícios em relação ao Angular 1:

  • É totalmente baseado em componentes.
  • Melhor detecção de mudança
  • A compilation Ahead of Time (AOT) melhora a velocidade de renderização.
  • O TypeScript pode ser usado para desenvolver aplicativos Angular 2

  • Angular 2 tem melhor desempenho que Angular 1.

  • Angular 2 tem um sistema de modelos mais poderoso que o Angular 1.

  • O Angular 2 possui APIs mais simples, carregamento lento, debugging mais fácil.

  • Angular 2 é muito mais testável que Angular 1.

  • Angular 2 fornece componentes nesteds.

  • O Angular 2 fornece uma maneira de executar mais de dois sistemas juntos.

  • E assim por diante..

Angular 2 e Angular 1 é basicamente uma estrutura diferente com o mesmo nome.

angular 2 está mais pronto para o estado atual dos padrões web e o estado futuro da web (ES6 \ 7, imutabilidade, componentes, DOM sombra, trabalhadores de serviço, compatibilidade móvel, módulos, datilografados e assim por diante e assim por diante …)

angular 2 matou muitos resources principais em controladores semelhantes a angular 1, $ scope, diretivas (substituídas com annotations @component), a definição do módulo e muito mais, até mesmo coisas simples como ng-repeat não saíram da mesma forma como foram.

de qualquer forma, a mudança é boa, o angular 1.x tinha falhas e o angular 2 está mais preparado para os futuros requisitos da web.

para resumir as coisas – eu não recomendo que você inicie um projeto 1.x angular agora – este é provavelmente o pior momento para fazê-lo, já que você terá que migrar mais tarde para o angular 2, você ajusta sua atenção sobre angular do que escolher angular 2, o google já lançou um projeto com angular 2, e no momento em que você terminar o projeto angular 2 já deve estar no centro das atenções. Se você quiser algo mais estável, pode pensar em react elm e flux como frameworks JS.

angular 2 vai ser incrível, isso é sem dúvida.

Nenhum quadro é perfeito. Você pode ler sobre falhas no Angular 1 aqui e aqui . Mas isso não significa que seja ruim. A questão é qual problema você está resolvendo. Se você quiser lançar um aplicativo simples rapidamente, que é leve, com uso limitado de vinculação de dados, vá em frente com o Angular 1. O Angular 1 foi construído há 6 anos para resolver a rápida criação de protótipos, o que faz muito bem. Mesmo que o seu caso de uso seja complexo, você ainda pode usar o Angular 1, mas deve estar ciente das nuances e das práticas recomendadas para criar um aplicativo da Web complexo. Se você estiver desenvolvendo um aplicativo para fins de aprendizado, sugiro mudar para o Angular 2, já que é onde está o futuro do Angular.

O único recurso de destaque no Angular v2 e também no ReactJs é que ambos adotaram a nova arquitetura de desenvolvimento Web-Components. O que isso significa é que agora podemos criar componentes da Web independentes e plug-and-play para qualquer site do mundo que tenha a mesma pilha de tecnologia do componente Web. Legal! sim muito legal. 🙂

A outra mudança mais proeminente no Angular v2 é que a linguagem primária de desenvolvimento não é outra senão o TypeScript. Embora o TypeScript pertença à Microsoft, e é um superconjunto de JavaScript de 2015 (ou ECMAScript6 / ES6), mas tem alguns resources que são muito promissores. Eu recomendaria aos leitores que registrassem o TypeScript em detalhes (o que é divertido) depois de ler este tutorial.

Aqui eu diria que os caras tentando inter-relacionar Angular v1 e Angular v2 confundem ainda mais os leitores, e na minha humilde opinião, Angular v1 e Angular v2 devem ser tratados como dois frameworks diferentes. Em Angular v2, temos o conceito da Web-Components de desenvolvimento de aplicações web, enquanto em Angular v1 temos que jogar com Controllers, e (infelizmente ou por sorte) nenhum controlador está presente em Angular v2.

Uma coisa a notar é que o angular2 está usando o typescript.

Eu fiz angular1 com cordova no meu estagiário e agora estou fazendo um angular 2. Acho angular2 será a tendência, pois mais estruturada na minha opinião, mas os contras é que há poucos resources para se referir quando você tem problemas ou dificuldades. 1.x angular tem toneladas de diretivas personalizadas que podem ser super fáceis de usar.

Espero que ajude.

Angular 2 é muito melhor que 1, atlist no que oferece, suporte para componentes web, usando typescript, preformance e simplicidade geral da interface, foi a razão pela qual eu decidi iniciar um projeto usando angular 2. como sempre do get go i percebi que existem problemas em angular 2 (desde o exmple routing com o apache) que pouca ou nenhuma documentação está disponível, então a documentação e comunidade de angular 2 é a maior armadilha para o angular 2, já que ele não é desenvolvido o suficiente.

Eu diria que, se você precisa criar um site rápido para um prazo curto, use o conhecido angular 1, se você está em um projeto mais longo e pode ter tempo para investigar novos problemas (que você pode ser o primeiro a encontrar, o que poderia seja um bônus se você pensar na contribuição que você pode dar à comunidade angular 2) do que ir com a angular 2.