angular_nussschale

Angular.js in einer Nussschale

Ich habe diese Woche angefangen mein Angular Wissen zu vertiefen und alles Gelernte wild an mein Whiteboard zu kritzeln. Jetzt kommt für dich und für Zukunfts-mich ein knappes Nachschlagewerk der verwirrenden Teile von Angular. Dies ist keine vollständige Einführung. Eine gute Einführung zu Angular gibt es auf W3Schools und danach kann man sich in der Angular API Reference verlieren.

pfeildings

Was ist Angular?

Es ist ein JS Framework, das dein HTML mit neuen Attributen ausstattet. 

Es macht dein HTML dynamisch!

Einfach einbinden und so die Seite zum Angular Spielraum machen.

pfeildings

Angular Vokabeln

Angular basiert auf dem MVC Pattern. So bleibt das HTML Dokument die View und nichts Anderes. Daneben führt es noch weitere eigene Konzepte ein. Diese Konzepte verbergen sich hinter mehr oder weniger verwirrenden Wörtern, diese sollte man deshalb kennen. 

 

Modules 

Ein Module ist eine Teilfunktion einer Webapp. Ein Controller gehört immer zu einem Module. Laut Konvention sollte jedes eigenständige Feature in einem eigenen Module stehen. Es scheint, dass die App an sich meistens ein Module ist, das alle anderen Modules in den eckigen Klammern einbindet.

Einem Module kann man dann controller, directives, filter und mehr hinzufügen.

Hier sind die vorgefertigten Angular Modules: https://docs.angularjs.org/api/ng/type/angular.Module

Hier sind populäre Third Party Modules: http://ngmodules.org/

 

Directives

Alles was im HTML mit ng- beginnt (ng-app, ng-bind, ng-repeat…) ist ein Directive. Manche sind von Angular, aber man kann auch eigene erstellen. Nur in Directives wird das DOM geändert.

Hier sind alle Angular Directives: https://docs.angularjs.org/api/ng/directive

 

Services

Ein Service ist ein Objekt mit ausgelagertem Code, der sich in der ganzen App einbinden lässt. Oft für Kommunikation zwischen Controllern genutzt. Wie bei den Modules gibt es schon einige vordefinierte Modules von Angular ($location, $http, $timeout …).

Hier sind alle Angular Services: https://docs.angularjs.org/api/ng/service

 

Filter

Filter sind recht selbsterklärend. Wieder gibt es einige von Angular (lowecase, uppercase, orderBy …), aber man kann auch selbst welche erstellen.

 

pfeildings

Anderes

Es gibt natürlich noch mehr Konzepte, doch das sind die schwierigsten und/oder meist genutzten. Weitere jetzt noch einmal ganz kurz:

Expressions: Diese Klammern {{ variable }} drucken Angular in dein HTML.

Provider: Services, Value, Factory und Constant sind spezielle Arten eines Providers. Ein Provider stellt Sachen zur Verfügung.

Scopes: Durch die $scope Variable hat man im HTML Zugriff auf Daten im Controller. Es gibt auch $rootScope.

Routing: Mit dem Module ngRoute lässt sich eine echte Single Page App zaubern. Allgemein gibt es viel über die bereitgestellten Modules zu lernen. Neben ngRoute vor Allem noch ngAnimate.

AJAX: Funktioniert in Angular über den $http Service. Auch hier lohnt sich ein Blick auf die angebotenen Services.

Angular Functions: Hier eine Sammlung von Hilfsfunktionen, die Angular bereitstellt. (z.B. angular.toJson() ).

 

Einführung zu Angular auf W3Schools .

Alle Infos in der Angular API Reference .

pfeildings

Das solls auch schon gewesen sein! 

*testet neue Grafikkarte*