AngularJS
Tareas roncas

Ejecutar la aplicación localmente

El siguiente ejemplo requiere que node.js esté instalado y npm esté disponible.
El código completo de trabajo se puede obtener de GitHub @ https://github.com/mikkoviitala/angular-grunt-run-local

Por lo general, una de las primeras cosas que desea hacer al desarrollar una nueva aplicación web es hacer que se ejecute localmente.

A continuación encontrará un ejemplo completo de cómo lograrlo, usando grunt (javascript task runner), npm (administrador de paquetes de nodo) y bower (otro administrador de paquete).

Además de los archivos de su aplicación real , necesitará instalar algunas dependencias de terceros utilizando las herramientas mencionadas anteriormente. En el directorio de su proyecto, preferiblemente root , necesitará tres (3) archivos.

• package.json (dependencias gestionadas por npm)
• bower.json (dependencias gestionadas por bower)
• gruntfile.js (tareas roncas)

Así que su directorio de proyectos se ve así:

paquete.json

Vamos a estar instalando ronco sí, matchdep para hacer nuestra vida más fácil que nos permite filtrar dependencias por su nombre, ronco-Express utiliza para iniciar el servidor web expresa a través de gruñido y gruñido abierta para abrir direcciones URL / archivos de una tarea ronco.

Entonces, estos paquetes son todo acerca de la "infraestructura" y los ayudantes en los que construiremos nuestra aplicación.

{
  "name": "app",
  "version": "1.0.0",
  "dependencies": {},
  "devDependencies": {
    "grunt": "~0.4.1",
    "matchdep": "~0.1.2",
    "grunt-express": "~1.0.0-beta2",
    "grunt-open": "~0.2.1"
  },
  "scripts": {
    "postinstall": "bower install"
  }
}

Bower.json

Bower es (o al menos debería ser) todo acerca del front-end y lo usaremos para instalar angular .

{
  "name": "app",
  "version": "1.0.0",
  "dependencies": {
    "angular": "~1.3.x"
  },
  "devDependencies": {}
}

gruntfile.js

Dentro de gruntfile.js tendremos la magia real de "aplicación local", que abre nuestra aplicación en una nueva ventana del navegador, que se ejecuta en http: // localhost: 9000 /

'use strict';

// see http://rhumaric.com/2013/07/renewing-the-grunt-livereload-magic/

module.exports = function(grunt) {
  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
 
  grunt.initConfig({
    express: {
      all: {
        options: {
          port: 9000,
          hostname: 'localhost',
          bases: [__dirname]
        }
      }
    },
 
    open: {
      all: {
        path: 'http://localhost:<%= express.all.options.port%>'
      }
    }
  });
 
  grunt.registerTask('app', [
    'express',
    'open',
    'express-keepalive'
  ]);
};

Uso

Para que su aplicación esté en funcionamiento desde cero, guarde los archivos anteriores en el directorio raíz de su proyecto (cualquier carpeta vacía servirá). Luego, inicie la consola / línea de comando y escriba lo siguiente para instalar todas las dependencias necesarias.

npm install -g grunt-cli bower
npm install

Y luego ejecuta tu aplicación usando

grunt app

Tenga en cuenta que sí, también necesitará sus archivos de aplicación reales.
Para un ejemplo casi mínimo, examine el repositorio de GitHub mencionado al principio de este ejemplo.

La estructura no es tan diferente. Solo hay una plantilla index.html , código angular en app.js y algunos estilos en app.css . Otros archivos son para configuración de Git y editor y algunas cosas genéricas. ¡Darle una oportunidad!