Começando com Angular 2 – Primeira aplicação

Iago Cavalcante2 comentários em Começando com Angular 2 – Primeira aplicação

Popularização do AngularJS.

Após sua popularização o angular se tornou o principal framework de javascript do github, sendo o 4º projeto mais favoritado, com isso pode-se imaginar que a comunidade de angular é gigantesca, hoje em dia é fácil encontrar alguma resposta sobre o angular e sanar qualquer tipo de dúvida, sua documentação oficial é bem elaborada, facilitando ainda mais nossos estudos.

Fuja do mito de que o angular é usado apenas em pequenos projetos, ele pode ser aplicado em todos os tipos e tamanhos de aplicações web, além disso ele é disparado o framework mais utilizado para criação de aplicativos moveis híbridos.

O que mudou no angular 2 ?

Pode-se dizer que quase tudo que o angular 1.x usava, morreu, pouco foi aproveitado, na nova versão não existe mais $scope, controllers, angular.module, jqLite e directive definition object. Em outras palavras o Angular 2 foi reescrito.

Mas isso não quer dizer que o angular 1.x não será mais utilizado, ou descontinuado, não se preocupe, o angular 1.x não vai a lugar nenhum, ele é estável, os desenvolvedores estão fazendo o angular 1.x parecer o mais próximo da sua nova versão e como o angular 2 não dá suporte para browsers antigos (IE 8) então é um dos motivos para o angular 1.x ser mantido.

Angular na sua versão 2, utiliza a nova especificação do javascript (Ecmascript 6) para se adequar aos novos padrões do javascript e melhorar os gargalos que a versão mais antiga tinha.

ES6 – Especificações

Aqui vamos listar algumas especificações do ES6:

Let – Tem a função de dá escopo a variável. Por exemplo:

for(let i = 0; i < 5; i++){
      //mantém a variável i somente no escopo do for, não sendo acessível fora dele.
}

Const – seta um tipo e é imutável, já sendo alocada na memória, exemplo:

const TAMANHO_VETOR = 1; //não pode ser alterada
const ESCOPO = {teste : 1}; //você não pode alterar o objeto inteiro, mas é possivel alterar sua caracteristica
ESCOPO.teste = 2;

Arrow Functions – é um callback, tem uma sintaxe curta e conecta seu valor lexicamente  , exemplo:

let carros = [{modelo: 'modelo', preco: 30000},{modelo: 'modelo2', preco:20000}];
let modelo = carros.map(item => item.modelo);

Modules – criação de módulos de forma nativa:

//diretorio lib/calcula.js
export function calc(x){
  return 2 * x;
}

//diretorio index.js
import {calc} from "lib/calcula";
console.log("O dobro de 4 é: "+ calc(4));

Class – permite a criação de classes, exemplo :

class Aluno{
  constructor(nome){
    this.nome = nome;
 }
  getNome(){
    return this.nome;
  }
}

let iago = new Aluno("Iago Cavalcante");

e muitas outras coisas. Você pode encontrar a documentação completa no seguinte AQUI!

 

Angular 2 – Velocidade e Performance.

É focado para o desenvolvimento mobile, com isso se tornando mais otimizado, logo você tem um framework com ótima performance tanto em mobile quanto desktop. É um framework modular você podendo utilizar só o minimo para funcionar, diferente do angular 1.x em que você tinha tudo em um core com coisas que você não iria utilizar, mas estava lá. Como falado anteriormente ele é mais otimizado do que sua versão anterior, chegando a ser dez vezes mais rápido.

 

Primeiros passos com angular 2

Para começar com o desenvolvimento de sua primeira aplicação utilizando o Angular 2, você precisa ter instalado em sua máquina o Node Package Manager(NPM), ele é o gerenciador de pacotes que será utilizado para executar várias tarefas no decorrer do projeto. Sua instalação é bem simples, para instalar siga as seguintes instruções:

# Ubuntu

curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -

sudo apt-get install -y nodejs
  • Se tudo ocorrer bem será possível executar o seguinte comando no terminal ou cmd para verificar a versão instalada do node.js:
node -v
  • Node já vem com uma versão do npm instalado, se você rodar no terminal ou cmd o comando, npm, se tudo estiver correto aparecerá uns comandos referente ao npm no seu terminal.
  • O npm é atualizado com mais frequência que o node.js, para se certificar que você possui a versão mais atual execute no:
Terminal(unix ou linux): sudo npm install npm -g
Cmd: npm install npm -g

