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: 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 : 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 : Crea un nuevo proyecto de Angular-cli en la carpeta actual.
  • ng lint: Analiza el código del proyecto existente.
  • ng new: Crea un nuevo directorio y ejecuta el comando ng init en él.
  • ng serve: Genera y sirve la aplicación; se regenera cada vez que detecta un cambio.
  • ng set: Actualiza el valor de la configuración.
  • ng test: Lanza la colección de test de la aplicación.
  • ng version: 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/

Anuncios