AngularJS
Grunt taken

Voer de applicatie lokaal uit

Het volgende voorbeeld vereist dat node.js is geïnstalleerd en npm beschikbaar is.
Volledige werkende code kan worden gevorkt van GitHub @ https://github.com/mikkoviitala/angular-grunt-run-local

Gewoonlijk is een van de eerste dingen die u wilt doen bij het ontwikkelen van een nieuwe webtoepassing om deze lokaal te laten werken.

Hieronder vindt u een volledig voorbeeld dat dat bereikt, met behulp van grunt (javascript task runner), npm (node package manager) en bower (nog een andere package manager).

Naast uw daadwerkelijke applicatiebestanden moet u enkele externe afhankelijkheden installeren met behulp van de hierboven genoemde tools. In uw projectmap, bij voorkeur root , hebt u drie (3) bestanden nodig.

• package.json (afhankelijkheden beheerd door npm)
• bower.json (afhankelijkheden beheerd door bower)
• gruntfile.js (grunt taken)

Dus uw projectmap ziet er zo uit:

package.json

We zullen grunt zelf installeren, matchdep om ons leven gemakkelijker te maken, waardoor we afhankelijkheden op naam kunnen filteren, grunt-express gebruikt om express webserver te starten via grunt en grunt-open om urls / bestanden te openen vanuit een grunt-taak.

Dus deze pakketten gaan allemaal over "infrastructuur" en helpers waarop we onze applicatie zullen bouwen.

{
  "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 is (of zou in ieder geval moeten zijn) helemaal over front-end en we zullen het gebruiken om hoekig te installeren.

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

gruntfile.js

Binnen gruntfile.js hebben we de echte magie "die de applicatie lokaal uitvoert", die onze applicatie opent in een nieuw browservenster, die draait op 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'
  ]);
};

Gebruik

Om uw applicatie helemaal opnieuw te starten, slaat u bovenstaande bestanden op in de hoofdmap van uw project (elke lege map volstaat). Start vervolgens de console / opdrachtregel en typ het volgende om alle vereiste afhankelijkheden te installeren.

npm install -g grunt-cli bower
npm install

En voer vervolgens uw applicatie uit met

grunt app

Let op: ja, je hebt ook je eigen applicatiebestanden nodig.
Blader voor een bijna minimaal voorbeeld door de GitHub-repository die in het begin van dit voorbeeld wordt genoemd.

Die structuur is niet zo verschillend. Er is alleen index.html sjabloon, app.js in app.js en enkele stijlen in app.css . Andere bestanden zijn voor Git en editorconfiguratie en enkele generieke dingen. Probeer het eens!