AngularJS
Grunzen Sie Aufgaben

Anwendung lokal ausführen

Das folgende Beispiel setzt voraus , dass node.js installiert ist und npm verfügbar ist.
Vollständiger Arbeitscode kann von GitHub @ https://github.com/mikkoviitala/angular-grunt-run-local abgeleitet werden

Normalerweise ist es eines der ersten Dinge, die Sie beim Entwickeln einer neuen Webanwendung tun möchten, wenn diese lokal ausgeführt wird.

Im Folgenden finden Sie ein vollständiges Beispiel, das genau dies erreicht, indem Sie grunt (Javascript Task Runner), npm (Node Package Manager) und Bower (noch einen weiteren Package Manager) verwenden.

Neben den eigentlichen Anwendungsdateien müssen Sie mit den oben genannten Tools einige Abhängigkeiten von Drittanbietern installieren. In Ihrem Projektverzeichnis, vorzugsweise root , benötigen Sie drei (3) Dateien.

• package.json (von npm verwaltete Abhängigkeiten)
• bower.json (von bower verwaltete Abhängigkeiten)
• gruntfile.js (grunzende Aufgaben)

So sieht Ihr Projektverzeichnis so aus:

package.json

Wir installieren grunt selbst, matchdep , um unser Leben einfacher zu machen, sodass wir Abhängigkeiten nach Namen filtern können. Grunt-express wird zum Starten des Express-Webservers über grunt und grunt-open zum Öffnen von URLs / Dateien aus einem Grunt-Task verwendet.

Bei diesen Paketen handelt es sich also um "Infrastruktur" und um Helfer, auf denen wir unsere Anwendung aufbauen werden.

{
  "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 ist (oder sollte es zumindest sein) über Front-End und wir werden es verwenden, um eckig zu installieren.

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

gruntfile.js

In gruntfile.js haben wir die eigentliche "lokal ausgeführte Anwendung" -Magie, die unsere Anwendung in einem neuen Browserfenster öffnet und unter http: // localhost: 9000 / läuft .

'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'
  ]);
};

Verwendungszweck

Speichern Sie die oben genannten Dateien im Stammverzeichnis des Projekts (alle leeren Ordner können dies tun), um Ihre Anwendung von Grund auf zu starten. Starten Sie dann die Konsole / Befehlszeile und geben Sie Folgendes ein, um alle erforderlichen Abhängigkeiten zu installieren.

npm install -g grunt-cli bower
npm install

Führen Sie dann Ihre Anwendung mit aus

grunt app

Beachten Sie, dass Sie ja auch Ihre eigentlichen Anwendungsdateien benötigen.
Für ein fast minimales Beispiel durchsuchen Sie das GitHub-Repository, das zu Beginn dieses Beispiels erwähnt wurde.

Die Struktur ist nicht so anders. Es gibt nur eine index.html Vorlage, winkeligen Code in app.js und einige Stile in app.css . Andere Dateien sind für die Git- und Editor-Konfiguration und einige allgemeine Dinge. Versuche es!