Compartir variables en Controladores con AngularJS

Para compartir variables en controladores con AngularJS:

 App.js

MiWeb.factory('Data', function () {
    return { Nombre: '' };
});

MiWeb.controller('IndexCtrl', function ($scope, Data) {
    $scope.Data = Data;
});

MiWeb.controller('PanelCtrl', function ($scope, Data) {
    $scope.Data = Data;
});

Index.html

<div ng-controller="IndexCtrl">
    <input type="text" ng-model="Data.Nombre">
    <br>Mi nombre es : <strong>{{Data.Nombre}}</strong>
</div>

<hr>

<div ng-controller="PanelCtrl">
    El nombre ingresado en el controlador index es: {{Data.Nombre}}
</div>

Introducción a Grunt

Grunt es un automatizador de tareas para javascript, el cual adquiere mucha fuerza cuando utiliza nodeJS server como por ejemplo la manipulación del sistema de archivos.

Instalacion de grunt:

npm install -g grunt-cli #Instalacion de grunt global
npm install grunt --save-dev #En el directorio donde lo usaremos

Grunt cuenta con 2 archivos principales:

  • Gruntfile.js: Configuración de grunt con la definición de las tareas a ejecutar
  • Package.json: Configuración de nodeJs  así como definición de componentes y plugins instalados en el proyecto.

Usualmente ambos archivos no existen entonces debemos crearlos:

Para crear este archivo podemos dar el comando:

npm init

Y creará un archivo con la siguiente estructura

Package.json

{

"name": "MiProyectoJs",

"version": "1.0.0",

"descripcion": "Esta es la descripcion de mi proyecto",

"author": "Nombre del Autor",

"date": "2014-12-28"

}

Instalamos el conector de grunt con nodeJS para que despliegue el servidor automaticamente, esto agregará las devDependencies al archivo package.json

npm install grunt grunt-contrib-connect --save-dev

Agregamos el archivo de grunt que no se genera automaticamente, esto de debe hacer a mano:

Gruntfile.js

module.exports = function (grunt) {
    grunt.initConfig({
       connect: {
          server: {
             options: {
                 hostname: 'localhost',
                 port: 9000,
                 keepalive: true,
                 open: true,
                 base: 'www'
             }
         }
      }
 });

 grunt.loadNpmTasks('grunt-contrib-connect');

 grunt.registerTask('server', ['connect:server']);
}

Finalmente corremos el servidor con

   grunt server