Beispiellösung zu AngularJS, JSON und Helene Fischer

index.html

<!DOCTYPE html>

<html ng-app="bandapp">
	<head>
		<title>Künstlerinnen- und Künstlerseite</title>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/style.css">
	</head>
	
	<body>
	
		<div ng-controller="helloCtrl" id="hello">
			<!-- Hier arbeitet unser Controller -->
			{{ message }}
			<br><br>
			<input type="text" name="nachricht"
				ng-model="message" />
			<br><br>
			<button ng-click="wetteraendern()">Schönwetterknopf</button>
		</div>
		
		<div ng-controller="artistCtrl">
			<h1>{{ artistName }}</h1>
			<a href="{{ discogsPage }}">{{ discogsPage }}</a>
			<br>
			<p>
				{{ description }}
			</p>
		</div>
		
		<script src="js/libs/angular.min.js"></script>
		<script src="js/data.js"></script>
		<script src="js/app.js"></script>
	</body>
</html>

app.js

/**
*	@author: Jan G. Wieners
*/

// Unsere AngularJS-App
var app = angular.module("bandapp", []);

app.controller("helloCtrl", function($scope) {
	
	// Deklariere und initialisiere die Variable "message"
	// im Geltungsbereich des Controllers ($scope)
	$scope.message = "Pfui, fieses Wetter!";
	
	// Darstellung von Inhalten per JavaScript / jQuery:
	// $('#hello').text('Das Wetter ist schön!');
	
	$scope.wetteraendern = function() {
		$scope.message = "Endlich Frühling!";
	};
});

// Informationen zu Künstlerin / Künstler verarbeiten
app.controller("artistCtrl", function($scope) {
	
	// Variablen des Geltungsbereiches mit Daten verknüpfen
	$scope.artistName = artist.name;
	$scope.description = artist.profile;
	$scope.discogsPage = artist.uri;
	// URI = Uniform Resource Identifier
		// URL = Uniform Resource Locator
		// URN = Uniform Resource Name
});

data.js

// API-Dokumentation: http://www.discogs.com/developers/
// https://api.discogs.com/artists/1158421

var artist = {
   "profile":"German schlager-singer.\r\n\r\nShe was born 5 August 1984 in Krasnojarsk, Russia.\r\n",
   "releases_url":"https://api.discogs.com/artists/1158421/releases",
   "name":"Helene Fischer",
   "uri":"https://www.discogs.com/artist/1158421-Helene-Fischer",
   "urls":[
      "http://www.helene-fischer.de/farbenspiel/",
      "http://www.helenefischer-fanseite.de/",
      "http://en.wikipedia.org/wiki/Helene_Fischer",
      "https://www.facebook.com/pages/Helene-Fischer/116979245036021",
      "https://myspace.com/fischerhelene"
   ],
   "images":[
      {
         "uri":"",
         "height":487,
         "width":600,
         "resource_url":"",
         "type":"primary",
         "uri150":""
      },
      {
         "uri":"",
         "height":609,
         "width":600,
         "resource_url":"",
         "type":"secondary",
         "uri150":""
      },
      {
         "uri":"",
         "height":449,
         "width":600,
         "resource_url":"",
         "type":"secondary",
         "uri150":""
      },
      {
         "uri":"",
         "height":672,
         "width":448,
         "resource_url":"",
         "type":"secondary",
         "uri150":""
      },
      {
         "uri":"",
         "height":482,
         "width":400,
         "resource_url":"",
         "type":"secondary",
         "uri150":""
      },
      {
         "uri":"",
         "height":594,
         "width":396,
         "resource_url":"",
         "type":"secondary",
         "uri150":""
      },
      {
         "uri":"",
         "height":307,
         "width":350,
         "resource_url":"",
         "type":"secondary",
         "uri150":""
      }
   ],
   "resource_url":"https://api.discogs.com/artists/1158421",
   "id":1158421,
   "data_quality":"Needs Vote",
   "realname":"\u0415\u043b\u0435\u043d\u0430 \u041f\u0435\u0442\u0440\u043e\u0432\u043d\u0430 \u0424\u0438\u0448\u0435\u0440"
}

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.