Estoy comenzando a trabajar con Nodejs, Angular y quiero enseñar como instalar todos los programas necesarios, configuraciones básicas, primeros pasos que debemos dar para usar cada uno de estos programas.
No soy un experto en esto, solo me estoy iniciando, asi que todo lo que aprendo lo voy documentando, para tenerlo como una chuleta y tambien para compartir cosas importantes en una sola publicacion.
Si estas comenzando en la programacion web, usas GNU-LInux y no sabes por donde comenzar, aqui encontraras informacion basica que he recolectado para aprender a manejar estas herramientas importantes para el desarrollo web.
instalamos NodeJS
pacman -S nodejs
Para comprobar si instalo nodejs, tipeamos el siguiente comando
nodejs --version
Segun la recomendacion de un amigo que es desarrollador, me dijo que no instalara node desde el repositorio, sino que manejara el proyecto usando alguno de estos manejador de versiones intereactivas
https://github.com/creationix/nvm
https://github.com/tj/n
instalamos mongodb
Instalamos Mongo desde el repositorio Oficial de ARCH.
pacman -S mongodb
Cliente grafico para Mongo DB robo 3t
disponible en el repo AUR
instalamos Angular
instalamos angular desde el repo AUR
yaourt -S angularjs
Angular CLI, es el intérprete de línea de comandos de Angular 2 que te facilitará el inicio de proyectos y la creación del esqueleto, o scaffolding, de la mayoría de los componentes de una aplicación Angular.
Pagina oficial https://cli.angular.io/, donde podremos encontrar documentacion al respecto. Instalamos angular clic desde el repositorio AUR, para los que usamos ARCH o derivados. Pero me han recomendado instalar con npm.
yaourt -S angular-cli
Una vez instalado podemos hacer uso del comando “ng”
Para instalar angular cli con npm, es lo mas recomendado.
npm install --save-dev @angular/cli@latest
Comandos disponibles
Una vez que lo tengamos instalado, podemos ejecutar ng help para ver todos los comandos que nos proporciona:
$ ng help
- ng build<options…>: Genera la aplicación y lo deja en el directorio de salida (por defecto dist/).
- ng completion: Añade el autocompletado para los comandos y subcomandos de
ng.
- ng doc : Abre la documentación oficial de Angular con la palabra clave especificada.
- ng e2e: Lanza los tests e2e del proyecto existente.
- ng generate <options…>: Genera código nuevo partiendo de los blueprints.
- ng get: Recupera un valor de la configuración.
- ng help: Muestra la ayuda del CLI.
- ng init <options…>: Crea un nuevo proyecto de Angular-cli en la carpeta actual.
- ng lint: Analiza el código del proyecto existente.
- ng new<options…>: Crea un nuevo directorio y ejecuta el comando
ng init en él.
- ng serve<options…>: Genera y sirve la aplicación; se regenera cada vez que detecta un cambio.
- ng set<options…>: Actualiza el valor de la configuración.
- ng test<options…>: Lanza la colección de test de la aplicación.
- ng version<options…>: Muestra la versión del Angular-cli instalado.
Nota: como la finalidad de este artículo es presentar la herramienta Angular-cli y sus bondades, no se va a profundizar en cada comando. A lo largo de este post aparecerán algunos ejemplos de comandos, pero no entraremos a desgranar los detalles.
Usando MongoDB
Primero debesmos iniciar el servidor de Mongo, lo hacemos con el siguiente comando
sudo systemctl start mongodb.service
para reiniciar servicio
sudo systemctl stop mongodb.service
Para entrar a la terminal de mongo typeamos en la terminal, esto no se hace como root
mongo
Usando Angular
Angular tiene su propio instalador, asi como python tiene el instalador “pip”, angular usa “npm” para instalar sus librerias.
En la pagina oficial de angular cli, vemos los comandos basicos para iniciar un proyecto. Si queremos iniciar un proyecto debemos crear una carpeta, luego abrimos la terminal y usando el comando “cd” nos dirigimos a la carpeta donde vamos a trabajar
cd "/home/$USER/Desarrollo Web/Angular/"
Ahora vamos a generar un nuevo proyecto que lo llamare “instalacion-angular5” de Angular 5, usando angular clic, con el siguiente comando
ng new instalacion-angular5
Esto va generar una serie de archivos y a la final va dar un mensaje como este.
added 1219 packages from 1262 contributors in 266.916s
[!] 23 vulnerabilities found [7525 packages audited]
Severity: 1 Low | 21 Moderate | 1 High
Run `npm audit` for more detail
You can `ng set --global packageManager=yarn`.
Project 'instalacion-angular5' successfully created.
Ahora debemos iniciar el proyecto se puede hacer con dos comandos
ng serve
o con este otro
npm start
si te sale algo como Run npm install -g npm to update!
debemos actualiza de la siguiente forma
npm install -g npm
Como actualizar Angular cli
Si instalastea angular cli desde el repositorio AUR y ya no lo quieres usar o si bien, solo quieres actualizar, debes seguir los siguientes pasos
Hoy aprenderemos a actualizar y usar Angular CLI para instalar Angular 5 paso a paso.
Paso 0. Instalar la última versión de NodeJS, para eso entraremos a su web oficial y descargaremos el instalador más actualizado https://nodejs.org/es/
Si tenemos angular clic del repo AUR y lo queremos desistalar porque queremos instalarlo con npm.
yaourt -R angular-cli
Para saber la version instalada, tipeamos el siguiente comando.
ng --version
Paso 1. Desinstalar los paquetes anteriores de Angular CLI
npm uninstall -g angular-cli
npm uninstall -g @angular/cli
Paso 2. Vaciar la caché del gestor de paquetes npm
npm cache cleam
Paso 3. Instalar la última versión de Angular CLI
npm install -g @angular/cli@latest</pre>
Ahora ya tenemos actualizado Angular CLI y ya podemos generar un nuevo proyecto de Angular 5
<pre>ng new NOMBRE_DEL_PROYECTO_ANGULAR5
cd new NOMBRE_DEL_PROYECTO_ANGULAR5 ng serve
Puedes comprobar la versión de Angular que tienes dentro del fichero package.json, podrás comprobar que tienes la versión 5. En el caso de que te interese otra versión podrías modificar las versiones de tu fichero package.json y lanzar el comando npm update.
Con esto ya sabemos como actualizar Angular CLI para instalar Angular 5, como instalar el framework y como usar Angular CLI para generar un proyecto base.
Ahora tendremos disponible la webapp de Angular 5 en http://localhost:4200/
Bootstrap
Bootstrap es un framework web o conjunto de herramientas de código abierto para diseño de sitios y aplicaciones web.
pagina oficial https://getbootstrap.com/docs/4.0/getting-started/download/
Hay varias formas de instalar bootstrap, se puede instalar con npm, tambien se puede llamar con uos enlaces de internet, se puede bajar un comprimido, para trabajar de forma local. Recomiendo bajar el archivo compilado JS and CSS.
Para la instalacion de bootstrap usando npm es asi. Pero si eres principiante, lo recomendado es trabajar de forma local, bajando el archivo compilado.
npm install bootstrap
Archivo Type Script (.ts)
TypeScript es un lenguaje de programación libre y de código abierto desarrollado y mantenido por Microsoft. Es un superconjunto de JavaScript, que esencialmente añade tipado estático y objetos basados en clases.
Diferencias entre angular y angularjs
Esta bueno saber esto, me pasaba que cuando buscaba algo en google, no entendía como hacerlo y pensaba que todo era con librerias y resulta que no estaba claro en conceptos. En Angular se manejan archivos .ts, .html... En Angularjs no se usa typescritp, esa es una de las diferencias mas evidentes. Gracias a un amigo aprendí a como filtrar contenido en google. Si deseas buscar resultados solo de Angular y restringir resultados de Angularjs, lo podremos hacer con el siguiente comando.
-angularjs
Dulces Alertas o SweetAlert
https://sweetalert.js.org/guides/
Efectos CSS
https://daneden.github.io/animate.css/
Fuentes:
https://blog.irontec.com/introduccion-a-angular-cli/
https://victorroblesweb.es/2017/11/02/usar-angular-cli-para-instalar-angular-5/
Victorhck
All senooken JP Social content and data are available under the