AngularJS Workshop

Step by step to the next

by andreas_karz

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//bootswatch.com/flatly/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.angularjs.org/1.3.0-rc.4/i18n/angular-locale_de-ch.js"></script>
<div ng-controller="mainController">
    <div>
        <a href="#/">Startseite</a> | <a href="#/config">Konfiguration</a>
        <hr />    
        <div ng-view></div>
    </div>
    <script type="text/ng-template" id="index.html">
        <h1>Deine Wetterstationen</h1>
        <input type="text" ng-model="search" size="10" placeholder="Suche" /><br />
        <hr />
        <weather-widget station="station" ng-repeat="station in MyWeatherStations | filter:{ 'active' : true, 'label':search } | orderBy: 'label'"></weather-widget>
    </script>
    <script type="text/ng-template" id="config.html">
        <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"/>&nbsp;
            <input type="text" ng-model="newStation.label" size="10" placeholder="City" />&nbsp;
            <button type="button" ng-click="addStation()" class="btn btn-sm btn-success">Success</button>
            <span class="method" ng-click="addStation()">+</span>
        </ul>
    </script>
</div>

CSS

.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;
}


span.method {
    font-weight: bold;
    font-size: 1.5em;
    cursor: pointer;
}

JavaScript

// https://docs.angularjs.org/api/ng/filter/date
// https://docs.angularjs.org/guide/i18n
// https://code.angularjs.org/1.3.0-rc.4/i18n/

// http://angular-translate.github.io/docs/#/guide
// http://plnkr.co/edit/NmAYf9?p=info


var APP = angular.module('APP',[]);

APP.directive('weatherWidget', function ($http) {
    var directive = {};
    directive.restrict = 'E';
    directive.scope = {
        station: "=station"
    }
    directive.template = '<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}}° / {{station.data.main.temp_max}}°</h5><h6>{{station.data.weather[0].description}}</h6></div>';
    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();
                        console.log(data);
                        return data;
                    })
                    .error(function (data, status, headers, config) {
                        console.log('Fehler aufgetreten...');
            });
        }
        return linkFunction;
    }
    return directive;
});





APP.config(['$routeProvider', function($routeProvider){
    $routeProvider.when('/', {
        templateUrl: 'index.html',
        controller: 'indexController'
    });
    $routeProvider.when('/config', {
        templateUrl: 'config.html',
        controller: 'configController'
    });                
}]);
APP.controller('indexController', ['$scope', function($scope){
    $scope.search=...