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+.
- 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
- 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.
- 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.
- 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