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

É um fato que nem sempre precisamos usar a versão mais recente nem o idioma mais novo do mercado, mas, nesse caso, o aplicativo ainda é pequeno para que eu possa mudar sem problemas.

Deixe-me prefácio dizendo: estou assumindo que você e todos que estarão lendo isso já estejam confortavelmente com o Angular 1 ( agora referido como AngularJS , em vez de simplesmente Angular para as versões mais recentes). Dito isto, vamos ver algumas das adições e principais diferenças no Angular 2+.

1. Eles adicionaram um angular cli.

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

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

Para ter uma idéia completa, recomendo verificar uma lista de recursos que tenho na parte inferior da minha resposta.

3. Estrutura do Projeto

Em uma estrutura básica, você terá uma app/tspasta na qual fará mais trabalho e app/jsencontrará nos app/jsarquivos de pasta com uma .js.mapextensão. Eles "mapeiam" seus arquivos ".ts" para o seu navegador para depuração, pois o navegador não consegue ler texto datilografado nativo.

Atualização : está fora de beta. A estrutura do projeto mudou um pouco, na maioria dos casos, e se você estiver usando o CLI angular, estará trabalhando na src/app/pasta. 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 ocomponent.html

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

app.component.spec.ts : usado para testeapp.component.ts

app.component.ts : seu código vinculado aapp.component.html

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

index.ts usado para definir ou exportar arquivos de projeto

Informações adicionais:
Dica profissional: você pode executar ng generate [option] [name]para gerar novos serviços, componentes, tubulações, etc.

Além disso, o tsconfig.jsonarquivo é importante, pois define as regras de compilação do TS para o seu projeto.

Se você está pensando que eu tenho que aprender um novo idioma? ... Tipo, o TypeScript é um superconjunto de JavaScript. Não se deixe intimidar; está lá para facilitar seu desenvolvimento. Eu senti como se tivesse uma boa noção sobre isso depois de algumas horas brincando com ele, e consegui tudo depois de três dias.

4. Você vincula seu HTML da mesma maneira que faria em uma diretiva Angular 1. Tão variável como $scopee $rootScopefoi preterido.

Este você pode estar implícito. O Angular 2 ainda é um MV *, mas você usará ' componentes ' como uma maneira de vincular código aos seus modelos, por exemplo, faça o seguinte

    import { Component } from '@angular/core';

    @Component({
         selector:'my-app',
         template: '<h1> Hello World! </h1>'
    })

    export class AppComponent {}

Aqui, pense na importdeclaração como sua injeção de dependência em um controlador v1. Você usa importpara importar seus pacotes, onde import {Component}diz que você fará um componentque gostaria de vincular ao seu HTML.

Observe o @Componentdecorador que você tem selectore template. Aqui, pense no selectorcomo $scopevocê usa como v1, directivesonde o nome do selectoré o que você usa para vincular ao seu HTML assim

<my-app> </my-app>

Onde <my-app>está o nome da sua tag personalizada que você usará que atuará como um espaço reservado para o que é declarado no seu modelo. ie) <h1> Hello World! </h1>. Considerando que isso seria semelhante ao seguinte na v1:

HTML

<h1>{{hello}}</h1>

JS

$scope.hello = "Hello World!"

Também é possível adicionar algo entre essas tags para gerar uma mensagem de carregamento, assim:

<my-app> Loading... </my-app> 

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

Observe que o que é declarado templateé o caminho ou o HTML bruto que você usará HTMLna sua selectortag.

Uma implementação mais completa do Angular 1 seria mais parecida com esta:

HTML

<h1 ng-controller="myCtrl">{{hello}}</h1>

Na v1, isso seria algo como

JS

angular.module('controller', [])



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

É disso que eu realmente gosto na v2. Achei que a diretiva era uma curva de aprendizado acentuada para mim na v1 e mesmo quando eu as descobri, muitas vezes não conseguia CSSentender como pretendia. Acho que isso é bem mais simples.

A V2 permite uma escalabilidade mais fácil do seu aplicativo, pois você pode dividi-lo com mais facilidade do que na v1. Eu gosto dessa abordagem, pois você pode ter todas as suas peças de trabalho em um arquivo, em vez de ter várias na v1 angular.

Que tal converter seu projeto da v1 para a v2?

Pelo que ouvi da equipe de desenvolvimento, se você gostaria de atualizar seu projeto da v1 para a v2, estará apenas passando e excluindo blobs obsoletos e substituindo $scopes por selectors. Achei este vídeo útil. É com algumas equipes da Ionic que trabalham lado a lado com a equipe angular, pois a v2 tem um foco mais forte no celular https://youtu.be/OZg4M_nWuIk Espero que isso ajude.

ATUALIZAÇÃO: Atualizei adicionando exemplos à medida que surgiram as implementações oficiais do Angular 2.

ATUALIZAÇÃO 2: Essa ainda parece ser uma pergunta popular, por isso pensei em algum recurso que achei muito útil quando comecei a trabalhar com o angular 2.

Recursos úteis:

Para saber mais sobre o ES6, recomendo conferir os tutoriais de novos recursos do ECMAScript 6 / ES6 do New Boston - Playlist do YouTube

