AngularJS: Parte 1 - Comenzando el Trabajo con AngularJS

En este artículo se muestra paso a paso la configuración correcta para comenzar a trabajar con el FrameWork AngularJS, no dejen de seguirlo!
Compartir:

Comenzando el trabajo con AngularJS

El objetivo de este Tutorial es familiarizarnos con la terminología y la tecnología, para tener un mejor entendimiento de cómo funcionan los trabajos con AngularJS. Comenzaremos a juntar las piezas en conjunto para que usted pueda construir una aplicación AngularJS, incluso si nunca la ha codificado antes.
Primer Paso: Descargamos e Instalamos el  npm y node.js en nuestro computador:
  1.  npm y node.js: Primero que nada debemos saber que npm es un gestor de paquetes para JavaScript, que nos permitirá compartir y reutilizar paquetes de código de diferentes desarrolladores en nuestros proyectos; mientras que node.js es un intérprete Javascript del lado del servidor, que nos permitirá escribir código que maneje decenas de miles de conexiones simultáneas en una sóla máquina física, ya lo veremos más adelante más a fondo.
  • Vamos al Sitio de descarga del Instalador para el Sistema Operativo Windows:
  • Estando en el site haremos un click en el siguiente Botón para realizar la descarga del Instalador:
          * Una vez descargado el Instalador procederemos a ejecutarlo dandole doble click y siguiendo los pasos básicos hasta la conclusión:          

  • Ahora que hemos conseguido instalar esta aplicación Microsoft Installer (MSI), debemos reiniciar nuestro Computador para que este se ejecute dentro del sistema y realize los cambios necesarios incluso en nuestras variables de ambiente Windows!. No te olvides de Guardar este Site como favorito antes de realizar la reiniciación de tu sistema!.
  • Una vez reiniciado nuestro sistema operacional Windows,
  • procedemos a testar nuestros aplicativos instalados, mediante el uso de nuestro terminal de comandos (Prompt de Comandos), sin olvidar que npm y node.js vienen juntos en este paquete de instalación!
          * Abrimos el Prompt de Comandos
  • Usando las siguientes líneas de comandos, testamos la instalación correcta de 'node.js' y de 'npm':
          * Testando la Instalación de node.js, usando la siguiente líneas de comandos:

node -v

          * Testando la instalación de npm, usando la siguiente líneas de comandos:
npm -v

 Segundo Paso: Descargamos e Instalamos el  Bower en nuestro computador:
  1. Bower: Funciona de forma parecida al npm en node.js. Para usarlo, creamos un fichero JSON y en él codificamos las librerías que necesitamos y con un simple comando se nos descargarán en el directorio que querramos. Veamos pues:
    •  El Bower lo descargaremos pues usando el npm:
    • Abrimos nuestro prompt de comandos y digitamos la siguiente línea de comandos:

npm install -g bower

    • Inmediatamente se hará la descarga via línea de comandos hasta llegar a su conclusión, veamos la siguiente imagen, donde se muestra la conclusión de la instalación:
    • El siguiente paso es modificar nuestras Variables de Entorno de Windows, las cuales ofreceran a Bower un permiso para interactuar con los procesos de nuestro computador. Veamos como hacer esto:
    • Iremos al Explorador de Windows presionando las siguientes teclas:

    • Nos encontraremos con esta ventana, verdad?
    • Demos click derecho en esta carpeta y nos apareceran las siguientes opciones. Aquí pues  haremos click izquierdo en "Propiedades", vean:

    • Se nos genera una ventana, donde entraremos en la opción "Confirguraciones Avanzadas del Sistema", veamos:

    • Al hacer click en Configuraciones Avanzadas del Sistema, nos abrirá la ventana 'Propiedades del Sistema', donde clicaremos en "Variables de Entorno" ó "Variables de Ambiente":

  •  Con esto pues se abrirá la ventana de "Variables de Entorno" donde existen dos campos de registros "Variables de Usuário para Miguel (Su nombre)" y el otro "Variables del Sistema", ¿Qué modificaremos?
    • Primero en el campo superior de registros osea en "Variables de Usuário para Nombre", buscamos "PATH" tal como nos muestra la figura para luego clicar en Editar, veamos:

    •  Nos aparecera la siguiente ventana donde ingresaremos el camino hacia Bower, pero ¿cuál es?: pues eso es fácil, en el momento que instalamos  Bower, el npm nos ofreció la ruta donde fué instalado, entonces copiemos esa ruta en nuestra "variable de entorno de usuario", para mi caso fué:

C:\Users\miguel\AppData\Roaming\npm
 


    • Miren como quedará, nuestra "variable de entorno", noten que hay un ';' despues de cada 'ruta' o 'camino', veamos:

    •  Despues de esto realizamos el mismo procedimiento en el campo "Variables de Sistema":
    •  Es hora de testar nuestro aplicativo desde el Prompt de comandos, digitando la siguiente línea de comandos:

bower -v


 Tercer Paso: Descargamos e Instalamos AngularJS en nuestro sistema, mediante el uso de Bower
  • Primero, creamos una carpeta en nuestro "Escritorio" o "Desktop" de nuestro Sistema Operacional, 
    • Entramos al escritorio desde nuestra línea de comandos, con lo siguiente: 
cd desktop
    • Creamos la carpeta en este Escritorio, ¿cómo?, con la siguiente línea de comandos:

mkdir app-ejemplo


    • Ingresamos a esa carpeta creada: 

cd app-ejemplo
    •  Estando dentro de esta carpeta procedemos a ingresar la siguiente línea de comandos que nos permitirá inicializar Bower:

bower init

    • Notemos que hay un proceso de inicialización desde la pantalla del Prompt de comandos, los cuales deberemos seguir para que Bower tome en cuenta nuestros datos de entrada y cree un archivo JSON para nosotros:
    • Primero nos pedirá un nombre para nuestro Proyecto, para este ejemplo le daremos el nombre de 'Proyecto1', veamos:


    • Luego nos pedirá que adicionemos una descripción para este Proyecto, pues le pondremos "Aplicacion de Ejemplo" y damos Enter:



    • Luego se viene una pregunta que será nuestro archivo principal, quiere decir que será el archivo que inicializará nuestro proyecto o el camino hacia ese archivo, para este caso colocamos "index.html" ya que este se encontrará en la carpeta creada anteriormente "app-ejemplo":
    •  Luego pues nos vendrá una opción para colocar nuestras keywords o palabras clave que nos permitirán reconocer el proyecto, bueno pues para este caso le colocaremos "HTML5":



    • Luego Bower nos pregunta por los autores de este proyecto, le pondremos nuestro nombre y demos Enter a continuación, veamos:

    •  Ahora nos pedirá la licencia, normalmente la licencia viene a ser "MIT" (licencia de software originada en el Instituto tecnologico de Massachussets), veamos:
    •  Posteriormente nos pide para colocar una homepage, pero por motivos de ejemplo, dejaremos en blanco esta opción y simplemente presionamos Enter; dandonos la opción de confirmar esos datos para generar las dependencias de nuestro proyecto; le damos Y "Yes", veamos:

    • Ahora Bower nos preguntará si queremos ignorar cualquier archivo no descrito en los datos proporcionados anteriormente, le decimos "Yes" y presionamos Enter:

    • Luego Bower nos dice: Le gustaría marcar este paquete como privado que impide que se publique accidentalmente en el registro? y le decimos que "NO" pues no queremos que este paquete sea privado ya que no estamos trabajando en producción, es un ejemplo practico; si trabajan en producción si podrán hacerlo si es conveniente!, veamos lo que nos aparece:

    • Como complemento, nos pregunta, se vé bien?, le decimos que "Yes":
    •  Ahora dando Enter nos damos cuenta que se ha creado un archivo en nuestra carpeta "App-Ejemplo", veamos:
  •  Ahora abramos el archivo creado por Bower:


  • En este archivo podemos notar que se ha creado la preparación de un proyecto con los datos descritos durante el proceso anterior!, ahora pasemos al siguiente paso:
    • Desde nuestro Prompt de Comandos, ingresemos la siguiente línea de comandos para Instalar AngularJS

bower install --save angular

  •  Realizado esto podemos notar que se ha creado una carpeta dentro de nuestro "app-Ejemplo", llamada 'bower_components', que serian los componentes creados por Bower:

    • Esta carpeta "bower-components", contiene una carpeta llamada angular y dentro de esta carpeta se agrupan varios archivos que componen las funciones de este valioso Framework, veamos:
    • Ahora miren lo que existe dentro de ella, pues sí son varios archivos que conforman todo lo necesario para poder usar el AngularJS, genial no?
    •  Además de esto si entramos a nuestro archivo bower.json creado al principio podremos notar que se ha adicionado la dependencia "angular1.6.2", veamos:

IMPORTANTE

  • Es altamente recomendable adicionar la carpeta 'bower_components' en el '.gitginore' lo que hará que esta pasta sea ignorada a la hora de subirlas a nuestro proyecto online; ¿Cómo lo hacemos?, pues:
    • Primero creamos un archivo llamado .gitginore dentro de nuestra carpeta 'app-Ejemplo', con la siguiente línea de comandos desde nuestro prompt de comandos direccionado a esa carpeta:

touch .gitignore
    • veamos que al clicar en Enter se crea un archivo llamado '.gitginore'
    • Vamos a editar este archivo '.gitginore', adicionando en él lo siguiente:

/// .gitignore