Agora vamos configurar o npm na nossa aplicação, para isso crie uma pasta com o nome angular2, acesse ela pelo terminal ou cmd e execute o seguinte comando para inicializar o npm na aplicação:

npm init -y

Esse comando irá criar um arquivo package.json na raiz da aplicação, e nele estará contido todas as informações do projeto, como nome, versão e principalmente as dependências. Vamos editar o package.json e incluir as dependências do angular, abra o arquivo com o editor de texto de sua preferência:

Você irá ver o arquivo dessa maneira antes de editar:

{
 "name": "angular2",
 "version": "1.0.0",
 "scripts": {
   "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
   "lite": "lite-server",
   "postinstall": "typings install",
   "tsc": "tsc",
   "tsc:w": "tsc -w",
   "typings": "typings"
 },
 "license": "ISC",
 "dependencies": {
   "@angular/common": "2.0.0-rc.4",
   "@angular/compiler": "2.0.0-rc.4",
   "@angular/core": "2.0.0-rc.4",
   "@angular/forms": "0.2.0",
   "@angular/http": "2.0.0-rc.4",
   "@angular/platform-browser": "2.0.0-rc.4",
   "@angular/platform-browser-dynamic": "2.0.0-rc.4",
   "@angular/router": "3.0.0-beta.1",
   "@angular/router-deprecated": "2.0.0-rc.2",
   "@angular/upgrade": "2.0.0-rc.4",
   "systemjs": "0.19.27",
   "core-js": "^2.4.0",
   "reflect-metadata": "^0.1.3",
   "rxjs": "5.0.0-beta.6",
   "zone.js": "^0.6.12",
   "angular2-in-memory-web-api": "0.0.14",
   "bootstrap": "^3.3.6"
 },
 "devDependencies": {
   "concurrently": "^2.0.0",
   "lite-server": "^2.2.0",
   "typescript": "^1.8.10",
   "typings":"^1.0.4"
 }
}

Ainda na raiz da aplicação, o próximo arquivo que você irá criar será o arquivo typings.js, nele você terá o seguinte: 

{
"globalDependencies": {
  "core-js": "registry:dt/core-js#0.0.0+20160602141332",
  "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
  "node": "registry:dt/node#6.0.0+20160621231320"
}
}

E depois você irá criar também um arquivo de configuração do angular 2, que chamamos  de systemjs.config.js, nele terá todas as configurações necessárias que a nossa aplicação precisa:

/**
* Configuracoes do sistema para nossa aplicacao de exemplo
* Contem os ajustes necessarios que nossa aplicacao precisa.
*/
(function(global) {
// map tells the System loader where to look for things
var map = {
  'app':                        'app', // 'dist',
  '@angular':                   'node_modules/@angular',
  'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
  'rxjs':                       'node_modules/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
  'app':                        { main: 'main.js',  defaultExtension: 'js' },
  'rxjs':                       { defaultExtension: 'js' },
  'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
};
var ngPackageNames = [
  'common',
  'compiler',
  'core',
  'forms',
  'http',
  'platform-browser',
  'platform-browser-dynamic',
  'router',
  'router-deprecated',
  'upgrade',
];
// Individual files (~300 requests):
function packIndex(pkgName) {
  packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
  packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
  map: map,
  packages: packages
};
System.config(config);
})(this);
  1. var packages = {
  'app':                        { main: 'main.js',  defaultExtension: 'js' },
  'rxjs':                       { defaultExtension: 'js' },
  'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
};

No trecho de código acima, que está contido dentro nosso systemjs.config.js, temos o nome da nossa pasta, que é definido com atributo da variável pacote, e contem o arquivo main.ts que é o arquivo que vamos falar mais lá pra frente.

Feito isso, vamos salvar e pelo terminal acessando a pasta do projeto, será executado o comando: 

npm install

Aguarde até ser finalizado todo o processo de instalação das dependências, ele vai criar uma pasta chamada node_modules contendo as dependências baixadas.

Agora vamos configurar o TypeScript, crie na raiz da aplicação o arquivo tsconfig.json, nele você irá inserir o seguinte trecho de código: 

{
 "compilerOptions": {
   "target": "es5",
   "module": "commonjs",
   "moduleResolution": "node",
   "sourceMap": true,
   "emitDecoratorMetadata": true,
   "experimentalDecorators": true,
   "removeComments": false,
   "noImplicitAny": false
 },
 "exclude":{
   "node_modules"
 }
}

