DESAFIOS DE DESENVOLVIMENTO DE SISTEMAS E TECNOLOGIA
As dependências do Angular 2
As aplicações construidas com o framework Angular dependem de uma série de recursos e funcionalidades fornecidas por terceiros (incluindo a própria angular). As dependências dessas aplicações são usualmente instaladas e gerenciadas pelo gerenciador de pacotes do nodes, chamado npm (Nodes Package Manager). Ou seja, Node.js e npm são essenciais para desenvolver com Angular2.
Verifique se a versão do seu node e do npm satisfazem os pré-requisitos para o angular 2 (após o download e de colocar a pasta raiz do node no path do Windows, abra o prompt de comando e digite node –v, npm –v).
O package.json precisa das seguintes dependências:
{
"dependencies": {
"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/compiler-cli": "0.5.0",
"@angular/core": "2.0.0-rc.5",
"@angular/forms": "0.3.0",
"@angular/http": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",
"@angular/upgrade": "2.0.0-rc.5",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.27",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.17",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.2.0",
"lite-server": "^2.2.2",
"typescript": "^1.8.10",
"typings": "^1.3.2"
}
}
OBS: como instalar? à Exemplo npm install @angular/core –save
Ou copie as dependências para o package.json e digite no cmd o comando npm install, (lembre-se que o type script precisa de configurações, pelo o arquivo tsconfig.json e o arquivo typings.json, isso vc encontrará em outro artigo).
Há outras opções possíveis de pacotes e é provável que você possa somar ou subtrair certas dependências para atender às necessidades específicas de sua aplicação. A recomendação dessas dependências vem do site “angular.io”, segundo eles, recomendam este conjunto particular porque funcionam bem juntos e incluem tudo o que vai precisar para criar e executar os aplicativos básicos. Além disso eles dizem que é mais do que precisamos para começar.
Por esse mótivo resolvi criar esse post, para tentar entender melhor essas dependências e chegar a conclusão do que preciso realmente e do que posso customizar.
Vamos tentar explicar:
Primeiro, qual a diferença entre dependencies e devDependencies?
O package.json distingue entre 2 grupos de dependências.
As dependências do grupo dependencies são essenciais para rodar a aplicação.
Já as dependência do grupo devDependencies somente são necessárias em ambiente de desenvolvimento.
Categorias de pacotes de dependencia:
Existem três categorias de pacotes na seção dependências do package.json da aplicação:
Características - Pacotes de recursos que fornecem a nossa aplicação capacidade de framework(como angular).
Polyfills – Polyfills ajudam a preencher certas lacunas na implementação JavaScript do navegador.
Outras - Outras bibliotecas que suportam o aplicativo, como inicialização para widgets HTML e estilo.
DEPENDENCIAS
Feature Packages (pacotes de características)
@angular/core – A palavra-chave é tempo de execução, ele inclui todos os decoradores, componentes, Directivas, injeção de dependência, e o ciclo de vida do componente. É a parte do framework que habilita o componente, cuida do seu ciclo de vida, e tudo o mais que ocorre em tempo de execução.
@angular/common – Inclui o service (que virou a classe), pipe e directives.
@angular/compiler – Ele entende templates e pode converte-los para código que fazem a aplicação rodar e renderizar. Os desenvolvedores não costumam interagir diretamente com a diretiva compiler, eles a usam indiretamente via o comando “plataforma-browser-dynamic” ou pelo compilador offline de templates.
@angular/platform-browser – Mantém o DOM e o browser relacionados, especialmente as peças que ajudam a traduzir para o DOM. Este pacote também inclui o método bootstrapStatic para aplicações bootstrapping, onde é possível pré-compilar modelos offline.
OBS: DOM é uma API que define regras de acesso e manipulação de documentos html e xml, além também de definir a estrutura lógica desses documentos xml e html. O termo documento é usado para generalizar diferentes tipos de informações que no final das contas serão tranformados em dados. https://www.w3.org/TR/DOM-Level-1/introduction.html
@angular/platform-browser-dynamic – Provedores e método inicial para aplicações que compilam templates no cliente. Não usa compilar off-line. Nós usamos esse package para inicialização durante o desenvolvimento.
@angular/http – Cliente http
@angular/router – Roteador de componentes
@angular/upgrade – Conjunto de utilidades para upgrade de aplicações angular.
system.js - Um módulo de carregamento dinâmico compatível com a especificação do módulo ES2015. Há outras opções viáveis, incluindo o bem visto Webpack. SystemJS passa a ser o que usamos nas amostras de documentação.
Polyfill Packages (pequenos pacotes de preenchimento específico)
Angular requer certos pacotes npm específicos no ambiente da aplicação. Esses pacotes o angular lista no seu peerDependencies. Nos vamos listar na seção dependências do nosso package.json .
core-js – Usado para fazer certos remendos de contexto global dando características essenciais do ES2015(ES6). Os desenvolvedores podem substituir esse pacote por outras que ofereçam as mesmas funcionalidades, lembre-se que esse pacote é momentâneo, ela não será mais necessária quando os browsers já estiverem implementando certas APIs para o Angular 2.
reflect-metadata - Essa dependência permite que se faça o update do TypeScript sem precisar fazer o update do Angular e vice-versa. É uma dependência da aplicação e não do angular.
rxjs – (Reactive Extensions for JavaScript) Especificação de eventos observáveis no browser, reage a eventos. É independente da versão do Angular. Os desenvolvedores devem escolher uma versão preferida de rxjs. A comissão que define normas para a linguagem JS se chama TC39.
zone.js – Gerencia as especificações de região. Tb independente da versão do angular. Os desenvolvedores devem escolher uma versão preferida de zone.js. A comissão que define normas para a linguagem JS se chama TC39.
Outas bibliotecas que podem ajudar:
angular2-in-memory-web-api – Uma biblioteca que simula teia de servidores remotos sem a real necessidade de chamadas http ao servidor. Bom para protótipo, desenvolvimento em fase inicial( antes mesmo de ter um servidor).
bootstrap – É um framework html e css popular para design responsivo.
devDEPENDENCIAS
Pacotes que nos ajudam no desenvolvimento da aplicação. Eles não tem que ser implantados (deployed) em produção com a aplicação.
concurrently – Para rodar muitos comandos npm concorrentemente, Linux, Windows, Mac.
lite-server – Um servidor de arquivos estáticos leve, com excelente suporte para aplicações angular que usam roteamento.
typescript – Servidor para linguagem TypeScript, que inclui o tsc, ou seja, compilador TypeScript.
typings – Gerenciador para arquivos de definição do TypeScript.