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, damit du tiefer in die Thematik einsteigen kannst.
Mehr Informationen zur Angular-Schulung
Dieses Beispiel inspiriert euch hoffentlich, ein wenig kreativ mit AngularJS zu werden. 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.
Weitere 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!
