Tipps und Tricks für AngularJS, Teil 2: ES2015

Seite 2: Gulp, AngularJS und ES2015

Willkommen in der automatisierten Welt von Gulp

Gulp ist ein Werkzeug , das ähnlich wie Grunt wiederkehrende Aufgaben automatisiert. Sie lassen sich dann mit folgendem Befehl ausführen:

gulp watch

Die Konfiguration geschieht über die Datei Gulpfile.js, die im Vergleich zu Grunt jedoch gewöhnlichen JavaScript-Code enthält. Die für das Beispiel definierten Tasks umfassen:

gulp-jshint für JavaScript-Code-Validierungen
gulp-6to5 für das automatische Transpilieren von ES2015- zu ES5-Code
gulp-watch für das Beobachten von Dateiänderungen und das automatiserte Anstoßen anderer Tasks
BrowserSync für das Hosting des Beispiels und automatische Synchronisieren des Browserfensters bei Änderungen von JS, HTML und CSS.

Für eine schnelle Einführung in Gulp ist der Artikel "An Introduction to Gulp.js" zu empfehlen.

AngularJS mit EcmaScript 2015

Nach der Vorstellung der im Beispiel verwendeten Werkzeuge ist es Zeit, den Einsatz von ES2015 mit AngularJS zu demonstrieren. Das Beispiel ist eine Flickr-Bildsuche, mit der man unter Angabe eines Stichworts Bilder abrufen kann. Nach einem Klick auf die Schaltfläche "Load Images" gibt ein darunterliegendes ngRepeat die mit JSONP extrahierten Bilder aus. Zusätzlich wird neben der Beschriftung "Number of hits" am rechten Bildschirmrand die Anzahl der geladenen Bilder angezeigt.

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="jspm_packages/github
     /twbs/bootstrap@3.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
  </head>
  <body>
    <div class="container" ng-controller="MainCtrl as ctrl">
      <h1>Flickr Photo Album</h1>
      <div class="form-inline form-group">
        <label for="txtSearchTag">Search tag:</label>
        <input type="text" id="txtSearchTag" ng-model="ctrl.searchTag"
         class="form-control" required="required">
        <button class="form-control"
         ng-click="ctrl.service.loadImages(ctrl.searchTag)">Load
          images</button>
        <span class="pull-right">Number of hits: 
         {{ctrl.service.numberOfHits()}}</span>
      </div>
      <flickr-gallery data="ctrl.service.images" />
    </div>
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
      System.import('./dist/app').catch(console.error.bind(console));
    </script>
  </body>
</html>

Dieser Quelltext der Datei index.html enthält das Grundgerüst der Applikation und bettet die benötigten externen Quellen ein. Der Kopfbereich head referenziert die benötigten CSS-Stylesheets. Im body folgen dann die Definition eines üblichen AngularJS-View-Gerüsts, das den verwendeten MainCtrl mit der Controller-As-Syntax aus AngularJS 1.3 einbindet. Darin enthalten sind die Steuerelemente und die ngRepeat-Direktive, die eine Direktive flickr-gallery wiederholt. Ansonsten sind keine weiteren JS-Dateien eingebunden, sondern lediglich der Verweis auf system.js und der erste Aufruf von System.import, der auf die Startdatei app.js aus dem Ordner dist verweist.

Diese Einstiegsdatei des Projektes sieht wie folgt aus:

import angular from 'angular';
import {FlickrService} from './services/flickrService';
import {MainCtrl} from './controllers/mainctrl';
import {FlickrGallery} from './directives/flickrGallery';
import {TitleHeaderStyler} from './filters/titleHeaderStyler';

var app = angular.module('AngularES6', []);
app.constant('baseURL', 'dist/');

app.service('FlickrService', FlickrService);
app.controller('MainCtrl', MainCtrl);
app.directive('flickrGallery', FlickrGallery);
app.filter('titleHeaderStyler', TitleHeaderStyler);

angular.element(document).ready(function() {
  angular.bootstrap(document, ['AngularES6']);
});

export {app};

Alle Angebote

Newsletter heise-Bot Push Push-Nachrichten

${intro} ${title}