js4j-advanced.yaml

---
title: JavaScript For Java Developers (advanced part)
trainersSecret: asd123
slides:
  - id: opening
    name: Hello World
    title: JS 4 Java Devs (Advanced edition)
    left:
      text: |
          <h3>
            Hello <span class="user-name"></span>!
          </h3>
          <h2>
            <a href="http://devmeetings.pl"><img src="http://blacksoft.eu/files/devmeetings_240.png"></a>
            rocks!
          </h2>
      code:
        small: true
        hideOutput: true
        content: |
          var username = localStorage.getItem('name');
          while (!username) {
            username = prompt("Please provide your name");
          }
          localStorage.setItem('name', username);
          document.querySelector('.user-name').innerText = username;
    right:
      text:
          >
          <div class="text-center">
            <a href="http://pl.tinypic.com?ref=oa2mbk" target="_blank">
              <img src="http://i39.tinypic.com/oa2mbk.png" alt="Image and video hosting by TinyPic" width="400">
            </a>
          </div>
  - id: details
    name: Details
    title: Advanced workshop details
    text: |
      <h3>
      <span class="glyphicon glyphicon-ok text-success"></span>
      The sad thing is that you guys a bit on your own:)</h3>
      <h3>
      <span class="glyphicon glyphicon-ok text-success"></span>
      Try to focus on the slides that I'm presenting to others</h3>
      <h3>
      <span class="glyphicon glyphicon-ok text-success"></span>
      However at the same time try to read this slides</h3>

      <h1 class="text-success text-center">Good luck!</h1>

  - id: setup
    name: Environment
    text: |
        <h2>By now you should have following software installed.</h2>
        <h3>
          <span class="glyphicon glyphicon-ok text-success"></span>
          GIT
        </h3>
        <h3>
          <span class="glyphicon glyphicon-ok text-success"></span>
          Node.js
        </h3>
        <h3>
          <span class="glyphicon glyphicon-ok text-success"></span>
          Play! Framework
        </h3>
        <h3>
          <span class="glyphicon glyphicon-ok text-success"></span>
          Sublime Text
        </h3>
        <h3>
          <span class="glyphicon glyphicon-ok text-success"></span>
          Eclipse
        </h3>
        <br>
        <h4 class="text-muted">If you are missing something approach me during break</h4>

  - id: run
    name: Run
    title: Clone project & install dependencies
    text: |
        <h3>Invoke in console:</h3>
        <h5>
          <span class="glyphicon glyphicon-saved text-muted"></span>
          <a href="http://todr.me/files/devmeetings-js4j.zip">Download ZIP file with project</a>
        </h5>
    code:
      language: generic
      content: |
        $ svn co https://svne1.access.nsn.com/isource/svnroot/NetEngDevCommons/javascript/devmeetings-js4j
        # OR 
        $ git svn clone https://svne1.access.nsn.com/isource/svnroot/NetEngDevCommons/javascript/devmeetings-js4j

        # AND THEN invoke when you are in project directory
        $ npm install -g bower
        $ npm install
        $ bower install

  - id: run2
    name: Run
    title: Run Forest, Run!
    text: |
        <h3>Invoke in console:</h3>
        <pre class="editor big"><code>$ play run

        [info] Loading project definition from /share/public_html/devmeetings/Todos/project
        [info] Set current project to Todos (in build file:/share/public_html/devmeetings/Todos/)

        --- (Running the application from SBT, auto-reloading is enabled) ---

        [info] play - Listening for HTTP on /0:0:0:0:0:0:0:0:9000

        (Server started, use Ctrl+D to stop and go back to the console...)
        </code></pre>
        <h3>Open <a href="http://localhost:9000" target="page">localhost:9000</a> <span class="glyphicon glyphicon-new-window text-muted"></span> </h3>

  - id: tooling
    name: JS Tooling
    title: JS Tooling - Grunt
    text: |
      <h2>You should already know <code>Grunt</code> one of the JS tools that we use on daily basis.</h2>
      <br>
      <h3>In <code>Gruntfile.js</code> I've created basic configuration that includes</h3>
      <h3>
        <span class="glyphicon glyphicon-ok text-success"></span>
        JSLint - for static code checking
      </h3>
      <h3>
        <span class="glyphicon glyphicon-ok text-success"></span>
        Jasmine - for writing and running JS unit tests
      </h3>

  - id: tooling2
    name: JS Tooling
    title: JS Tooling - Bower
    text: |
      <div class="pull-right">
        <img src="http://bower.io/img/bower-logo.png" title="Bower" width="150"/>
      </div>
      <h2>
        <a href="http://bower.io">Bower</a>
        <span class="glyphicon glyphicon-new-window text-muted"></span>
        is a simple package manager for Web Development.
      </h2>
      <br>
      <h3>Instead of downloading packages like <code>Backbone.js</code> or <code>Bootstrap</code> you can just tell bower to download them for you!</h3>
      <h3>Bower configuration is stored in <code>.bowerrc</code> and packages need by your project are in <code>bower.json</code></h3>
    code:
      language: generic
      content: |
        # This will install bootstrap and jquery (it's dependency) and save dependency to bower.json
        $ bower install bootstrap --save

        # You can also search for packages if you don't know the name
        $ bower search angular
    notes: |
      Bower is just downloading github repository to specified directory.

  - id: angular
    name: Angular.js
    title: Angular.js - Introduction
    text: |
      <h3 class="text-muted">
        <span class="glyphicon glyphicon-new-window"></span>
        <a href="http://angularjs.org">
          Angular.js
        </a>
        Superheroic JavaScript MVW Framework
      </h3>
      <br>
      <h2>
        <span class="glyphicon glyphicon-book text-muted"></span>
        <a href="http://docs.angularjs.org/">
          Angular.js docs
        </a>
      </h2>
      <h2>
        <span class="glyphicon glyphicon-book text-muted"></span>
        <a href="http://docs.angularjs.org/tutorial/">
          Angular.js tutorial
        </a>
      </h2>
  - id: angular1
    name: Angular.js
    title: Angular.js - Fist app
    fiddle:
      big: true
      html: |
        <!doctype html>
        <html lang="en" ng-app>
        <!-- ng-app is custom property from Angular that tells it to start -->
        <head>
          <meta charset="utf-8">
          <title>Hello Angular!</title>
          <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
        </head>
        <body>
          <!-- We can use {{ }} to invoke expressions with JS syntax -->
          <p>Nothing here {{'yet' + '!'}}</p>
         
        </body>
        </html>

  - id: angular-ctrl
    name: Angular.js
    title: Angular.js - Controller
    text: |
      <h2><code>Controllers</code> are a place in angular where your logic goes.</h2>
      <h2><code>$scope</code> is your data model - it's just pure JavaScript!</h2>
      <br>
      <h2>
        <span class="glyphicon glyphicon-ok"></span>
        <span class="text-success">
        Angular is automatically binding value of your variable with DOM!
        </span>
      </h2>
    fiddle:
      js: |
        window.MyFirstController = function($scope) {
          //unfortunatelly we can't use localStorage because of how auto-execution is working
          $scope.name = "Tomasz"; 
        };
      html: |
        <!doctype html>
        <html lang="en" ng-app>
        <!-- ng-app is custom property from Angular that tells it to start -->
        <head>
          <meta charset="utf-8">
          <title>Hello Angular!</title>
          <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
        </head>
        <!-- We specified that "body" tag and it's content is handled by MyFirstController -->
        <body ng-controller="MyFirstController">
          <!-- We can use {{ }} to print variable assigned to scope -->
          <p>Hello {{ name }}</p>
        </body>
        </html>

  - id: angular-ctrltest
    name: Angular.js
    title: Angular.js - Controller test
    text: |
      <h2>Angular is very testable. We can easily write a test in Jasmine for what we have.</h2>
      <h4>You can write your tests in <code>test/js/*Spec.js</code> files.</h4>
    code:
      language: javascript-norun
      content: |
        describe('Todos app', function() {
         
          describe('MyFirstController', function(){
         
            it('should assign name to scope', function() {
              var scope = {};
              MyFirstController(scope);
         
              expect(scope.name).toEqual("Tomasz");
            });

          });
        });

  - id: angular-ngrepeat
    name: Angular.js
    title: Angular.js - Looping
    text: |
      <h2>To iterate over array in Angular.js you can use <code>ng-repeat</code></h2>
      <h3>The element with attribute <code>ng-repeat</code> will be inserted multiple times</h3>
    fiddle:
      big: true
      active: html
      js: |
        window.MyFirstController = function($scope) {
          $scope.name = "Tomasz";
        };
      html: |
        <!doctype html>
        <html lang="en" ng-app>
        <!-- ng-app is custom property from Angular that tells it to start -->
        <head>
          <meta charset="utf-8">
          <title>Hello Angular!</title>
          <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
        </head>
        <!-- We specified that "body" tag and it's content is handled by MyFirstController -->
        <body ng-controller="MyFirstController">
          <h1>Hello</h1>
          <h2 ng-repeat="char in name" class="text-warning">
            {{ char }}
          </h2>
        </body>
        </html>

  - id: task-display
    name: Task 1
    title: "Task: Display todos using angular"
    code:
      small: true
      hideOutput: true
      content: |
        var todos = [
          "Checkout project from github",
          "Invoke 'play run' in your console",
          "Open your browser and head over to http://localhost:9000",
          "Learn Angular"
        ];
    task:
      duration: 45
      objectives:
        - Download <code>angular</code> using <code>bower</code>
        - Create <code>index.html</code> and <code>main.js</code>
        - Display todos using <code>.list-group</code> component
      extras:
        - Write test for scope
        - Introduce <code>Karma</code> and write E2E test.
      solution:
        fiddle:
          js: |
            window.MyFirstController = function($scope) {
              $scope.todos = [
                "Checkout project from github",
                "Invoke 'play run' in your console",
                "Open your browser and head over to http://localhost:9000",
                "Learn Angular"
              ];
            };
          html: |
            <!doctype html>
            <html lang="en" ng-app>
            <head>
              <meta charset="utf-8">
              <title>Hello Angular!</title>
              <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
            </head>
            <body ng-controller="MyFirstController">
              <h1>Hello</h1>
              <div class="list-group">
                <a ng-repeat="todo in todos" class="list-group-item">
                  {{ todo }}
                </a>
              </div>
            </body>
            </html>

  - id: angular-dom
    name: ng DOM
    title: DOM binding
    text: |
      <h2>Using <code>ng-click</code> allows you to invoke function that is exposed in <code>$scope</code></h2>
    fiddle:
      big: true
      js: |
        window.MyFirstController = function($scope) {
          $scope.name = "Tomasz";

          var showAlert = function() {
            alert('Me not called :(');
          };

          $scope.showAlert = function() {
            alert($scope.name);
          };
        };
      html: |
        <!doctype html>
        <html lang="en" ng-app>
        <!-- ng-app is custom property from Angular that tells it to start -->
        <head>
          <meta charset="utf-8">
          <title>Hello Angular!</title>
          <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
        </head>
        <!-- We specified that "body" tag and it's content is handled by MyFirstController -->
        <body ng-controller="MyFirstController">
          <!-- We can use {{ }} to print variable assigned to scope -->
          <p>Hello {{ name }}</p>
          <!-- ng-click is a directive that allows you to specify action that will happen when you click a button -->
          <button class="btn btn-default" ng-click="showAlert()">Alert me!</button>
        </body>
        </html>

  - id: angular-domawesome
    name: ng DOM
    title: DOM binding awesomeness!
    text: |
      <h2>
        <span class="glyphicon glyphicon-ok"></span>
        <span class="text-success">
        Angular.js has two-ways binding with DOM!
        </span>
      </h2>
      <h2>Imagine doing that in <code>Backbone</code>!</h2>
    fiddle:
      big: true
      js: |
        window.MyFirstController = function($scope) {
          $scope.name = "Tomasz";

          $scope.showAlert = function() {
            alert($scope.name);
          };
        };
      html: |
        <!doctype html>
        <html lang="en" ng-app>
        <head>
          <meta charset="utf-8">
          <title>Hello Angular!</title>
          <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
        </head>
        <body ng-controller="MyFirstController">
          <!-- We can use {{ }} to print variable assigned to scope -->
          <p>Hello {{ name }}</p>

          <div class="form-group">
            <!-- We can bind input box with variables inside your model! Awesome! -->
            <input type="text" class="form-control" ng-model="name" placeholder="Enter your name">

            <!-- ng-click is a directive that allows you to specify action that will happen when you click a button -->
            <button class="btn btn-default" ng-click="showAlert()">Alert me!</button>
          </div>
        </body>
        </html>

  - id: angular-module
    name: ng Module
    title: Code organization
    text: |
      <h2>
        Instead of doing global variables for controllers we can organize the code into <code>modules</code>
      </h2>
    fiddle:
      big: true
      js: |
        var app = angular.module('todosApp', 
          [] /* other modules dependencies */);
        app.controller('TodosController', function($scope) {

          $scope.todos = ["Checkout project from github",
            "Invoke 'play run' in your console",
            "Open your browser and head over to http://localhost:9000",
            "Learn Angular"
          ].join("\n");

        });
      html: |
        <!doctype html>
        <!-- We have to tell which module is an entry-point -->
        <html lang="en" ng-app="todosApp">
        <head>
          <meta charset="utf-8">
          <title>Hello Angular!</title>
          <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
        </head>
        <body ng-controller="TodosController">
          <div class="form-group">
            <textarea ng-model="todos" rows="5" cols="65" class="form-control">
            </textarea>
          </div>
          <div>
            <h3 ng-repeat="todo in todos.split('\n')">
              <span class="glyphicon glyphicon-ok text-success"></span>
              {{ todo }}
            </h3>
          </div>
        </body>
        </html>

  - id: angular-watch
    name: ng Watching
    title: Watching for changes
    text: |
      <h2>
        <span class="glyphicon glyphicon-ok"></span>
        <span class="text-success">You can use <code>$watch</code> to monitor changes of variable value.</span>
      </h2>
    fiddle:
      big: true
      js: |
        var app = angular.module('someApp', []);
        app.controller('MyFirstController', function($scope) {
          $scope.isToUpper = false;
          $scope.name = "Tomasz";

          $scope.$watch('isToUpper', function() {
            if ($scope.isToUpper) {
              $scope.name = $scope.name.toUpperCase();
            } else {
              $scope.name = $scope.name.toLowerCase();
            }
          });
        });
      html: |
        <!doctype html>
        <html lang="en" ng-app="someApp">
        <head>
          <meta charset="utf-8">
          <title>Hello Angular!</title>
          <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
        </head>
        <body ng-controller="MyFirstController">
          <!-- We can use {{ }} to print variable assigned to scope -->
          <p>Hello {{ name }}</p>

          <div class="form-group">
            <!-- We can bind input box with variables inside your model! Awesome! -->
            <input type="text" class="form-control" ng-model="name" placeholder="Enter your name">
            <br />
            <!-- We just use ng-model:) -->
            <label class="checkbox">
              <input type="checkbox" ng-model="isToUpper">
              Show in uppercase
            </label>
          </div>
        </body>
        </html>

  - id: task-state
    name: Task 2 & 3
    title: "Task: Displaying todos state"
    task:
      duration: 40
      objectives:
        - Display todos completed state with checkbox
        - Clicking on todo should change checkbox state
      extras:
        - Keyboard support via Tab, Shift+Tab and Space
        - E2E test
      solution:
        fiddle:
          big: true
          js: |
            var app = angular.module("todosApp", []);
            app.controller('TodosController',  function($scope) {
              $scope.todos = [
                {
                  title: "Checkout project from github",
                  completed: true
                }, {
                  title: "Invoke 'play run' in your console",
                  completed: true
                }, {
                  title: "Open your browser and head over to http://localhost:9000",
                  completed: false
                }, {
                  title: "Learn Angular",
                  completed: false
                }
              ];
            });
          html: |
            <!doctype html>
            <html lang="en" ng-app="todosApp">
            <head>
              <meta charset="utf-8">
              <title>Hello Angular!</title>
              <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
            </head>
            <body ng-controller="TodosController">
              <div class="list-group">
                <label ng-repeat="todo in todos" class="list-group-item">
                  <div class="checkbox">
                    <input type="checkbox" ng-model="todo.completed" />
                    {{ todo.title }}
                  </div>
                </label>
              </div>
            </body>
            </html>
  - id: angular-ngshow
    name: ng Visibility
    title: Angular.js - Controlling Visibility
    text: |
      <h2>
        <span class="glyphicon glyphicon-ok"></span>
        <span class="text-success">
          By using <code>ng-show</code> and <code>ng-hide</code> you can controll which elements are displayed.
        </span>
      </h2>
    fiddle:
      big: true
      active: html
      js: |
        var app = angular.module('someApp', []);
        app.controller('MyFirstController', function($scope) {
          $scope.isToUpper = false;
          $scope.name = "Tomasz";

          $scope.$watch('isToUpper', function() {
            if ($scope.isToUpper) {
              $scope.name = $scope.name.toUpperCase();
            } else {
              $scope.name = $scope.name.toLowerCase();
            }
          });
        });
      html: |
        <!doctype html>
        <html lang="en" ng-app="someApp">
        <head>
          <meta charset="utf-8">
          <title>Hello Angular!</title>
          <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
        </head>
        <body ng-controller="MyFirstController">
          <p>
            Hello {{ name }}
            <span ng-show="isToUpper">in UPPER case</span>
            <span ng-hide="isToUpper">in lower case</span>
          </p>

          <div class="form-group">
            <input type="text" class="form-control" ng-model="name" placeholder="Enter your name">
            <br />
            <label class="checkbox">
              <input type="checkbox" ng-model="isToUpper">
              Show in uppercase
            </label>
          </div>
        </body>
        </html>
  - id: angular-ngif
    name: ng Visibility
    title: Angular.js - Switching elements
    text: |
      <h2>
        <span class="glyphicon glyphicon-ok"></span>
        <span class="text-success">
          Using <code>ng-if</code> controlls which elements are actually in DOM.
        </span>
      </h2>
      <h3>
        <span class="text-warning">Tip:</span>
        Using <code>ng-show</code> and <code>ng-hide</code> results in better user experience faster GUI
      </h3>
      <h3>
        <span class="text-danger">Tip:</span>
        Unless you have too much elements in DOM - in this case using <code>ng-if</code> could result in better overall performance of your website.
      </h3>
    fiddle:
      big: true
      active: html
      js: |
        var app = angular.module('someApp', []);
        app.controller('MyFirstController', function($scope) {
          $scope.isToUpper = false;
          $scope.name = "Tomasz";

          $scope.$watch('isToUpper', function() {
            if ($scope.isToUpper) {
              $scope.name = $scope.name.toUpperCase();
            } else {
              $scope.name = $scope.name.toLowerCase();
            }
          });
        });
      html: |
        <!doctype html>
        <html lang="en" ng-app="someApp">
        <head>
          <meta charset="utf-8">
          <title>Hello Angular!</title>
          <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
        </head>
        <body ng-controller="MyFirstController">
          <p>
            Hello {{ name }}
            <span ng-if="isToUpper">in UPPER case</span>
            <span ng-if="!isToUpper">in lower case</span>
          </p>

          <div class="form-group">
            <input type="text" class="form-control" ng-model="name" placeholder="Enter your name">
            <br />
            <label class="checkbox">
              <input type="checkbox" ng-model="isToUpper">
              Show in uppercase
            </label>
          </div>
        </body>
        </html>
  - id: angular-ngswitch
    name: ng Visibility
    title: Angular.js - Switching elements via <code>ng-switch</code>
    text: |
      <h2>
        <span class="glyphicon glyphicon-ok"></span>
        <span class="text-success">
          <code>ng-switch</code> is like replacing bunch of if-else statements with switch-case.
        </span>
      </h2>
    fiddle:
      big: true
      active: html
      js: |
        var app = angular.module('someApp', []);
        app.controller('MyFirstController', function($scope) {
          $scope.isToUpper = null;
          $scope.name = "Tomasz";

          $scope.$watch('isToUpper', function() {
            if ($scope.isToUpper) {
              $scope.name = $scope.name.toUpperCase();
            } else {
              $scope.name = $scope.name.toLowerCase();
            }
          });
        });
      html: |
        <!doctype html>
        <html lang="en" ng-app="someApp">
        <head>
          <meta charset="utf-8">
          <title>Hello Angular!</title>
          <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
        </head>
        <body ng-controller="MyFirstController">
          <p>
            Hello {{ name }}
            <span ng-switch="isToUpper">
              <span ng-switch-when="true">in UPPER case</span>
              <span ng-switch-when="false">in lower case</span>
              <span ng-switch-default>when undefined</span>
            </span>
          </p>

          <div class="form-group">
            <input type="text" class="form-control" ng-model="name" placeholder="Enter your name">
            <br />
            <label class="checkbox">
              <input type="checkbox" ng-model="isToUpper">
              Show in uppercase
            </label>
          </div>
        </body>
        </html>

  - id: task-add
    name: Task 4
    title: "Task: Adding new todos"
    task:
      duration: 30
      objectives:
        - Adding new todos using form with button
      extras:
        - Keyboard support - hitting Enter in input box should add todo
        - Editing todos in-place - Clicking edit icon should change todo to input (<code>ng-show</code>)
      solution:
        fiddle:
          big: true
          js: |
            var app = angular.module("todosApp", []);
            app.controller('TodosController',  function($scope) {
              //it could be done in ng-init
              $scope.editing = {};

              $scope.todos = [
                {
                  title: "Invoke 'play run' in your console",
                  completed: true
                }, {
                  title: "Learn Angular",
                  completed: false
                }
              ];
              $scope.newTodoTitle = "Buy beer";
              $scope.addTodo = function() {
                var title = $scope.newTodoTitle;
                if (!title) return;

                $scope.todos.push({
                  title: title,
                  completed: false
                });
                $scope.newTodoTitle = "";
              };
            });
          html: |
            <!doctype html>
            <html lang="en" ng-app="todosApp">
            <head>
              <meta charset="utf-8">
              <title>Hello Angular!</title>
              <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
            </head>
            <body ng-controller="TodosController">
              <div class="list-group">
                <div ng-repeat="todo in todos" class="list-group-item">
                  <input type="text" class="form-control" 
                    ng-model="todo.title" ng-show="editing[$index]" ng-blur="editing[$index] = false" />
                  <label class="checkbox" ng-hide="editing[$index]">
                    <a href="" class="pull-right text-muted" ng-click="editing[$index] = !editing[$index]">
                      <span class="glyphicon glyphicon-pencil"></span>
                    </a>
                    <input type="checkbox" ng-model="todo.completed" />
                    {{ todo.title }}
                  </label>
                </div>
              </div>
              <form ng-submit="addTodo()">
                <input type="text" ng-model="newTodoTitle" placeholder="Buy beer" class="form-control"/>
                <button class="btn btn-default">
                  <span class="glyphicon glyphicon-plus"></span>
                  Add todo
                </button>
              </form>
            </body>
            </html>

  - id: angular-expressions
    name: ng Expressions
    title: Angular.js - Expressions
    text: |
      <h2>
        <span class="glyphicon glyphicon-ok"></span>
        <span class="text-success">
          Angular
          <a href="http://docs.angularjs.org/guide/expression">
          Expressions
          </a> <span class="glyphicon glyphicon-book text-muted"></span>
          are very similar to JS expressions.
        </span>
      </h2>
      <h3>
        You can reference variables, invoke functions and perform some operations.
      </h3>
    fiddle:
      js: |
        angular.module("todosApp", [])
          .controller("TodosController", function($scope) {

          $scope.world = 'Tomasz';

          //Click on checkbox and note
          // that undefined is not displayed
          $scope.isUpper = undefined;

          $scope.isUpperLabel = function() {
            if ($scope.isUpper) {
              return 'isUPPER';
            }
            return 'isLower';
          };
        });
      html: |
          <!doctype html>
          <html lang="en" ng-app="todosApp">
          <head>
            <meta charset="utf-8">
            <title>Hello Angular!</title>
            <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
          </head>
          <body ng-controller="TodosController">
            <h2>{{ "Hello " + world }}</h2>
            <h2 class="text-success">3 + 4 = {{ 3 + 4 }}</h2>
            <h2>isUpper: {{ isUpper }}</h2>
            <h3>
              <label class="checkbox">
                <input type="checkbox" ng-model="isUpper" />
                {{ isUpperLabel() }}
                {{ iAmUndefinedYetNoError() }}
              </label>
            </h3>
          </body>
          </html>
  - id: angular-filters
    name: ng Filters
    title: Angular.js - Filters
    text: |
      <h2>
        <span class="glyphicon glyphicon-ok"></span>
        <span class="text-success">
          In expressions you can use 
          <a href="http://docs.angularjs.org/guide/filter">
          Filters 
          </a> <span class="glyphicon glyphicon-book text-muted"></span>
          by using pipe operator <code>|</code>
        </span>
      </h2>
    fiddle:
      big: true
      js: |
        angular.module("todosApp", [])
          .controller("TodosController", function($scope) {

          $scope.world = 'Tomasz';

          //Click on checkbox and note
          // that undefined is not displayed
          $scope.isUpper = undefined;

          $scope.isUpperLabel = function() {
            if ($scope.isUpper) {
              return {
                text: 'isUPPER'
              };
            }
            return 'isLower';
          };
        });
      html: |
          <!doctype html>
          <html lang="en" ng-app="todosApp">
          <head>
            <meta charset="utf-8">
            <title>Hello Angular!</title>
            <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
          </head>
          <body ng-controller="TodosController">
            <h2>{{ "Hello " + world | uppercase }}</h2>
            <h2 class="text-success">3 + 4 = {{ 3 + 4 | currency }}</h2>
            <h2>isUpper: {{ isUpper | number }}</h2>
            <h3>
              <label class="checkbox">
                <input type="checkbox" ng-model="isUpper" />
                {{ isUpperLabel() | json }}
                {{ iAmUndefinedYetNoError() }}
              </label>
            </h3>
          </body>
          </html>

  - id: angular-filters-filter
    name: ng Filters
    title: Angular.js - "filter" Filter :)
    text: |
      <h2>
        <span class="glyphicon glyphicon-ok"></span>
        <span class="text-success">
          Angular.js gives you very usefull <code>Filter</code> for arrays called 
          <a href="http://docs.angularjs.org/api/ng.filter:filter">filter</a>
          <span class="glyphicon glyphicon-book text-muted"></span>
        </span>
      </h2>
      <h4>
        <span class="text-warning">Tip:</span>
        You can write your own filters
      </h4>
    fiddle:
      big: true
      active: html
      js: |
        angular.module("todosApp", [])
          .controller("TodosController", function($scope) {

          $scope.something = [{
            a: 5,
            text: "has matching",
            m: true
          },{
            b: 3,
            text: "no matching",
            m: false
          }];

          $scope.matchesFunc = function(e) {
            return e.m;
          };
        }).filter("getPropFromFirst", function(){
          return function(input, property) {
            return input[0][property];
          }
        });
      html: |
          <!doctype html>
          <html lang="en" ng-app="todosApp">
          <head>
            <meta charset="utf-8">
            <title>Hello Angular!</title>
            <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
          </head>
          <body ng-controller="TodosController">
            <h2>Filter by property</h2>
            <h4 class="text-muted">
              {{ something | filter:{b:3} }}
            </h4>
            <h2>Filter by any text</h2>
            <h4 class="text-muted">
              {{ something | filter:"has" }}
            </h4>
            <h2>Filter by function</h2>
            <h4 class="text-muted">
              {{ something | filter:matchesFunc }}
            </h4>
            <h2>Custom filter</h2>
            <h4 class="text-muted">
              {{ something | getPropFromFirst:"text" }}
            </h4>
          </body>
          </html>

  - id: task-showhide
    name: Task 5
    title: "Task: Show / hide completed todos"
    task:
      duration: 20
      objectives:
        - Add checkbox to show/hide completed todos
        - Use <code>filter</code> for that
      extras:
        - Display summary of completed / uncompleted todos
        - Display progress bar <a href="http://angular-ui.github.io/bootstrap/">angular-ui</a> <span class="glyphicon glyphicon-new-window"></span>
      solution:
        fiddle:
          big: true
          js: |
            var app = angular.module("todosApp", ['ui.bootstrap']);
            app.controller('TodosController',  function($scope) {
              //it could be done in ng-init
              $scope.editing = {};

              $scope.todos = [
                {
                  title: "Invoke 'play run' in your console",
                  completed: true
                }, {
                  title: "Learn Angular",
                  completed: false
                }
              ];

              $scope.newTodoTitle = "Buy beer";
              $scope.hideCompleted = false;

              $scope.addTodo = function() {
                var title = $scope.newTodoTitle;
                if (!title) return;

                $scope.todos.push({
                  title: title,
                  completed: false
                });
                $scope.newTodoTitle = "";
              };
              $scope.getTodosFilter = function() {
                  var filter = {};
                  !$scope.hideCompleted || (filter['completed'] = false);
                  return filter;
              };
            });
          html: |
            <!doctype html>
            <html lang="en" ng-app="todosApp">
            <head>
              <meta charset="utf-8">
              <title>Hello Angular!</title>
              <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
              <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.9.0/ui-bootstrap-tpls.js"></script>
            </head>
            <body ng-controller="TodosController">
              <div class="list-group">
                <div ng-repeat="todo in todos | filter:getTodosFilter()" class="list-group-item">
                  <input type="text" class="form-control" 
                    ng-model="todo.title" ng-show="editing[$index]" ng-blur="editing[$index] = false" />
                  <label class="checkbox" ng-hide="editing[$index]">
                    <a href="" class="pull-right text-muted" ng-click="editing[$index] = !editing[$index]">
                      <span class="glyphicon glyphicon-pencil"></span>
                    </a>
                    <input type="checkbox" ng-model="todo.completed" />
                    {{ todo.title }}
                  </label>
                </div>
              </div>
              <div>
                Completed: 
                {{ (todos | filter:{completed:true}).length }} /
                {{ todos.length }}
                <!-- Angular is blocking insecure url so below is not working, but it should :)
                <progressbar max="todos.length" value="(todos | filter:{completed:true}).length">{{ (todos | filter:{completed:false}).length }} left</progressbar>
                -->
              </div>
              <form ng-submit="addTodo()">
                <label class="checkbox">
                  <input type="checkbox" ng-model="hideCompleted" />
                  Hide completed todos
                </label>
                <input type="text" ng-model="newTodoTitle" placeholder="Buy beer" class="form-control"/>
                <button class="btn btn-default">
                  <span class="glyphicon glyphicon-plus"></span>
                  Add todo
                </button>
              </form>
            </body>
            </html>
  - id: angular-injector
    name: ng Injector
    title: Angular.js - Where does <code>$scope</code> come from?
    text: |
      <h2>
        <span class="glyphicon glyphicon-ok"></span>
        <span class="text-success">
          Angular is using Dependency Injection pattern
        </span>
      </h2>
      <h3>
        By parsing <code>toString</code> representation of function of your controller angular.js can determine what dependencies are you using.
      </h3>
      <h4>
        <span class="text-danger">Tip:</span>
        You can use more explicit injection to support minification and custom names of dependencies
      </h4>
    fiddle:
      big: true
      js: |
        angular.module("todosApp", [])
          .controller("TodosController", 
          // You can use [] syntax or just set $inject property on function
            ["$scope", "filterFilter", "$http", function($scope, filter, $http) {
          $scope.something = [{
            a: 5,
            text: "has matching",
            m: true
          },{
            b: 3,
            text: "no matching",
            m: false
          }];
          $scope.filtered = filter($scope.something, {
            a: 5
          });
          $http.jsonp('https://api.github.com?callback=JSON_CALLBACK').then(function(data){
            $scope.text = data.data.data.current_user_url;
          });
        }]);
      html: |
          <!doctype html>
          <html lang="en" ng-app="todosApp">
          <head>
            <meta charset="utf-8">
            <title>Hello Angular!</title>
            <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
          </head>
          <body ng-controller="TodosController">
            <h2>Filtered in Ctrl</h2>
            <h4 class="text-muted">
              {{ filtered }}
            </h4>
            <h2>Text</h2>
            <h4 class="text-muted">
              <a ng-href="text">{{ text }}</a>
            </h4>
          </body>
          </html>
  - id: angular-services
    name: ng Services
    title: Angular.js - Services
    text: |
      <h2>
        <span class="glyphicon glyphicon-ok"></span>
        <span class="text-success">
          Services are like injectable utility classes <span class="text-danger"><span class="glyphicon glyphicon-asterisk"></span></span>
        </span>
      </h2>
      <h4>
        In last example we have injected <code>$http</code> service that is similar to jQuery <code>$.ajax</code>
      </h4>
      <h4>
        <span class="glyphicon glyphicon-ok"></span>
        <span class="text-success">
          It's easy to mock services in tests and reuse in different controllers
        </span>
      </h4>
    fiddle:
      big: true
      js: |
        angular.module("todosApp", [])
          .controller("TodosController", 
            ["$scope", "filterFilter", "DataService", function($scope, filter, Data) {
          $scope.something = Data.getSomeData();
          $scope.filtered = filter($scope.something, {
            a: 5
          });
          Data.getGithubApi().then(function(data){
            $scope.text = data.data.data.current_user_url;
          });
        // We create factory of services using app.factory method
        }]).factory('DataService', ["$http", function($http) {
          return {
            getSomeData: function() {
              return [{
                a: 5,
                text: "has matching",
                m: true
              },{
                b: 3,
                text: "no matching",
                m: false
              }];
            },
            getGithubApi: function() {
              return $http.jsonp('https://api.github.com?callback=JSON_CALLBACK');
            }
          }
        }]);
      html: |
          <!doctype html>
          <html lang="en" ng-app="todosApp">
          <head>
            <meta charset="utf-8">
            <title>Hello Angular!</title>
            <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
          </head>
          <body ng-controller="TodosController">
            <h2>Filtered in Ctrl</h2>
            <h4 class="text-muted">
              {{ filtered }}
            </h4>
            <h2>Text</h2>
            <h4 class="text-muted">
              <a ng-href="text">{{ text }}</a>
            </h4>
          </body>
          </html>

  - id: task-localStorage
    name: Task 6
    title: "Task: Persistence via LocalStorage"
    task:
      duration: 30
      objectives:
        - Use <code>localStorage</code> to add persistence to your application
        - Create <code>Service</code> to hide complexity
      extras:
        - Use <code>$window</code> service instead of using <code>localStorage</code>
        - Use <code>$q</code> service to return promises from your service
      solution:
        fiddle:
          big: true
          js: |
            var app = angular.module("todosApp", ['ui.bootstrap']);
            app.controller('TodosController',  ['$scope', 'Todos', function($scope, Todos) {
              //it could be done in ng-init
              $scope.editing = {};

              Todos.getTodos().then(function(todos){
                $scope.todos = todos;
              });

              $scope.newTodoTitle = "Buy beer";
              $scope.hideCompleted = false;

              $scope.addTodo = function() {
                var title = $scope.newTodoTitle;
                if (!title) return;

                $scope.todos.push({
                  title: title,
                  completed: false
                });
                Todos.saveTodos($scope.todos).then(function(){
                  console.log("Todos saved");
                });
                $scope.newTodoTitle = "";
              };
              $scope.getTodosFilter = function() {
                  var filter = {};
                  !$scope.hideCompleted || (filter['completed'] = false);
                  return filter;
              };
            }]);
            app.factory('Todos', ['$q', '$window', '$timeout', function($q, $window, $timeout) {
              /* It does not work because of runner in browser. It should work in your case.
               * var localStorage = $window.localStorage;
               */
              var localStorage = {
                setItem: function(){},
                getItem: function(){}
              };
              return {
                getTodos: function() {
                  var d = $q.defer();
                  //$timeout is only to show that it works;)
                  $timeout(function() {
                    var todos = localStorage.getItem('todos') || "[]";
                    d.resolve(angular.fromJson(todos));
                  }, 2000);
                  return d.promise;
                },
                saveTodos: function(todos) {
                  var d = $q.defer();
                  var todosStr = angular.toJson(todos);
                  localStorage.setItem('todos', todosStr);
                  d.resolve();
                  return d.promise;
                }
              };
            }]);
          html: |
            <!doctype html>
            <html lang="en" ng-app="todosApp">
            <head>
              <meta charset="utf-8">
              <title>Hello Angular!</title>
              <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
              <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.9.0/ui-bootstrap-tpls.js"></script>
            </head>
            <body ng-controller="TodosController">
              <div class="list-group">
                <div ng-repeat="todo in todos | filter:getTodosFilter()" class="list-group-item">
                  <input type="text" class="form-control" 
                    ng-model="todo.title" ng-show="editing[$index]" ng-blur="editing[$index] = false" />
                  <label class="checkbox" ng-hide="editing[$index]">
                    <a href="" class="pull-right text-muted" ng-click="editing[$index] = !editing[$index]">
                      <span class="glyphicon glyphicon-pencil"></span>
                    </a>
                    <input type="checkbox" ng-model="todo.completed" />
                    {{ todo.title }}
                  </label>
                </div>
              </div>
              <div>
                Completed: 
                {{ (todos | filter:{completed:true}).length }} /
                {{ todos.length }}
              </div>
              <form ng-submit="addTodo()">
                <label class="checkbox">
                  <input type="checkbox" ng-model="hideCompleted" />
                  Hide completed todos
                </label>
                <input type="text" ng-model="newTodoTitle" placeholder="Buy beer" class="form-control"/>
                <button class="btn btn-default">
                  <span class="glyphicon glyphicon-plus"></span>
                  Add todo
                </button>
              </form>
            </body>
            </html>

  - id: task-rest
    name: Task 7
    title: "Task: Write REST API in Play! and use it for persistence"
    task:
      duration: 60
      objectives:
        - Implement REST API for Todos in Play!
        - Change <code>localStorage</code> persistence to REST API
      extras:
        - Write tests and mock <code>$http</code> service (<a href="http://docs.angularjs.org/api/ngMock.$httpBackend">angular-mock</a> <span class="glyphicon-new-window glyphicon"></span>)

  - id: angular-directives
    name: ng Directives
    title: Angular.js - Directives
    text: |
      <h3>
        Have you wondered what all those <code>ng-something</code> attributes are?
      </h3>
      <h2>
        <span class="glyphicon glyphicon-ok"></span>
        <span class="text-success">
          <a href="http://docs.angularjs.org/guide/directive">Directive</a>
          <span class="glyphicon glyphicon-book text-muted"></span>
          is a glue between DOM and your models (JS code)
        </span>
      </h2>
    fiddle:
      big: true
      js: |
        angular.module("todosApp", [])
          .controller("TodosController", 
            ["$scope", function($scope) {
              $scope.text = 'Directives are soo cool!';
        }]).directive('successText', function() {
          return {
            // Avoid using "template" use "templateUrl" instead
            // it allows you to store html in it's own file
            template: '<span class="glyphicon glyphicon-ok"></span> '+
                      '<span class="text-success">{{ text }}</span>'
          };
        });
      html: |
          <!doctype html>
          <html lang="en" ng-app="todosApp">
          <head>
            <meta charset="utf-8">
            <title>Hello Angular!</title>
            <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
          </head>
          <body ng-controller="TodosController">
            <h2 success-text>
            </h2>
            <p success-text>
            </p>
          </body>
          </html>
  - id: angular-directives2
    name: ng Directives
    title: Angular.js - Directive with it's own scope
    text: |
      <h4 class="text-muted">
        What happened in Vegas stays in Vegas
      </h4>
      <h2>
        <code>$scope</code> is similar to JS function scope
      </h2>
      <h2>
        <span class="glyphicon glyphicon-ok"></span>
        <span class="text-success">
        You can isolate directive from context where it is used
        </span>
      </h2>
    fiddle:
      big: true
      js: |
        angular.module("todosApp", [])
          .controller("TodosController", 
            ["$scope", function($scope) {
              $scope.ctrlText = 'Directives are soo cool!';
        }]).directive('successText', function() {
          return {
            // Use as a custom element instead of attribute
            restrict: 'E', 
            // Create your own scope and bind "text" attribute
            // to "text" variable
            scope: {
              text: '='
            },
            template: '<span class="glyphicon glyphicon-ok"></span> '+
                      '<span class="text-success">{{ text }}</span>'
          };
        });
      html: |
          <!doctype html>
          <html lang="en" ng-app="todosApp">
          <head>
            <meta charset="utf-8">
            <title>Hello Angular!</title>
            <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
          </head>
          <body ng-controller="TodosController">
            <h2>
              <success-text text="ctrlText"></success-text>
            </h2>
            <!-- This is expression so we need to use '' -->
            <success-text text="'Oh yes, they are.'">
            </success-text>
          </body>
          </html>

  - id: task-directive
    name: Task 8
    title: "Task: Close single todo inside directive"
    task:
      duration: 30
      objectives:
        - Create directive <code>&lt;todo&gt;</code> that displays single todo
      extras:
        - Editing of todo should be handled inside directive
        - Write <code>EventBus</code> from JS4J training
      solution:
        fiddle:
          big: true
          js: |
            var app = angular.module("todosApp", ['ui.bootstrap']);
            app.directive('todo', function(){
              return {
                restrict: 'E',
                scope: {
                  todo: '='
                },
                // Normally you should use "templateUrl" to put it to separate file
                template: '<div class="list-group-item">' +
                  '<input type="text" class="form-control" '+
                  '  ng-model="todo.title" ng-show="editing" ng-blur="editing = false" />'+
                  '<label class="checkbox" ng-hide="editing">'+
                  '  <a href="" class="pull-right text-muted" ng-click="editing = !editing">'+
                  '    <span class="glyphicon glyphicon-pencil"></span>'+
                  '  </a>'+
                  '  <input type="checkbox" ng-model="todo.completed" />'+
                  '  {{ todo.title }}'+
                  '</label>'+
               '</div>'
              };
            });
            app.controller('TodosController',  ['$scope', 'Todos', function($scope, Todos) {
              //it could be done in ng-init
              $scope.editing = {};

              Todos.getTodos().then(function(todos){
                $scope.todos = todos;
              });

              $scope.newTodoTitle = "Buy beer";
              $scope.hideCompleted = false;

              $scope.addTodo = function() {
                var title = $scope.newTodoTitle;
                if (!title) return;

                $scope.todos.push({
                  title: title,
                  completed: false
                });
                Todos.saveTodos($scope.todos).then(function(){
                  console.log("Todos saved");
                });
                $scope.newTodoTitle = "";
              };
              $scope.getTodosFilter = function() {
                  var filter = {};
                  !$scope.hideCompleted || (filter['completed'] = false);
                  return filter;
              };
            }]);
            app.factory('Todos', ['$q', '$window', '$timeout', function($q, $window, $timeout) {
              /* It does not work because of runner in browser. It should work in your case.
               * var localStorage = $window.localStorage;
               */
              var localStorage = {
                setItem: function(){},
                getItem: function(){}
              };
              return {
                getTodos: function() {
                  var d = $q.defer();
                  //$timeout is only to show that it works;)
                  $timeout(function() {
                    var todos = localStorage.getItem('todos') || "[]";
                    d.resolve(angular.fromJson(todos));
                  }, 2000);
                  return d.promise;
                },
                saveTodos: function(todos) {
                  var d = $q.defer();
                  var todosStr = angular.toJson(todos);
                  localStorage.setItem('todos', todosStr);
                  d.resolve();
                  return d.promise;
                }
              };
            }]);
          html: |
            <!doctype html>
            <html lang="en" ng-app="todosApp">
            <head>
              <meta charset="utf-8">
              <title>Hello Angular!</title>
              <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
              <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.9.0/ui-bootstrap-tpls.js"></script>
            </head>
            <body ng-controller="TodosController">
              <div class="list-group">
                <todo todo="todo" ng-repeat="todo in todos | filter:getTodosFilter()">
                </todo>
              </div>
              <div>
                Completed: 
                {{ (todos | filter:{completed:true}).length }} /
                {{ todos.length }}
              </div>
              <form ng-submit="addTodo()">
                <label class="checkbox">
                  <input type="checkbox" ng-model="hideCompleted" />
                  Hide completed todos
                </label>
                <input type="text" ng-model="newTodoTitle" placeholder="Buy beer" class="form-control"/>
                <button class="btn btn-default">
                  <span class="glyphicon glyphicon-plus"></span>
                  Add todo
                </button>
              </form>
            </body>
            </html>

  - id: task-survey
    name: Task 9
    title: "Task: Complete the survey"
    text: |
      <h2>
      <span class="glyphicon glyphicon-export text-muted"></span>
        <a href="http://bit.ly/js4java-nsn">
          Training Survey
        </a>
      </h2>
    task:
      duration: 10
      objectives:
        - Complete the survey under link above
      extras:
        - Provide very detailed answers to open-ended questions

  - id: coffeescript-teaser
    name: CoffeeScript
    title: CoffeeScript - syntactic sugar for JS
    monitor: x
    code:
      language: coffee
      content: |
        class Greeter
          constructor: (name) ->
            @setName name
          setName: (name) ->
            @name = name
          greet: ->
            "Hello " + @name

        g = new Greeter localStorage.getItem("name")
        x = g.greet()