Essas são as configurações padrões sugeridas na documentação do Angular 2, não iremos discutir cada configuração dessas acima.

Nosso próximo passo vai ser criar o primeiro componente, um coponente é um recurso que ficará responsável por controlar o estado de parte da nossa view. Crie uma uma pasta dentro da raiz da aplicação chamada app, acessando ela iremos criar nosso primeiro arquivo TypeScript chamado app.component.ts. Após isso vamos editar  o arquivo app.component.ts e criar o código do nosso componente.

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

@Component({
	selector: 'meu-app',
	template: '<h1>Primeiros passos com angular 2</h1>'
})

export class AppComponent{}
  • Na primeira linha estamos importando o Component decorator do angular;
  • Na terceira linha vamos chamar a anotation @Component;
  • Quarta linha iremos indicar como chamar esse componente na nossa view, usando o atributo selector: ‘qualquer-nome’
  • Quinta linha vamos definir um template para esse componente, no nosso caso inserimos um título.
  • A anotação Component tem que estar associada a uma classe, para isso escrevemos a oitava linha.

É importante ter o nome da classe igual ao nome do arquivo, isso irá facilitar a leitura e manutenção da sua aplicação futuramente.

Também precisamos criar um arquivo para dizer pro angular carregar os root component e o componente que criamos, assim que a página for carregada, o responsável por esse processo vai ser o nosso arquivo main.ts que também será criado dentro da pasta app, ele vai ter o seguinte conteúdo: 

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import 'rxjs/Rx';

bootstrap(AppComponent);

Vamos adicionar um estilo na nossa aplicação, para isso criaremos um arquivo style.css na raiz do projeto, que será chamado no cabeçalho do nosso index.html:

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
body {
  margin: 2em;
}

Por último, vamos criar nossa página index.html  na raiz do projeto e nele inserir o seguinte código: 

<html>
 <head>
   <title>Primeira Aplicação com Angular 2</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">

   <link rel="stylesheet" type="text/css" href="style.css">
   <!-- 1. Carrega as bibliotecas da aplicação -->
   <script src="node_modules/core-js/client/shim.min.js"></script>
   <script src="node_modules/zone.js/dist/zone.js"></script>
   <script src="node_modules/reflect-metadata/Reflect.js"></script>
   <script src="node_modules/systemjs/dist/system.src.js"></script>

   <!-- 2. Configura o SystemJS, responsável por carregar os arquivos js assincronamente-->
   <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
 </head>

 <!-- 3. Exibe a aplicação-->
 <body>
   <meu-app>Carregando...</meu-app>
 </body>
</html>

quando tudo estiver criado, iremos compilar e executar nossa aplicação pelo cmd ou terminal. Entre na pasta da aplicação e execute a instrução: 

npm start

Será compilado na nossa linha de comando e se tudo ocorrer bem vai abrir uma aba no seu navegador, onde será carregada a aplicação.  

Vamos entender o fluxo do nosso projeto, temos o seguinte fluxo de execução :

  1. SystemJs responsável por carregar todos os arquivos .js necessários para a executação.
  2. A função bootstrap definida em app/main.js é chamada.
  3. O bootstrap então incializa o componente ‘AppContent’, que é passado como parâmetro pra ela.
  4. O angular 2 percorre os elementos HTML da página buscando por tags relacionadas a componentes, e no nosso caso encontra a tag ‘meu-app’.
  5. O angular 2 vai e executa o código do componente ‘AppComponent’, adicionando o conteúdo do atributo ‘template’ à tag HTML ‘meu-app’.

Espero que gostem dessa breve introdução, nosso próximo passo será entender mais profundamente a arquitetura do Angular 2.

Referências:

http://blog.werlangtecnologia.com.br/angular/adeus-angularjs-ola-angular2/

http://blog.caelum.com.br/angular-2-o-fim-do-two-way-data-binding/

http://andrebaltieri.net/blog/angular-2-e-realmente-uma-cilada/

Angular  2  – por Márcio Souza

Artigos relacionados

2 Comments

  1. Bom dia. Adorei o blog.
    Gostaria de avisá-los sobre um problema que eu tive seguindo este tutorial.
    Ao executar o comando “npm install” na pasta do projeto, estava acontecendo um erro referente a JSON Parse no arquivo “package.json”.
    Basicamente eram os espaços em branco que causavam o erro. Ao removê-los do arquivo, o comando funcionou.

    Responder

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *