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

Seite 3: Erklärung und Fazit

En détail

Mit den ES2015-Import-Anweisungen lassen sich externe Quellen entweder mit definiertem Alias, zum Beispiel dem Angular-Modul, oder einzelne Dateien mit einem relativen Verweis laden. Enthält der gewünschte Inhalt nur einen Default-Export, können die geschweiften Klammern wie beim Angular-Modul entfallen. Nachdem nun alle Beispielkonstrukte importiert sind, muss man sie wie üblich im Angular-Modul AngularES6 registrieren. Zum Abschluss findet ein manuelles Bootstrapping der Applikation statt. Alternativ lässt sich das automatische Bootstrapping nutzen, wofür das Attributs ng-app mit dem Modulnamen im HTML-Markup zu setzen ist.

Eine Besonderheit ist hierbei das Verwenden der Service-Methode von Angular. Der Grund dafür ist, dass sie eine Konstruktorfunktion entgegennimmt, die einer Klasse in ES2015 entspricht. Der FlickrService exportiert sie und verwendet eine constructor-Funktion, an die die Abhängigkeiten zu übergeben sind, in diesem Fall der $http-Service. Hervorzuheben ist auch das in Backticks dargestellte Quasi-Literal zur Definition der URL.

Damit lassen sich endlich mehrzeilige Strings in JavaScript definieren. Zudem kann man einen einfachen String auch – ähnlich wie in PHP – durch den Template-String ${WERT} mit Variablen kombinieren:

export class FlickrService {
  constructor($http) {
    this.$http = $http;
    this.images = [];
  }

  numberOfHits() {
    return this.images.length;
  }

  loadImages(searchTag) {
    var URL = `http://api.flickr.com/services/feeds
       /photos_public.gne?tags=${searchTag}&tagmode=any&format=json&
       jsoncallback=JSON_CALLBACK`;

    return this.$http
               .jsonp(URL)
               .then(response => {
                 this.images = response.data.items;
               });
  }
}

Ähnlich wie Services lassen sich auch Controller mit Klassen definieren:

export class MainCtrl {
  constructor(FlickrService) {
    this.images = [];
    this.searchTag = "AngularJS";
    this.service = FlickrService;
  }
}

Für die Definition einer Direktive ist jedoch auf eine Funktion zurückzugreifen. Statt einer Klasse wird nun mit der ES2015-Arrow-Function eine anonyme Funktion zurückgegeben. Sie wird zuvor in der lokalen Variable FlickrGallery abgelegt, die in der weiter oben gezeigten Import-Anweisung referenziert ist:

export let FlickrGallery = (baseURL) => {
  return {
    restrict: 'E',
    scope: {
      data: '=data'
    },
    templateUrl: baseURL + 'templates/flickrGallery.html'
  };
};

Das gleiche Vorgehen ist auch im Falle eines eigenen Filters zu wählen. Erneut weist der Entwickler die anonyme Funktion einer lokalen Variable zu, die sodann in der app.js Import-Anweisung Verwendung findet:

export let TitleHeaderStyler = () => {
  return (input) => {
    return input.toUpperCase();
  }
}

Fazit

Tipps und Tricks für AngularJS

Teil 1: Internationalisierung
Teil 2: ES2015
Teil 3: OAuth 2.0
Teil 4: Animationen
Teil 5: Transformationen und Interceptors
Teil 6: Backend-lose Entwicklung mit ngMockE2E
Teil 7: GUIs mit @ngrx/store (I)
Teil 8: GUIs mit @ngrx/store (II)

Außerdem: AngularJS 1.x und 2.0 mit dem Component Router parallel betreiben

Allein die Möglichkeit, endlich bestehenden Code auf mehrere Dateien aufzuteilen und sich nicht manuell um die Referenzierung der JavaScript-Dateien kümmern zu müssen, zeigt, wie hilfreich der Einsatz von ECMAScript 2015 sein kann. Dank Projekten wie 6to5 und Traceur lässt sich der neue Standard bereits nutzen, ohne Browser außen vor zu lassen, die noch nicht damit umgehen können.

Vildan Softic
ist als selbstständiger Berater und Softwareentwickler tätig. Der Fokus liegt dabei auf Single Page Applications mit diversen Frameworks sowie Desktop-Entwicklung mit .NET. In seinem aktuellen Buch "AngularJS: Moderne Webanwendungen und Single Page Applications mit JavaScript" behandelt er die vielen Seiten von Googles populärem SPA-Framework. (jul)

Alle Angebote

Newsletter heise-Bot Push Push-Nachrichten

${intro} ${title}