AngularJS: Parte 2 - Mi Primer Hola Mundo Con AngularJS

  Hola Mundo con AngularJS

Continuando el Tutorial de aprendizaje de AngularJS, sería bastante aburrido sólo tener esta solicitud y decir 'hola' al mundo; en lugar de eso, contruiremos una aplicación en la que podamos introducir un nombre y este pueda ser recibido en pantalla.
Veremos pues el enlace bidireccional de datos en acción, actualizando automáticamente otro elemento en la página cuando se cambie el nombre. Puede descargar la fuente para este artículo; sin embargo, no lo recomiendo, pues sin duda, escribir estas pocas líneas de código es ideal para su aprendizaje. Pero obvio, eso depende de usted.
Incluso si usted decide descargar el código fuente, por favor hágase un favor a usted mismo y juegue con él. Cambiar cosas, romper cosas y arreglarlas; todo esto le permitirá aprender más en un lapso de tiempo más corto.

Primer Paso: Comencemos con el marcado; el HTML5 más simple y algunos CSS básicos para el estilo serán suficientes por ahora.

• Para esto crearemos una carpeta en el Escritorio de nuestro Sistema llamada 'src'  (nombre elegido porque contiene el Source ó Fuente de Recursos):
• Para esto utilizaremos el 'Prompt de Comandos ó también llamada de Consola' y 2 líneas de comandos que generaran la creación de esta carpeta en el Escritorio:
• Ingresando a Nuestro Escritorio desde la consola:

cd desktop

• Creando la carpeta 'src', desde la consola:

mkdir src

• Dentro de esta carpeta estaremos creando 2 subcarpetas:
• Subcarpeta css, que incluye los archivos de estilo.
• Subcarpeta js, que incluye los archivos JavaScripts. 
• Entramos a nuestra carpeta src:

cd src

• Creando las 2 carpetas 'css' y 'js' , veamos:

mkdir css
mkdir js

    

Segundo Paso: Creamos nuestro archivo de estilo CSS, llamado main.css (main = principal) y pues lo colocaremos en la carpeta css :

• Entrando a la carpeta css de nuestro proyecto:

cd css

• Creamos nuestro archivo main.css dentro de la carpeta 'css', todo con el comando touch de la consola:

touch main.css

• Abrimos este archivo 'main.css' y le colocamos el siguiente código:

/* main.css */
body {
    font-family: sans-serif;
    font-size: 1.2em;
    margin: 50px;
}

• En este código CSS con instrucciones de estilo damos las órdenes para que se cree un body con la fuente de letras san-serif, con el tamaño de fuente 1.2em y con un margen de 50px!

Tercer Paso: Creamos nuestros archivos JavaScripts dentro de la carpeta js:

• Para empezar crearemos 2 archivos dentro de la carpeta js:
• app.js

/*  app.js */
'use strict';

/** app level module which depends on services and controllers */
angular.module('myApp', ['myApp.controllers']);

• controllers.js

/*  controllers.js */
'use strict';

/** Controllers */
angular.module('myApp.controllers', []).
    controller('helloWorldCtrl',function ($scope) {
        $scope.name = "World";
    });

• A continuación pues crearemos una subcarpeta llamada 'vendor' , la cual es llamada de esta forma pues contiene código de librerias externas que haran falta para nuestro proyecto, esta será creada dentro de la subcarpeta js:
• Entramos a la subcarpeta 'js':

cd js

• Creamos la carpeta 'vendor':

mkdir vendor

• Es momento de 

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!

miguel