<!DOCTYPE html>
<html ng-app="APP">
<head>
<!-- AngularJS & Module-->
<script data-require="angular.js@1.3.0-rc.4" data-semver="1.3.0-rc.4" src="https://code.angularjs.org/1.3.0-rc.4/angular.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.0-rc.4/angular-route.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.0-rc.4/i18n/angular-locale_de-ch.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/angular.translate/2.4.0/angular-translate.min.js"></script>
<!-- jQuery & Bootstrap -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" href="style.css" />
<link rel="stylesheet" href="http://bootswatch.com/flatly/bootstrap.min.css" />
<!-- Eigene Scripts & CSS -->
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="mainController">
<div>
<a href="#/">Startseite</a> | <a href="#/config">Konfiguration</a> | <a ng-click="changeLang('de')">DE</a> | <a ng-click="changeLang('en')">EN</a>
<hr />{{lang}}
<div ng-view></div>
</div>
</body>
</html>
var APP = angular.module('APP',['ngRoute', 'pascalprecht.translate']);
/* Übersetzungstabellen */
/* Wetter Codes auf http://openweathermap.org/weather-conditions */
angular.module('APP').config(function ($translateProvider) {
$translateProvider.translations('de', {
APP_HEADLINE : 'Deine Wetterstationen',
APP_SEARCH : 'Suche',
500 : 'Leichter Regen',
501 : 'Regen',
502 : 'Intensiver Regen',
503 : 'Starkregen',
504 : 'Heftige Regenfälle',
511 : 'Eisregen',
520 : 'Leichte Schauer',
521 : 'Schauer',
522 : 'Starke Schauer',
531 : 'Was auch immer',
701 : 'Nebel',
711 : 'Rauch',
721 : 'Dunst',
731 : 'Sandnebel',
741 : 'Dichter Nebel',
751 : 'Sand',
761 : 'Dunst',
762 : 'Vulkanasche',
771 : 'Sturmböen',
781 : 'Tornado',
800 : 'Klarer Himmel',
801 : 'Leicht bewölkt',
802 : 'Wolkig',
803 : 'Bewölkt',
804 : 'Meist bewölkt'
});
$translateProvider.translations('en', {
APP_HEADLINE : 'Your weather stations',
APP_SEARCH : 'Search',
500 : 'light rain',
501 : 'moderate rain',
502 : 'heavy intensity rain',
503 : 'very heavy rain',
504 : 'extreme rain',
511 : 'freezing rain',
520 : 'light intensity shower rain',
521 : 'shower rain',
522 : 'heavy intensity shower rain',
531 : 'ragged shower rain',
701 : 'mist',
711 : 'smoke',
721 : 'haze',
731 : 'sand, dust whirls',
741 : 'fog',
751 : 'sand',
761 : 'dust',
762 : 'volcanic ash',
771 : 'squalls',
781 : 'tornado',
800 : 'clear sky',
801 : 'few clouds',
802 : 'scattered clouds',
803 : 'broken clouds',
804 : 'overcast clouds'
});
$translateProvider.preferredLanguage('de');
});
/* Routing*/
/* https://docs.angularjs.org/api/ngRoute/service/$route#example */
angular.module('APP').config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'viewIndex.html',
controller: 'indexController'
});
$routeProvider.when('/config', {
templateUrl: 'viewConfig.html',
controller: 'configController'
});
});
/* Direktive weatherWidget */
/* https://docs.angularjs.org/guide/directive */
APP.directive('weatherWidget', function ($http) {
var directive = {};
directive.restrict = 'E';
directive.scope = {
station: "=station"
}
directive.templateUrl = 'weatherWidget.html';
directive.compile = function (element, attributes) {
var linkFunction = function ($scope, element, atttributes) {
$http.jsonp('http://api.openweathermap.org/data/2.5/weather?callback=JSON_CALLBACK&lang=de&units=metric&id=' + $scope.station['code'])
.success(function (data, status, headers, config) {
$scope.station['data'] = data;
$scope.station['data']['datum'] = new Date();
return data;
})
.error(function (data, status, headers, config) {
console.log('Fehler aufgetreten...');
});
}
return linkFunction;
}
return directive;
});
/* Controller für vieIndex.html */
APP.controller('indexController', ['$scope', function($scope){
$scope.search= '';
}]);
/* Controller für viewConfig.html */
APP.controller('configController', ['$scope', function($scope){
$scope.newStation = {
'label' : '',
'code' : '',
'active' : true
}
$scope.addStation = function(){
$scope.MyWeatherStations.push($scope.newStation);
$scope.newStation = {
'label' : '',
'code' : '',
'active' : true
}
}
}]);
/* Hauptcontroller */
APP.controller('mainController', function ($scope, $translate) {
$scope.changeLang = function(lang){
$translate.use(lang);
}
$scope.MyWeatherStations = [
{
'label': 'Zürich',
'code': '2657896',
'active':true
}, {
'label': 'Hamburg',
'code': '2911298',
'active': false
}, {
'label': 'Oberurnen',
'code': '2658684',
'active': true
}, {
'label': 'Bozen',
'code': '3181913',
'active': true
}, {
'label': 'Altendorf',
'code': '2661776',
'active': true
}, {
'label': 'Marrakech',
'code': '2542997',
'active': true
}, {
'label': 'Athen',
'code': '264371',
'active': true
}, {
'label': 'Basel',
'code': '2661604',
'active': false
}, {
'label': 'Genf',
'code': '2660646',
'active': false
}, {
'label': 'Bern',
'code': '2661552',
'active': false
}
];
});
body{
margin:10px;
}
a{
cursor: pointer;
}
.weatherWidget{
border: 1px solid silver;
display: inline-block;
float: left;
margin-right:20px;
margin-bottom: 20px;
width: 175px;
height: 195px;
padding: 10px;
text-align: center;
}
<h1>{{ 'APP_HEADLINE' | translate }}</h1>
<input type="text" ng-model="search" size="20" placeholder="{{ 'APP_SEARCH' | translate }}" /><br />
<hr />
<weather-widget station="station" ng-repeat="station in MyWeatherStations | filter:{ 'active' : true, 'label':search } | orderBy: 'label'"></weather-widget>
<h1>Deine Wetterstationen</h1>
<ul>
<li ng-repeat="weatherStation in MyWeatherStations">
<input type="checkbox" ng-model="weatherStation.active" /> {{weatherStation.label}}
</li>
<input type="text" ng-model="newStation.code" size="5" placeholder="Code"/>
<input type="text" ng-model="newStation.label" size="10" placeholder="City" />
<button type="button" ng-click="addStation()" class="btn btn-sm btn-success">Success</button>
</ul>
<div class="weatherWidget">
<h4>{{station.label}}</h4>
<h6>{{station.data.datum | date:"shortDate"}}</h6>
<img ng-src="http://openweathermap.org/img/w/{{station.data.weather[0].icon}}.png" />
<h5>{{station.data.main.temp_min |number:1}}° / {{station.data.main.temp_max |number:1}}°</h5>
<h6>{{station.data.weather[0].id.toString() | translate}}</h6>
</div>
AngularJS Workshop
A weather app with directive and http
Description of the weather API
http://openweathermap.org/api
Link list to all needed documentations on AngularJS
- https://docs.angularjs.org/api/ng/directive/ngRepeat
- https://docs.angularjs.org/guide/directive
- http://angularjs.de/artikel/angularjs-i18n-ng-translate
- https://docs.angularjs.org/api/ng/service/$http