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.
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.
<html ng-app="tutorialApp">
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.
// In die eckigen Klammern kommen abhängige Modules
var app = angular.module('myApp', ["ngRoute"]);
app.filter('greet', function() {
return function(name) {
return 'Hello, ' + name + '!';
};
});
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.
app.directive('name', function(){
return {
template: '<h1>Hello</h1>'
}
});
<!--output bei beiden eine Hello Überschrift --> <name></name> <div name>
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 …).
app.factory("myService", function () {
return {
myImportantValue: 42
};
});
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.
app.filter('myFilter', function() {
return function(x) {
//redundanter Filter aber egal
return x.toUpperCase();
};
});
<div ng-app="myApp" ng-controller="personCtrl">
<!--
Einen Namen aus dem Controller mit dem Pipesymbol durch den custom Filter jagen und dann einfügen -->
<ul ng-repeat="name in names">
<li>{{ name | myFilter }}</li>
</ul>
</div>
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 .
Das solls auch schon gewesen sein!
*testet neue Grafikkarte*