Antes de começarmos vamos concordar em pelo menos um item: Tudo o que já vimos até aqui é bem interessante, porém ter que controlar todos esses pacotes na mão vai acabar virando um verdadeiro círculo do Inferno de Dante (me desculpe acabei me viciando no livro de Dan Brown). São muitos pacotes para conseguirmos uma aplicação completa. Durante as minhas pesquisas, descobri um aplicativo (também feito em JavaScript) chamado BOWER que é um gerenciador de pacotes para a Web.
Para usá-lo, devemos seguir alguns pré-requisitos como a necessidade do software GIT, que é um sistema de controle de versão distribuído e um sistema de gerenciamento de código fonte muito comum para quem utiliza o Linux. E também precisaremos do NodeJS já instalado. Vamos colocar em ordem nossos pré-requisitos:
- Instale o GIT for Windows
- Instale o NodeJS
Uma vez pronto, podemos começar e instalar o Bower. Em uma tela de comandos digite:
npm install -g bower
O NPM foi instalado junto com o NodeJS, informe-se mais nos artigos anteriores (a opção -g significa "instalação global"). Uma vez que o Bower foi instalado corretamente podemos usá-lo para instalar e manter quaisquer pacotes que sejam necessários. Por exemplo se desejamos brincar com a jQuery. Proceda da seguinte forma:
bower install jquery
Observe que criada uma pasta chamada "bower_components" no qual contém todos os arquivos necessários para usarmos a última versão estável da jQuery. Podemos manter todos os pacotes baixados com um simples comando:
bower update
Também podemos rapidamente verificar quais são os pacotes que temos com o comando:
bower list
Ou, se desejarmos, desinstalar qualquer pacote com o comando:
bower uninstall <nome_pacote>
Acha que isso tudo é bobeira? Pois bem, na aula passada comentei sobre o projeto AngularStrap, se ficou curioso descobriu que entre o projeto existe uma série de dependências entre: jQuery, BootStrap e AngularStrap. As escolhas são, baixar corretamente e acertar todos os pacotes ou resolver tudo com o seguinte comando:
bower install angular-strap
E utilizar corretamente todos os pacotes necessários para montar a página HTML de modo a utilizar o objeto TimePicker:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link
href="bower_components/bootstrap/docs/assets/css/bootstrap.css"
type="text/css" rel="stylesheet" />
<link
href="bower_components/angular-strap/vendor/bootstrap-timepicker.css"
type="text/css" rel="stylesheet" />
<script type="text/javascript"
src="bower_components/jquery/jquery.min.js"></script>
<script type="text/javascript"
src="bower_components/bootstrap/docs/assets/js/bootstrap.js"></script>
<script type="text/javascript"
src="bower_components/angular-strap/dist/angular-strap.js"></script>
<script type="text/javascript"
src="bower_components/angular-strap/vendor/bootstrap-timepicker.js"></script>
</head>
<body>
<div class="input-append bootstrap-timepicker">
<input id="timepicker1" type="text" class="input-small">
<span class="add-on"><i class="icon-time"></i></span>
</div>
<script type="text/javascript">
$('#timepicker1').timepicker();
</script>
</body>
</html>
Sem querer bancar o chato, prefiro a coisa mais prática.
Obrigado e até a próximaFernando Anselmo
Olá professor,
ResponderExcluirBom post, o bower me lembrou bastante o homebrew do macOS ( http://brew.sh/ ) ou mesmo o apt-get do linux.
Até