JavaScript MVC Frameworks sind derzeit ein großes Thema, denn wir nutzten JavaScript um Daten vom Server hin und her zu schicken und implementieren immer mehr und mehr Logik welche im Browser ausgeführt wird.  Dies resultiert unter anderem auch aus der Entwicklung im Backend, wo immer öfters nur Daten in Form von JSON geliefert werden, anstatt fertiger Seiten zum Rendern im Browser. MVC Frameworks versprechen mehr Produktivität und Wartbarkeit, durch besser strukturierten Code in unserem Front-End.

Im Rahmen einer Lehrveranstaltung an der FH lernte ich das Front-End Framework AngularJS kennen. Dabei habe ich ein paar sehr interessante Konzepte gefunden.

Gefällt mir

Das Routing

Der $routeProvider in Angular ermöglicht es Views, Controller und die aktuelle URL im Browser zusammen zu bringen. Durch das setzten der verschiedenen URLs je View ist das Vor- und Zurücknavigieren trotz Single-page application im Browser möglich.

app.config(function($routeProvider){
  $routeProvider.when('/home', {
    templateUrl: 'partials/home.html',
    controller: 'homeController'
  });

  $routeProvider.when('/events', {
    templateUrl: 'partials/events.html',
    controller: 'eventsController'
  });

  $routeProvider.otherwise({ redirectTo: '/home' });

});

Wenn man also http://myAngularApp/#events im Browser lädt, lädt Angular das entsprechende Template in das vorher dafür definiert Element und ruft den dazugehörigen Controller auf in dem sich die Logik zur View befindet.

Neben diesen statischen URLs ist es auch möglich in der URL Parameter zu definieren.

$routeProvider.when('/event/:eventTitle', {
  templateUrl: 'partials/eventDetail.html',
  controller: 'eventDetailController'
});

Somit kann das selbe Template mit unterschiedlichen Daten gefüllt werden und man erhält eine individuelle URL, was sich beispielsweise sehr gut für Detailansichten eignet.

Die View

Die Directive ng-View ergänzt das $route Service indem es das Template der aktuellen Route in das Grundlayout einfügt. Das Attribut ng-view gibt also an, wo im HTML Gerüst das jeweils geladene Template gerendert werden soll. Immer wenn sich die Route ändert, ändert sich auch die View nach den Konfigurationen des $route Service wie oben beschrieben.

<section id="content" ng-view>

</section>

Die Templates

Die oben erwähnten Templates sind die HTML Segmente die routenabhängig in das HTML Grundgerüst geladen werden. Sie können in eigene Files ausgelagert werden oder in script tags mit dem typ text/ng-template im gleichen Dokument liegen.

Die double curly brace Notation {{ }} ermöglicht Datenbindung an Ausdrücke im Markup. Diese werden jederzeit upgedated wenn sich der dazugehörige Wert an den sie gebunden sind ändert.

<h1> {{ title }} </h1>

<p> {{ message }} </p>

Schleife im Markup

Die ng-repeat Direktive wiederholt das Element auf das sie gesetzt wurde für jedes Objekt im Model. Somit kann das Markup für eine Liste direkt im HTML einmal geschrieben werden und wird dann automatisch wiederholt. Für mich ist das eine sehr nützliche Funktion und schönere Variante, als das Markup im JavaScript File zu schreiben und es dann in einer Schleife im JavaScript erst an ein Element im DOM zu hängen.

<ul>

  <li ng-repeat="event in events">

    <h1> {{ event.title }} </h1>

    <p>  {{ event.date }} {{ event.location }}</p>

  </li>

</ul>

Gefällt mir nicht

Viele Direktiven im HTML

Neben den notwendigen Direktiven um Model, View und Controller ans HTML zu binden und der praktischen ng-repeat Funktionalität, gibt es eine Vielzahl an weiterer Direktiven die als Attribute ins HTML geschrieben werden um Funktionalitäten auszulösen.

Durch ng-show=”!myFuntkion()” können beispielsweise Elemente angezeigt oder verborgen werden je nach Wert einer Variable oder Rückgabewert einer Funktion.

ng-click ist eine gängige Methode in Angular um click Events an Elemente zu binden, diese und weitere Attribute wie novalidate, ng-submit, ng-minlength, ng-maxlength, ng-hide, ng-list ….. und viele viele mehr verlagern für meinen Geschmack viel zu viel Logik ins Markup.