SVG ist eine Spezifikation, mit der ihr Vektorgrafiken erstellen und in HTML einbetten könnt.
💡 Keine Lust zu lesen?
Nicht jeder lernt am besten aus Büchern und Artikeln. Lernen darf interaktiv sein und Spaß machen. Wir bieten dir auch Angular Intensiv-Schulungen an, um dich möglichst effektiv in das Thema Angular zu begleiten. Im Kurs kannst du die Fragen stellen, die du nur schlecht googeln kannst, z.B. "Besserer Weg, um meine Applikation zu strukturieren?". Wir können sie dir beantworten.
- ✔ Öffentliche Termine verfügbar
- ✔ Vor Ort, als auch Remote
- ✔ Deutsch/Englisch möglich
Dieses Beispiel inspiriert euch hoffentlich, SVG kreativ mit AngularJS zu nutzen. Mit nur wenigen Zeilen könnt ihr eine Analog-Uhr mit SVG und AngularJS erstellen.
In der HTML-Datei erstellen wir 3 Zeiger für Stunden, Minuten und Sekunden. Per JavaScript und AngularJS berechnen wir jede Sekunde die korrekte Rotation der Zeiger.
HTML (index.html):
<html ng-app="cookbookApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
<script src="application.js"></script>
</head>
<body ng-controller="MainController">
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<g>
<circle style="stroke: #ccc; fill: #fff;" cx="100" cy="100" r="100" />
<line
x1="100"
y1="100"
x2="100"
y2="50"
style="stroke-width: 5px; stroke: #333;"
ng-attr-transform="rotate({{hourRotation}} 100 100)"
/>
<line
x1="100"
y1="100"
x2="100"
y2="20"
style="stroke-width: 3px; stroke: #888;"
ng-attr-transform="rotate({{minuteRotation}} 100 100)"
/>
<line
x1="100"
y1="100"
x2="100"
y2="5"
style="stroke-width: 2px; stroke: #bb0000;"
ng-attr-transform="rotate({{secondRotation}} 100 100)"
/>
</g>
</svg>
</body>
</html>JavaScript (application.js):
angular
.module("cookbookApp", [])
.controller("MainController", function ($scope, $interval) {
function calculateRotation() {
[[cta:training-bottom]]
var now = new Date();
$scope.hourRotation = (360 * now.getHours()) / 12;
$scope.minuteRotation = (360 * now.getMinutes()) / 60;
$scope.secondRotation = (360 * now.getSeconds()) / 60;
}
$interval(calculateRotation, 1000);
calculateRotation();
});
Sascha Brink
Gründer von Angular.DE
Überzeugter Webentwickler und seit über 15+ Jahren im IT-Umfeld tätig.
Sascha betreut regelmäßig Angular-Projekte und unterstützt Firmen bei der Ausbildung ihrer Mitarbeiter. Im Jahr 2013 hat er die Platform AngularJS.DE gestartet um das Framework in Deutschland bekannter zu machen. Sascha gibt Angular- und JavaScript-Schulungen auf deutsch und englisch.
Werde Teil unserer Community
Seit 2013 bieten wir Tutorials, Artikel und Schulungen rund um Angular. Mit 18 Meetups und über 10.000 Entwickler:innen sind wir die größte Angular-Community in Europa.
Jetzt beitretenWeitere Artikel
Was sind Angular und AngularJS?
Was sind die Unterschiede zwischen Angular und AngularJS?
Migration AngularJS zu Angular
Migration mit ngUpgrade leichtgemacht. Eine Zusammenfassung über alle wichtigen Schritte, wie ihr eure AngularJS App zu einer Angular App migrieren könnt.
Migration AngularJS zu Angular [Video]
Angular Version >2.x kommt … und es macht alles anders! Ist das wirklich so? Was hat das für meine Anwendung zu bedeuten? Mehr darüber in diesem Artikel!