Para escrever funções Typcript e ver como elas são compiladas para Javascript, consulte o Playground na linguagem Typcript.

Para ver uma função por divisão de função da equivalência do Angular 1 no Angular 2, consulte o Angular.io - Livro de receitas -A1 A2 Referência rápida

Isso pode ajudá-lo a entender a comparação entre Angular 1 e Angular 2.

O Angular 2 provou ter muitos benefícios sobre o Angular 1:

• É totalmente baseado em componentes.
• Melhor detecção de alterações
• A compilação antecipada (AOT) melhora a velocidade de renderização.
• O TypeScript é usado principalmente para o desenvolvimento de aplicativos Angular 2.
• O Angular 2 tem melhor desempenho em relação ao Angular 1.
• O Angular 2 possui um sistema de modelos mais poderoso que o Angular 1.
• O Angular 2 possui APIs mais simples, carregamento lento, depuração mais fácil.
• Angular 2 é muito mais testável que Angular 1.
• Angular 2 fornece componentes aninhados.
• O Angular 2 fornece uma maneira de executar mais de dois sistemas juntos.
• E assim por diante...

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

O angular 2 está mais pronto para o estado atual dos padrões da web e o estado futuro da web (ES6 \ 7, imutabilidade, componentes, DOM sombra, trabalhadores de serviços, compatibilidade móvel, módulos, texto datilografado etc.)

O angular 2 eliminou muitos recursos principais do angular 1 como - controladores, $ scope, diretivas (substituídas por anotações @component), a definição do módulo e muito mais, até coisas simples como ng-repeat não deixaram o mesmo.

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

para resumir as coisas - eu não recomendo que você inicie um projeto angular 1.x agora - esta é provavelmente a pior hora para fazê-lo, pois você terá que migrar mais tarde para o angular 2, e você deve pensar em angular do que escolher angular 2, o google já lançou um projeto com o angular 2 e, quando você termina o projeto, o angular 2 já deve estar em destaque. se você deseja algo mais estável, pode pensar em reag \ elm, flux e redux como estruturas JS.

O angular 2 será incrível, sem dúvida.

Nenhuma estrutura é perfeita. Você pode ler sobre falhas no Angular 1 aqui e aqui . Mas isso não significa que seja ruim. A questão é que problema você está resolvendo. Se você deseja implementar um aplicativo simples rapidamente, que seja leve, com uso limitado de ligação de dados , siga em frente com o Angular 1. O Angular 1 foi construído há 6 anos para resolver a prototipagem rápida, o que faz muito bem. Mesmo que seu caso de uso seja complexo ainda, você pode usar o Angular 1, mas esteja ciente das nuances e práticas recomendadas ao criar um aplicativo Web complexo. Se você estiver desenvolvendo um aplicativo para fins de aprendizado, sugiro que mude para o Angular 2, pois é aí que está o futuro do Angular.

O único recurso destacado no Angular v2 e também no ReactJs é que ambos adotaram a nova arquitetura de desenvolvimento de componentes da Web. O que isso significa é que agora podemos criar componentes da Web independentes e plug-and-play para qualquer site do mundo que possua a mesma pilha de tecnologia desse componente da Web. Legal! Sim, muito legal. :)

A outra mudança mais importante no Angular v2 é que sua principal linguagem de desenvolvimento não é outra senão o TypeScript. Embora o TypeScript pertença à Microsoft, é um superconjunto de JavaScript de 2015 (ou ECMAScript6 / ES6), mas possui alguns recursos que são muito promissores. Eu recomendaria que os leitores fizessem check-out do TypeScript com um pouco de detalhes (o que é divertido, é claro) depois de ler este tutorial.

Aqui eu diria que os caras que tentam 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 duas estruturas diferentes. No Angular v2, temos o conceito de desenvolvimento de aplicativos da Web para componentes da Web, enquanto no Angular v1 precisamos jogar com controladores e (infelizmente ou felizmente) nenhum controlador está presente no Angular v2.

Uma coisa a notar é que angular2 está usando texto datilografado.

Eu fiz angular1 com cordova no meu estagiário e agora estou fazendo um angular 2. Acho que angular2 será a tendência mais estruturada na minha opinião, mas o contras é que existem poucos recursos para indicar quando você tiver problemas ou dificuldades. O angular 1.x possui várias diretivas personalizadas que podem ser super fáceis de usar.

Espero que ajude.

O Angular 2 é muito melhor que 1, pelo menos no que oferece: suporte a componentes da Web, usando texto datilografado, desempenho e simplicidade geral da interface, foi o motivo pelo qual decidi iniciar um projeto usando o angular 2. No entanto, desde o início , Percebi que há problemas no angular 2 (por exemplo, roteamento com apache) para os quais existe pouca ou nenhuma documentação disponível; portanto, a documentação e a comunidade do angular 2 são a maior armadilha para o angular 2, pois não é desenvolvido o suficiente.

Eu diria que, se você precisar criar um site rapidamente por um curto prazo, use o conhecido angular 1, se você estiver em um projeto mais longo, e puder dispor de tempo para investigar novos problemas (que você pode ser o primeiro a encontrar) , que pode ser um bônus se você pensar na contribuição que você pode dar à comunidade angular 2) do que na angular 2.