#  - id: task9
#    name: Task 9
#    title: "Task: CoffeeScript rewriting"
#    task:
#      duration: 60
#      objectives:
#        - Rewrite your application to CoffeeScript
#      extras:
#        - Rewrite your tests to CoffeeScript
#        - Add search for todos
#      solution:
  - id: coffeescript-app
    name: CoffeeScript
    title: CoffeeScript - application
    fiddle:
      big: true
      coffee: |
        app = angular.module "todosApp", ['ui.bootstrap']
        app.directive('todo', ->
          {
            restrict: 'E'
            scope:
              todo: '='
            #Normally you should use "templateUrl" to put it to separate file
            template: '<div class="list-group-item">
              <input type="text" class="form-control"
                ng-model="todo.title" ng-show="editing" ng-blur="editing = false" />
              <label class="checkbox" ng-hide="editing">
                <a href="" class="pull-right text-muted" ng-click="editing = !editing">
                  <span class="glyphicon glyphicon-pencil"></span>
                </a>
                <input type="checkbox" ng-model="todo.completed" />
                {{ todo.title }}
              </label>
           </div>'
          }
        )
        app.controller('TodosController',  ['$scope', 'Todos', ($scope, Todos) ->
          #it could be done in ng-init
          $scope.editing = {}

          Todos.getTodos()
            .then (todos) ->
              $scope.todos = todos

          $scope.newTodoTitle = "Buy beer"
          $scope.hideCompleted = no

          $scope.addTodo = ->
            return if $scope.newTodoTitle is ''

            $scope.todos.push
              title: $scope.newTodoTitle
              completed: no

            Todos.saveTodos($scope.todos)
              .then ->
                console.log "Todos saved"

            $scope.newTodoTitle = ""

          $scope.getTodosFilter = ->
              if $scope.hideCompleted is yes
                completed: false
              else
                {}
        ])
        app.factory('Todos', ['$q', '$window', '$timeout', ($q, $window, $timeout) ->
          #It does not work because of runner in browser. It should work in your case.
          #var localStorage = $window.localStorage;

          localStorage =
            setItem: ->
            getItem: ->

          {
            getTodos: ->
              d = $q.defer()
              #$timeout is only to show that it works;)
              $timeout(->
                todos = localStorage.getItem('todos') ? "[]";
                d.resolve angular.fromJson(todos)
              , 2000)
              d.promise
            saveTodos: (todos) ->
              d = $q.defer()
              todosStr = angular.toJson todos
              localStorage.setItem 'todos', todosStr
              d.resolve()
              d.promise
          }
        ])
      html: |
        <!doctype html>
        <html lang="en" ng-app="todosApp">
        <head>
          <meta charset="utf-8">
          <title>Hello Angular!</title>
          <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
          <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.9.0/ui-bootstrap-tpls.js"></script>
        </head>
        <body ng-controller="TodosController">
          <div class="list-group">
            <todo todo="todo" ng-repeat="todo in todos | filter:getTodosFilter()">
            </todo>
          </div>
          <div>
            Completed: 
            {{ (todos | filter:{completed:true}).length }} /
            {{ todos.length }}
          </div>
          <form ng-submit="addTodo()">
            <label class="checkbox">
              <input type="checkbox" ng-model="hideCompleted" />
              Hide completed todos
            </label>
            <input type="text" ng-model="newTodoTitle" placeholder="Buy beer" class="form-control"/>
            <button class="btn btn-default">
              <span class="glyphicon glyphicon-plus"></span>
              Add todo
            </button>
          </form>
        </body>
        </html>
  - id: ending
    name: Ending
    title: How do you like Angular.js?
    text: |
      <div class="text-center">
        <a href="http://pl.tinypic.com?ref=oa2mbk" target="_blank">
          <img src="http://i39.tinypic.com/oa2mbk.png" alt="Image and video hosting by TinyPic" width="400">
        </a>
      </div>
      <h3 class="text-right">
        <span class="icon-mail text-muted"></span>
        <a href="mailto:tomasz.drwiega@gmail.com">tomasz.drwiega@gmail.com</a>
      </h3>
      <h3 class="text-right">
        <span class="icon-github text-muted"></span> <a href="https://github.com/tomusdrw" target="profile">github/tomusdrw</a>
        &nbsp;
        <span class="icon-google-plus text-muted"></span> <a href="https://plus.google.com/+TomaszDrwi%C4%99ga" target="profile">+Tomasz Drwięga</a>
        &nbsp;
        <span class="icon-linkedin text-muted"></span> <a href="http://www.linkedin.com/in/tomaszdrwiega" target="profile">in/Tomasz Drwięga</a>
      </h3>