Angular 2 em 10 minutos

A forma como podemos desenvolver aplicações hoje reduziu consideravelmente a complexidade dos desenvolvimentos, e apesar de incluir novas tecnologias que a princípio podem parecer um tanto complicadas, elas na verdade ajudam não só a construir melhores aplicações, mas também a serem adaptadas aos atuais requisitos de usabilidade.

Uma dessas tecnologias que podemos usar é AngularJS, que é uma estrutura MVW (Model-View-Any), que se traduz como Model-View-Qualquer-que-funcionar-para você, é baseado em JavaScript e nos permite fornecer nossos documentos HTML recursos estáticos de funcionalidade dinâmica e para usar o ligações para injetar dados em nosso HTML usando as próprias diretivas do framework.

Angular funciona muito bem, mas temos uma nova iteração dele e permite estender muito mais a funcionalidade do framework, então vamos ver como podemos começar a usar Angular 2 em apenas 10 minutos.

1. Obtendo TypeScript e Angular 2

Para realizar esta implementação vamos trabalhar da forma mais otimizada possível, para isso usaremos Dactilografado que é uma linguagem que permite estender a funcionalidade do JavaScript para focar no uso de classes e objetos.

Para conseguir tanto TypeScript O que Angular 2 é necessário que tenhamos Node.js, bem como seu gerenciador de pacotes em nosso computador, se ainda não os tivermos, você pode dar uma olhada no primeiros passos com Node.js neste tutorial.

Assim que tivermos Node.js e o gerenciador de pacotes NPM podemos executar os comandos para obter o que precisamos:

 npm install -g tsd@^0.6.0 tsd install angular2 es6-promessa rx rx-lite 

Além disso, devemos instalar o compilador TypeScript já que o navegador não reconhece arquivos .ts:

 npm install -g typescript@^1.5.0-beta

Uma vez executado, devemos ver pelo console a instalação dos módulos, o compilador e as bibliotecas do framework.

PROLONGAR

Por fim, só precisamos instalar um servidor local, para rodar nossa aplicação de forma profissional, para isso em nosso console e através do NPM executamos o seguinte:

 npm install -g http-server

2. Construindo nosso aplicativo

Uma vez que temos todo o necessário para o funcionamento de nossa aplicação criamos uma pasta onde teremos os arquivos do projeto, podemos chamá-la angular10min, e dentro de nós vamos criar um arquivo chamado application.ts e nosso usual index.html.

A primeira coisa que vamos fazer é adicionar as classes e componentes ao nosso arquivo application.ts, para isso a primeira coisa que devemos fazer é importar Angular 2 da seguinte forma:

 import {Component, View, bootstrap} de 'angular2 / angular2';

Para verificar o funcionamento do nosso compilador estando na pasta do nosso Projeto vamos executar o seguinte:

 tsc --watch -m commonjs -t es5 --emitDecoratorMetadata application.ts

Com o que devemos receber pelo console que a compilação foi concluída com sucesso e que também está aguardando alterações no arquivo, isto é, por ter utilizado o parâmetro -watch.

PROLONGAR

Agora criamos nosso componente, onde declararemos o seletor que usaremos em nosso código HTML, bem como em nossa view onde incluiremos o template onde injetaremos as mudanças.

 @Component ({seletor: 'meu-aplicativo'}) @View ({modelo: ''})

Como nosso compilador está procurando por mudanças e incluímos algumas, é normal que vejamos alguma atividade em nosso console.

Agora só temos que fazer a declaração de nossa classe e inicializar os objetos dentro do construtor que serão os que serão esvaziados na view. Finalmente usamos a função bootstrap () que se encarregará de renderizar os componentes em nossa página.

 class myComponent {nome: string; construtor () {this.name = 'Jonathan'; }} bootstrap (meuComponente);

Já temos nosso código Typescript finalizado, e se verificarmos em nossa pasta devemos ter um JavaScript que é o resultado de nossa compilação do .ts.

PROLONGAR

3. Construindo o HTML

Finalmente, temos que construir o HTML, realizar as devidas importações bem como incluir os seletores que declaramos em nosso arquivo .ts, para isso incluiremos os system.js, o que nos permitirá realizar o importar do nosso arquivo, vamos ver o conteúdo do nosso HTML:

 Angular 2 em 10 minutos 

Feito isso, só precisamos rodar nosso servidor e rodar nosso aplicativo, para isso paramos o compilador e executamos o servidor com o seguinte comando:

 servidor http

Isso irá configurar um servidor em localhost: 8080 e isso nos permitirá acessar nosso aplicativo.

Veremos os dados definidos em nosso arquivo TypeScript são aqueles injetados em nossa aplicação, desta forma separamos a lógica de nossa aplicação e podemos ter um documento HTML limpo que só manipula os seletores que criamos graças a Angular 2, nos dando um aplicativo que funciona de maneira mais otimizada e eficiente, usando o mínimo de esforço possível.