bower_components

    •  Ahora lo que nos falta es crear el archivo llamado "index.html" dentro de nuestra carpeta "app-Ejemplo", para eso creamos otra carpeta llamada "app":

mkdir app


    •  Entramos en esa carpeta "app" y creamos el archivo "index.html" con las siguientes líneas de comandos:

cd app
    •   Una vez dentro de nuestra carpeta "app" procedemos a crear nuestro archivo "index.html" con la siguiente línea de comandos:

touch index.html
  • Una vez creado el archivo "index.html", lo abrimos y lo editamos colocándole el código mínimo, que Bower deja disponible para que  AngularJS pueda funcionar:

<html>
  <head>
    <title>AngularJS</title>
  </head>
  <body>
    <h1>AngularJS</h1>
    <script type="application/javascript" src="http://localhost:8080/bower_components/angular/angular.min.js"></script>
  </body>
</html>

Cuarto Paso: Ahora que ya llegamos a dejar disponible a AngularJS para nuestro proyecto, necesitamos de un servidor para ejecutar nuestra aplicación, entonces pues vamos usar el http-server que puede ser descargado por el npm: ¿cómo?, pues con la siguiente línea de comandos:

npm install -g http-server

  • Al hacer eso habremos creado el servidor para ejecutar nuestra aplicación y ver que nuestro index.html funciona. Vamos a usar el http-server que puede ser descargado por el npm:


  • Ahora volvemos a la carpeta "app-Ejemplo" para luego ejecutar nuestro servidor "http-server"
    •  primero volvemos a nuestra carpeta "app-Ejemplo" con la siguiente línea de comandos:

cd..


    • Luego ejecutamos nuestro servidor 'http-server' con la siguiente línea de comandos:

http-server

    • Podemos notar que al clicar en Enter, se ha iniciado el servidor 'http-server'


  • Ahora es solo entrar al servidor desde nuestro Navegador, ingresando la siguiente url, veamos:

http://localhost:8080/
  • Para padronizar y facilitar el start "arranque" y los testes de la aplicación, necesitamos configurar um package.json (que es utilizado por ), ¿cómo?
    • Primero salimos del servidor en el que estamos presionando las teclas ctrl + C:

  • luego ingresamos la siguiente línea de comandos, para inicializar npm y crear su archivo JSON:

npm init

    • Al hacer esto en el prompt de comandos dejamos todo en 'default' presionando en todas las preguntas que nos hace npm el boton 'Enter' de nuestro teclado y en la ultima pregunta presionamos la letra 'Y' y luego 'Enter', veamos como se ejecuta esto:
 
    •  Para que podamos iniciar la aplicación con apenas apenas um comando, vamos a editar el archivo adicionando apenas una línea de código en el archivo creado, que seria "package.json":
    •  Para Finalizar este paso a paso, vamos a agregarle a este archivo 'package.json', la siguiente línea de código dentro de la dependencia 'scripts':

"start": "http-server ./ -a localhost -p 8080",

  •  Veamos como queda nuestro archivo 'package.json':

  • Hecha esa modificación en el archivo 'package.json', podemos ejecutarlo de la siguiente forma con la linea de comandos:

npm start


  • Ahora es sólo ingresar la siguiente url en nuestro navegador:

http://localhost:8080/app

Bueno de esta manera habremos creado nuestro primer ejemplo con Angular desde un servidor remoto con la puerta 8080, ahora con esto culminamos este artículo, en el próximo pues explicaré paso a paso como hacer un aplicativo más complejo y como es que todo funciona para que ustedes vean la capacidad de este fabuloso FrameWork!
Compartir:
Localización Gov. Celso Ramos, SC, Brasil

AngularJS

Aplicativo AngularJS

Tutorial AngularJS

Déjenos su Comentário:

2 comments:

  1. no me crea los componentes angular, por que dice que no exite ENOGIT git is not instaled or not in the PAHT gracias por su ayuda

    ResponderBorrar
    Respuestas
    1. haga lo siguiente IguanasGroup:
      1. Entre en el explorador de sistema, para el caso de windows: tecla win + E...
      2. luego vaya a miPC o mi Computador o el nombre de su dispositivo.. al lado izquierdo de su ventana de exploracion
      3. Ahora clique con el mouse y su boton derecho para que se abran las opciones de comando y clique en propiedades,
      4. Clique en configuraciones avanzadas del sistema
      5. Clique ahora en el boton "Variables de Ambiente"
      6. Agregue la ruta de instalación del git que usted instaló (por ejemplo: C:\Program Files\Git\usr\bin), pero si en caso usted aún no lo ha instalado aquí el link: https://git-scm.com/downloads
      ---con esto su sistema, estará apto para poder correr este tutorial. Si hay alguna duda me avise.

      Borrar