senooken JP Social
  • FAQ
  • Login
senooken JP Socialはsenookenの専用分散SNSです。
  • Public

    • Public
    • Network
    • Groups
    • Popular
    • People

Conversation

Notices

  1. Victorhck (victorhck@mastodon.social)'s status on Wednesday, 31-Oct-2018 01:30:46 JST Victorhck Victorhck

    Primeros pasos con Nodejs + Angular + MongoDB + Bootstrap https://ronaldl337.wordpress.com/2018/10/12/primeros-pasos-con-nodejs-angular-mongodb-bootstrap/ #Programacion #angular

    In conversation Wednesday, 31-Oct-2018 01:30:46 JST from mastodon.social permalink

    Attachments

    1. Primeros pasos con Nodejs + Angular + MongoDB + Bootstrap
      By ronaldl337 from Blog de Ronald -L337

      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/

    • agosto182 repeated this.

Feeds

  • Activity Streams
  • RSS 2.0
  • Atom
  • Help
  • About
  • FAQ
  • TOS
  • Privacy
  • Source
  • Version
  • Contact

senooken JP Social is a social network, courtesy of senooken. It runs on GNU social, version 2.0.2-beta0, available under the GNU Affero General Public License.

Creative Commons Attribution 3.0 All senooken JP Social content and data are available under the Creative Commons Attribution 3.0 license.