Merge branch 'master' of github.com:addyosmani/todomvc into new-site

* 'master' of github.com:addyosmani/todomvc: (133 commits)
  Add media/PR assets created by @gf3
  Updating CanJS script references to new cdn.
  Add SocketStream to readme and site
  Set up redirect of the old labs site
  Add SocketStream app
  Fix for #224 - ExtJS app incorrectly linked up
  Update batman.js library in the batman example to 0.11.0.
  Close GH-193: updated troopjs-bundle.
  Fix clear completed button being unclickable
  Update old ember.js version, replaced with the latest unreleased available.
  Add handlebar.js to dependencies. Closes #217.
  Knockout: Code style
  Knockout: Convert back to tab indentation
  Knockout: Upgrade to 2.1.0
  Knockoutjs: Move Crossroads to the assets folder
  Filter 'All' highlight by default
  Fixing lines
  Knockout - routing with crossroad js
  Fix app footer bug in Opera 12
  Disable automatic Jekyll
  ...

Conflicts:
	architecture-examples/extjs/index.html
	assets/base.css
	index.html
	site/css/main.css

.editorconfig

+; editorconfig.org
 root = true
 
 [*]
 indent_style = tab
-indent_size = 4
 end_of_line = LF
\ No newline at end of file

README.md

-# TodoMVC
-
-#### A common learning application for popular JavaScript MV* frameworks
-
-
-## Introduction
-
-Developers these days are spoiled with choice when it comes to selecting an MV* framework for structuring and organizing JavaScript web apps. Backbone, Spine, Ember.js, AngularJS, JavaScriptMVC... The list of new and stable solutions goes on and on, but just how do you decide on which to use in a sea of so many options?
-
-To help solve this problem, TodoMVC was created - a project which offers the same Todo application implemented using MVC concepts in most of the popular JavaScript MV* frameworks of today. Solutions look and feel the same, have a common feature set, and make it easy for you to compare the syntax and structure of different frameworks, so you can select the one you feel the most comfortable with.
-
-
-#### Todo apps are included for:
-
-- [Backbone.js](http://documentcloud.github.com/backbone/)
-- [Backbone.js + RequireJS](http://requirejs.org) (using AMD)
-- [Ember.js](http://emberjs.com)
-- [Ember.js + RequireJS](http://emberjs.com) (using AMD)
-- [JavaScriptMVC](http://javascriptmvc.com)
-- [Spine.js](http://spinejs.com)
-- [KnockoutJS](http://knockoutjs.com) (MVVM)
-- [Knockback.js](http://kmalakoff.github.com/knockback/)
-- [Dojo](http://dojotoolkit.org)
-- [Closure](http://code.google.com/closure/library/)
-- [YUILibrary](http://yuilibrary.com)
-- [AngularJS](http://angularjs.org)
-- [Angular + PersistenceJS](http://persistencejs.org)
-- [Ext.js](http://www.sencha.com/products/extjs)
-- [Agility.js](http://agilityjs.com)
-
-###### Non MV*
-
-- jQuery
-- Vanilla JS
-
-#### Labs
-
-We also have a number of in-progress applications in our [Labs](http://addyosmani.github.com/todomvc/labs) site. These include:
-
-- [CanJS](http://canjs.us)
-- [Batman.js](http://batmanjs.org)
-- [Meteor](http://meteor.com)
-- [Google Web Toolkit](https://developers.google.com/web-toolkit/)
-- [Stapes.js](http://hay.github.com/stapes/)
-- [TroopJS](https://github.com/troopjs/)
-- [soma.js](http://somajs.github.com/somajs)
-- [Fun](https://github.com/marcuswestin/fun)
-- [DUEL](https://bitbucket.org/mckamey/duel/wiki/Home)
-- [Fidel](https://github.com/jgallen23/fidel)
-- [Olives](https://github.com/flams/olives)
-- [PlastronJS](https://github.com/rhysbrettbowen/PlastronJS)
-- [Dijon](https://github.com/creynders/dijon-framework)
-- [Sammy.js](http://sammyjs.org)
-- [rAppid](https://github.com/it-ony/rAppid.js)
-
-
-## Live demos
-
-Live demos are available on the official [TodoMVC site](http://todomvc.com).
-
-
-## Screenshot
-
-![screenshot](https://raw.github.com/addyosmani/todomvc/master/screenshot.png)
-
-
-## Team
-
-TodoMVC would not be possible without a strong team of [contributors](https://github.com/addyosmani/todomvc/contributors) helping push the project forward each day. In addition, we have a core project team composed of:
-
-* [Addy Osmani - Founder/Lead](http://github.com/addyosmani): Addy is a Developer Platform Engineer at Google who originally created TodoMVC. He oversees the project direction, drives expansion and helps lead core development with Sindre Sorhus (by far our most active contributor!).
-
-* [Sindre Sorhus - Lead Developer](https://github.com/sindresorhus): Sindre is a Web Developer who drives core development, quality control and application design for the project. His contributions have helped us ensure consistency and best practices are enforced wherever possible. 
-
-* [Aaron Boushley - on leave](https://github.com/boushley): Aaron is a JavaScript developer with a keen interest in architectural frameworks and has helped both standardize existing examples and improve the project as we worked on expansion. He is currently taking a break from his open-source contributions at this time.
-
-
-## Disclaimer
-
-TodoMVC has been called many things including the 'Speed-dating' and 'Rosetta Stone' of MV* frameworks. Whilst we hope that this project is able to offer assistance in deciding what frameworks are worth spending more time looking at, remember that the Todo application offers a limited view of what a framework may be capable of.
-
-It is meant to be used as a gateway to reviewing how a basic application using a framework may be structured and we heavily recommend investing time researching a solution in more depth before opting to use it.
-
-
-## Getting Involved
-
-Whilst we enjoy implementing and improving existing Todo apps, we're always interested in speaking to framework authors (and users) wishing to share Todo app implementations in their framework/solution of choice.
-
-If you have an implementation you would like to show us or a patch you would like to send upstream, please feel free to send through a pull request after reading our [contribution guidelines](https://github.com/addyosmani/todomvc/wiki) (in particular our [application specifications](https://github.com/addyosmani/todomvc/wiki/App-Specification)). One of us will be happy to review your submission and discuss any changes that may be required before they can be included.
-
-Note that due to the current number of MVC/MVVM/MV* frameworks in circulation at the moment, it's not always possible to include each one in TodoMVC, but we'll definitely discuss the merits of any framework prior to making a decision. We hope you understand :)
-
-
-## License
-
-Public Domain
\ No newline at end of file

architecture-examples/agilityjs/index.html

@@ -46,7 +46,6 @@
 	</section>
 	<footer id="info">
 		<p>Double-click to edit a todo</p>
-		<p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
 		<p>Created by <a href="http://github.com/tshm/todomvc/">Tosh Shimayama</a></p>
 	</footer>
 	<script src="../../assets/base.js"></script>

architecture-examples/angularjs-perf/index.html

+<!doctype html>
+<html lang="en" ng-app="todomvc">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <title>AngularJS - TodoMVC</title>
+  <link rel="stylesheet" href="../../assets/base.css">
+  <style>[ng-cloak] {display: none}</style>
+  <!--[if IE]>
+  <script src="../../assets/ie.js"></script>
+  <![endif]-->
+
+</head>
+<body>
+  <section id="todoapp" ng-controller="TodoCtrl">
+    <header id="header">
+      <h1>todos</h1>
+      <form id="todo-form" ng-submit="addTodo()">
+        <input id="new-todo" placeholder="What needs to be done?" ng-model="newTodo" autofocus>
+      </form>
+    </header>
+    <section id="main" ng-show="todos.length" ng-cloak>
+      <input id="toggle-all" type="checkbox" ng-model="allChecked" ng-click="markAll(allChecked)">
+      <label for="toggle-all">Mark all as complete</label>
+      <ul id="todo-list">
+        <li ng-repeat="todo in todos | filter:statusFilter" ng-dblclick="editTodo(todo)" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
+          <div class="view">
+            <input class="toggle" type="checkbox" ng-model="todo.completed" ng-change="todoCompleted(todo)">
+            <label>{{todo.title}}</label>
+            <button class="destroy" ng-click="removeTodo(todo)"></button>
+          </div>
+          <form ng-submit="doneEditing(todo)">
+            <input class="edit" ng-model="todo.title" todo-blur="doneEditing(todo)" todo-focus="todo == editedTodo">
+          </form>
+        </li>
+      </ul>
+    </section>
+    <footer id="footer" ng-show="todos.length" ng-cloak>
+      <span id="todo-count"><strong>{{remainingCount}}</strong>
+        <ng-pluralize count="remainingCount" when="{ one: 'item left', other: 'items left' }"></ng-pluralize>
+      </span>
+      <ul id="filters">
+        <li>
+          <a ng-class="{selected: location.path() == '/'} " href="#/">All</a>
+        </li>
+        <li>
+          <a ng-class="{selected: location.path() == '/active'}" href="#/active">Active</a>
+        </li>
+        <li>
+          <a ng-class="{selected: location.path() == '/completed'}" href="#/completed">Completed</a>
+        </li>
+      </ul>
+      <button id="clear-completed" ng-click="clearDoneTodos()" ng-show="remainingCount < todos.length">Clear completed ({{todos.length - remainingCount}})</button>
+    </footer>
+  </section>
+  <footer id="info">
+    <p>Double-click to edit a todo.</p>
+    <p>Credits:
+      <a href="http://twitter.com/cburgdorf">Christoph Burgdorf</a>,
+      <a href="http://ericbidelman.com">Eric Bidelman</a>,
+      <a href="http://jacobmumm.com">Jacob Mumm</a> and
+      <a href="http://igorminar.com">Igor Minar</a>
+    </p>
+  </footer>
+  <script src="../../assets/base.js"></script>
+  <script src="js/libs/angular/angular.min.js"></script>
+  <script src="js/app.js"></script>
+  <script src="js/controllers/todoCtrl.js"></script>
+  <script src="js/services/todoStorage.js"></script>
+  <script src="js/directives/todoFocus.js"></script>
+  <script src="js/directives/todoBlur.js"></script>
+</body>
+</html>

architecture-examples/angularjs-perf/js/app.js

+'use strict';
+
+/**
+ * The main TodoMVC app module.
+ *
+ * @type {angular.Module}
+ */
+var todomvc = angular.module('todomvc', []);

architecture-examples/angularjs-perf/js/controllers/todoCtrl.js

+'use strict';
+
+/**
+ * The main controller for the app. The controller:
+ * - retrieves and persist the model via the todoStorage service
+ * - exposes the model to the template and provides event handlers
+ */
+todomvc.controller( 'TodoCtrl', function TodoCtrl( $scope, $location, todoStorage, filterFilter ) {
+  var todos = $scope.todos = todoStorage.get();
+
+  $scope.newTodo = "";
+  $scope.remainingCount = filterFilter(todos, {completed: false}).length;
+  $scope.editedTodo = null;
+
+  if ( $location.path() === '' ) $location.path('/');
+  $scope.location = $location;
+
+  $scope.$watch('location.path()', function( path ) {
+    $scope.statusFilter = (path == '/active') ?
+    { completed: false } : (path == '/completed') ?
+    { completed: true } : null;
+  });
+
+  $scope.$watch('remainingCount == 0', function( val ) {
+    $scope.allChecked = val;
+  });
+
+
+  $scope.addTodo = function() {
+    if ($scope.newTodo.length === 0) return;
+
+    todos.push({
+      title: $scope.newTodo,
+      completed: false
+    });
+    todoStorage.put(todos);
+
+    $scope.newTodo = '';
+    $scope.remainingCount++;
+  };
+
+
+  $scope.editTodo = function( todo ) {
+    $scope.editedTodo = todo;
+  };
+
+
+  $scope.doneEditing = function( todo ) {
+    $scope.editedTodo = null;
+    if ( !todo.title ) $scope.removeTodo(todo);
+    todoStorage.put(todos);
+  };
+
+
+  $scope.removeTodo = function( todo ) {
+    $scope.remainingCount -= todo.completed ? 0 : 1;
+    todos.splice(todos.indexOf(todo), 1);
+    todoStorage.put(todos);
+  };
+
+
+  $scope.todoCompleted = function( todo ) {
+    todo.completed ? $scope.remainingCount-- : $scope.remainingCount++;
+    todoStorage.put(todos);
+  };
+
+
+  $scope.clearDoneTodos = function() {
+    $scope.todos = todos = todos.filter(function( val ) {
+      return !val.completed;
+    });
+    todoStorage.put(todos);
+  };
+
+
+  $scope.markAll = function( done ) {
+    todos.forEach(function( todo ) {
+      todo.completed = done;
+    });
+    $scope.remainingCount = done ? 0 : todos.length;
+    todoStorage.put(todos);
+  };
+});

architecture-examples/angularjs-perf/js/directives/todoBlur.js

+'use strict';
+
+/**
+ * Directive that executes an expression when the element it is applied to loses focus.
+ */
+todomvc.directive('todoBlur', function() {
+  return function( scope, elem, attrs ) {
+    elem.bind('blur', function() {
+      scope.$apply(attrs.todoBlur);
+    });
+  };
+});

architecture-examples/angularjs-perf/js/directives/todoFocus.js

+'use strict';
+
+/**
+ * Directive that places focus on the element it is applied to when the expression it binds to evaluates to true.
+ */
+todomvc.directive('todoFocus', function( $timeout ) {
+  return function( scope, elem, attrs ) {
+    scope.$watch(attrs.todoFocus, function( newval ) {
+      if ( newval ) {
+        $timeout(function() {
+          elem[0].focus();
+          elem[0].select();
+        }, 0, false);
+      }
+    });
+  };
+});

architecture-examples/angularjs-perf/js/services/todoStorage.js

+'use strict';
+
+/**
+ * Services that persists and retrieves TODOs from localStorage.
+ */
+todomvc.factory( 'todoStorage', function() {
+  var STORAGE_ID = 'todos-angularjs-perf';
+
+  return {
+    get: function() {
+      return JSON.parse(localStorage.getItem(STORAGE_ID) || '[]');
+    },
+
+    put: function( todos ) {
+      localStorage.setItem(STORAGE_ID, JSON.stringify(todos));
+    }
+  };
+});

architecture-examples/angularjs/css/app.css

-/*this doesn't seem to be used in the jquery example at all. Its getting in the way */
-#todo-count span {
-	font-weight: inherit;
-}
\ No newline at end of file

architecture-examples/angularjs/css/base.css

-html,
-body {
-	margin: 0;
-	padding: 0;
-}
-
-body {
-	font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
-	line-height: 1.4em;
-	background: #eeeeee;
-	color: #333333;
-	width: 520px;
-	margin: 0 auto;
-	-webkit-font-smoothing: antialiased;
-}
-
-#todoapp {
-	background: #fff;
-	padding: 20px;
-	margin-bottom: 40px;
-	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-	-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-	-o-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-	box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-	-webkit-border-radius: 0 0 5px 5px;
-	-moz-border-radius: 0 0 5px 5px;
-	-ms-border-radius: 0 0 5px 5px;
-	-o-border-radius: 0 0 5px 5px;
-	border-radius: 0 0 5px 5px;
-}
-
-#todoapp h1 {
-	font-size: 36px;
-	font-weight: bold;
-	text-align: center;
-	padding: 0 0 10px 0;
-}
-
-#todoapp input[type="text"] {
-	width: 466px;
-	font-size: 24px;
-	font-family: inherit;
-	line-height: 1.4em;
-	border: 0;
-	outline: none;
-	padding: 6px;
-	border: 1px solid #999999;
-	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-	-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-	-o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-	box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-}
-
-#todoapp input::-webkit-input-placeholder {
-	font-style: italic;
-}
-
-#todo-list {
-	margin: 10px 0;
-	padding: 0;
-	list-style: none;
-}
-
-#todo-list li {
-	padding: 18px 20px 18px 0;
-	position: relative;
-	font-size: 24px;
-	border-bottom: 1px solid #cccccc;
-}
-
-#todo-list li:last-child {
-	border-bottom: none;
-}
-
-#todo-list li.done label {
-	color: #777777;
-	text-decoration: line-through;
-}
-
-#todo-list li .destroy {
-	display: none;
-	position: absolute;
-	top: 20px;
-	right: 10px;
-	cursor: pointer;
-	width: 20px;
-	height: 20px;
-	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUBAMAAAB/pwA+AAAABGdBTUEAALGPC/xhBQAAACdQTFRFzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMAAAA////zMzMhnu0WAAAAAt0Uk5T5u3pqtV3jFQEKAC0bVelAAAAfUlEQVQI12NYtWpFsc8R865VqxhWrZpyBgg8QcylZ8AgCsjMgTCPrWJYfgYKqhjWwJgaDDVnzpw+c2bPmTPHGWzOnNm95/TuM2cOM/AARXfvBooeZAAp270bRCIz4QoOIGtDMqwJZoUEQzvCYrhzuhhWtUKYEahOX7UK6iEA3A6NUGwCTZIAAAAASUVORK5CYII=') no-repeat center center;
-}
-
-#todo-list li:hover .destroy {
-	display: block;
-}
-
-#todo-list li.editing {
-	border-bottom: none;
-	margin-top: -1px;
-	padding: 0;
-}
-
-#todo-list li.editing:last-child {
-	margin-bottom: -1px;
-}
-
-#todo-list li.editing .edit {
-	display: block;
-	width: 444px;
-	padding: 13px 15px 14px 20px;
-	margin: 0;
-}
-
-#todo-list li.editing .view {
-	display: none;
-}
-
-#todo-list li .view label {
-	word-break: break-word;
-}
-
-#todo-list li .edit {
-	display: none;
-}
-
-#todoapp footer {
-	margin: 0 -20px -20px -20px;
-	overflow: hidden;
-	color: #555555;
-	background: #f4fce8;
-	border-top: 1px solid #ededed;
-	padding: 0 20px;
-	line-height: 37px;
-	-webkit-border-radius: 0 0 5px 5px;
-	-moz-border-radius: 0 0 5px 5px;
-	-ms-border-radius: 0 0 5px 5px;
-	-o-border-radius: 0 0 5px 5px;
-	border-radius: 0 0 5px 5px;
-}
-
-#clear-completed {
-	float: right;
-	line-height: 20px;
-	text-decoration: none;
-	background: rgba(0, 0, 0, 0.1);
-	color: #555555;
-	font-size: 11px;
-	margin-top: 8px;
-	margin-bottom: 8px;
-	padding: 0 10px 1px;
-	cursor: pointer;
-	-webkit-border-radius: 12px;
-	-moz-border-radius: 12px;
-	-ms-border-radius: 12px;
-	-o-border-radius: 12px;
-	border-radius: 12px;
-	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-	-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-	-o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-	box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-}
-
-#clear-completed:hover {
-	background: rgba(0, 0, 0, 0.15);
-	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-	-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-	-ms-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-	-o-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-	box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-}
-
-#clear-completed:active {
-	position: relative;
-	top: 1px;
-}
-
-#todo-count span {
-	font-weight: bold;
-}
-
-#instructions {
-	margin: 10px auto;
-	color: #777777;
-	text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
-	text-align: center;
-}
-
-#instructions a {
-	color: #336699;
-}
-
-#credits {
-	margin: 30px auto;
-	color: #999;
-	text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
-	text-align: center;
-}
-
-#credits a {
-	color: #888;
-}
\ No newline at end of file

architecture-examples/angularjs/index.html

 <!doctype html>
-<html ng-app="todomvc">
+<html lang="en" ng-app="todomvc">
 <head>
   <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <title>AngularJS - TodoMVC</title>
-  <link rel="stylesheet" href="css/base.css">
-  <link rel="stylesheet" href="css/app.css">
+  <link rel="stylesheet" href="../../assets/base.css">
+  <style>[ng-cloak] {display: none}</style>
   <!--[if IE]>
   <script src="../../assets/ie.js"></script>
   <![endif]-->
+
 </head>
 <body>
-  <div ng-controller="App.Controllers.TodoController" id="todoapp">
-    <header>
-      <h1>Todos</h1>
+  <section id="todoapp" ng-controller="TodoCtrl">
+    <header id="header">
+      <h1>todos</h1>
       <form id="todo-form" ng-submit="addTodo()">
-        <input type="text" id="new-todo" name="newTodo" ng-model="newTodo" placeholder="What needs to be done?">
+        <input id="new-todo" placeholder="What needs to be done?" ng-model="newTodo" autofocus>
       </form>
     </header>
-    <section id="main" ng-show="todos.length">
-      <input type="checkbox" id="toggle-all" ng-click="markAllDone()" ng-checked="remainingTodos().length == 0">
+    <section id="main" ng-show="todos.length" ng-cloak>
+      <input id="toggle-all" type="checkbox" ng-model="allChecked" ng-click="markAll(allChecked)">
       <label for="toggle-all">Mark all as complete</label>
       <ul id="todo-list">
-        <li ng-repeat="todo in todos" ng-dblclick="editTodo(todo)" ng-class="{done: todo.done, editing: todo.editing}">
+        <li ng-repeat="todo in todos | filter:statusFilter" ng-dblclick="editTodo(todo)" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
           <div class="view">
-            <input type="checkbox" class="toggle" name="todo.done" ng-model="todo.done">
-            <label ng-bind="todo.title">Loading...</label>
-            <a class="destroy" ng-click="removeTodo(todo)"></a>
+            <input class="toggle" type="checkbox" ng-model="todo.completed">
+            <label>{{todo.title}}</label>
+            <button class="destroy" ng-click="removeTodo(todo)"></button>
           </div>
-          <form ng-submit="finishEditing(todo)">
-            <input type="text" class="edit" name="todo.title" ng-model="todo.title" my:blur="finishEditing(todo)">
+          <form ng-submit="doneEditing(todo)">
+            <input class="edit" ng-model="todo.title" todo-blur="doneEditing(todo)" todo-focus="todo == editedTodo">
           </form>
         </li>
       </ul>
     </section>
-    <footer ng-show="todos.length">
-      <a id="clear-completed" ng-click="clearDoneTodos()" ng-show="doneTodos().length" ng-bind-template="Clear {{doneTodos().length}} items"></a>
-      <div id="todo-count">
-        <ng-pluralize count="remainingTodos().length" when="todoForms"></ng-pluralize>
-      </div>
+    <footer id="footer" ng-show="todos.length" ng-cloak>
+      <span id="todo-count"><strong>{{remainingCount}}</strong>
+        <ng-pluralize count="remainingCount" when="{ one: 'item left', other: 'items left' }"></ng-pluralize>
+      </span>
+      <ul id="filters">
+        <li>
+          <a ng-class="{selected: location.path() == '/'} " href="#/">All</a>
+        </li>
+        <li>
+          <a ng-class="{selected: location.path() == '/active'}" href="#/active">Active</a>
+        </li>
+        <li>
+          <a ng-class="{selected: location.path() == '/completed'}" href="#/completed">Completed</a>
+        </li>
+      </ul>
+      <button id="clear-completed" ng-click="clearDoneTodos()" ng-show="doneCount">Clear completed ({{doneCount}})</button>
     </footer>
-  </div>
-  <div id="instructions">
-    Double-click to edit a todo.
-  </div>
-  <div id="credits">
-    Credits: <a href="http://twitter.com/cburgdorf">Christoph Burgdorf</a>, <a href="http://ericbidelman.com">Eric Bidelman</a>
-  </div>
+  </section>
+  <footer id="info">
+    <p>Double-click to edit a todo.</p>
+    <p>Credits:
+        <a href="http://twitter.com/cburgdorf">Christoph Burgdorf</a>,
+        <a href="http://ericbidelman.com">Eric Bidelman</a>,
+        <a href="http://jacobmumm.com">Jacob Mumm</a> and
+        <a href="http://igorminar.com">Igor Minar</a>
+     </p>
+  </footer>
   <script src="../../assets/base.js"></script>
-  <script src="js/booter.js"></script>
   <script src="js/libs/angular/angular.min.js"></script>
-  <script src="js/controllers.js"></script>
+  <script src="js/app.js"></script>
+  <script src="js/controllers/todoCtrl.js"></script>
+  <script src="js/services/todoStorage.js"></script>
+  <script src="js/directives/todoFocus.js"></script>
+  <script src="js/directives/todoBlur.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>

architecture-examples/angularjs/js/app.js

+'use strict';
+
+/**
+ * The main TodoMVC app module.
+ *
+ * @type {angular.Module}
+ */
+var todomvc = angular.module('todomvc', []);

architecture-examples/angularjs/js/booter.js

-var App = {};
-App.Controllers = {};

architecture-examples/angularjs/js/controllers.js

-/* App Controllers */
-
-var todomvc = angular.module('todomvc', []);
-
-App.Controllers.TodoController = function($scope) {
-  $scope.todos = retrieveStore();
-
-  // Call updateStore() whenever the todos array changes.
-  $scope.$watch('todos', updateStore, true);
-
-  $scope.todoForms = {
-    0: "You're done!",
-    one: '{} item left',
-    other: '{} items left'
-  };
-
-  function retrieveStore() {
-    var store = localStorage.getItem('todo-angularjs');
-    return (store && JSON.parse(store)) || [];
-  };
-
-  function updateStore() {
-    var isEditing = $scope.todos.filter(function(val) {
-      return val.editing;
-    }).length;
-
-    if (!isEditing) {
-      localStorage.setItem('todo-angularjs', JSON.stringify($scope.todos));
-    }
-  };
-
-  $scope.addTodo = function() {
-    if (this.newTodo.trim().length === 0) {
-      return;
-    }
-
-    $scope.todos.push({
-      title: this.newTodo,
-      done: false,
-      editing: false
-    });
-
-    this.newTodo = '';
-  };
-
-  $scope.editTodo = function(todo) {
-     //cancel any active editing operation
-    $scope.todos.forEach(function(val) {
-      val.editing = false;
-    });
-    todo.editing = true;
-  };
-
-  $scope.finishEditing = function(todo) {
-    if (todo.title.trim().length === 0) {
-      $scope.removeTodo(todo);
-    } else {
-      todo.editing = false;
-    }
-  };
-
-  $scope.removeTodo = function(todo) {
-    for (var i = 0, len = $scope.todos.length; i < len; ++i) {
-      if (todo === $scope.todos[i]) {
-        $scope.todos.splice(i, 1);
-      }
-    }
-  };
-
-  $scope.remainingTodos = function() {
-    return $scope.todos.filter(function(val) {
-      return !val.done;
-    });
-  };
-
-  $scope.doneTodos = function() {
-    return $scope.todos.filter(function(val) {
-      return val.done;
-    });
-  }
-
-  $scope.clearDoneTodos = function() {
-    $scope.todos = $scope.remainingTodos();
-  };
-
-  $scope.markAllDone = function() {
-    var markDone = true;
-    if (!$scope.remainingTodos().length) {
-      markDone = false;
-    }
-    $scope.todos.forEach(function(todo) {
-      todo.done = markDone;
-    });
-  };
-};

architecture-examples/angularjs/js/controllers/todoCtrl.js

+'use strict';
+
+/**
+ * The main controller for the app. The controller:
+ * - retrieves and persist the model via the todoStorage service
+ * - exposes the model to the template and provides event handlers
+ */
+todomvc.controller( 'TodoCtrl', function TodoCtrl( $scope, $location, todoStorage, filterFilter ) {
+  var todos = $scope.todos = todoStorage.get();
+
+  $scope.newTodo = "";
+  $scope.editedTodo = null;
+
+  $scope.$watch('todos', function() {
+    $scope.remainingCount = filterFilter(todos, {completed: false}).length;
+    $scope.doneCount = todos.length - $scope.remainingCount;
+    $scope.allChecked = !$scope.remainingCount
+    todoStorage.put(todos);
+  }, true);
+
+  if ( $location.path() === '' ) $location.path('/');
+  $scope.location = $location;
+
+  $scope.$watch( 'location.path()', function( path ) {
+    $scope.statusFilter = (path == '/active') ?
+      { completed: false } : (path == '/completed') ?
+        { completed: true } : null;
+  });
+
+
+  $scope.addTodo = function() {
+    if ( !$scope.newTodo.length ) {
+      return;
+    }
+
+    todos.push({
+      title: $scope.newTodo,
+      completed: false
+    });
+
+    $scope.newTodo = '';
+  };
+
+
+  $scope.editTodo = function( todo ) {
+    $scope.editedTodo = todo;
+  };
+
+
+  $scope.doneEditing = function( todo ) {
+    $scope.editedTodo = null;
+    if ( !todo.title ) {
+      $scope.removeTodo(todo);
+    }
+  };
+
+
+  $scope.removeTodo = function( todo ) {
+    todos.splice(todos.indexOf(todo), 1);
+  };
+
+
+  $scope.clearDoneTodos = function() {
+    $scope.todos = todos = todos.filter(function( val ) {
+      return !val.completed;
+    });
+  };
+
+
+  $scope.markAll = function( done ) {
+    todos.forEach(function( todo ) {
+      todo.completed = done;
+    });
+  };
+});

architecture-examples/angularjs/js/directives/todoBlur.js

+'use strict';
+
+/**
+ * Directive that executes an expression when the element it is applied to loses focus.
+ */
+todomvc.directive('todoBlur', function() {
+  return function( scope, elem, attrs ) {
+    elem.bind('blur', function() {
+      scope.$apply(attrs.todoBlur);
+    });
+  };
+});

architecture-examples/angularjs/js/directives/todoFocus.js

+'use strict';
+
+/**
+ * Directive that places focus on the element it is applied to when the expression it binds to evaluates to true.
+ */
+todomvc.directive('todoFocus', function( $timeout ) {
+  return function( scope, elem, attrs ) {
+    scope.$watch(attrs.todoFocus, function( newval ) {
+      if ( newval ) {
+        $timeout(function() {
+          elem[0].focus();
+          elem[0].select();
+        }, 0, false);
+      }
+    });
+  };
+});

architecture-examples/angularjs/js/services/todoStorage.js

+'use strict';
+
+/**
+ * Services that persists and retrieves TODOs from localStorage.
+ */
+todomvc.factory( 'todoStorage', function() {
+  var STORAGE_ID = 'todos-angularjs';
+
+  return {
+    get: function() {
+      return JSON.parse(localStorage.getItem(STORAGE_ID) || '[]');
+    },
+
+    put: function( todos ) {
+      localStorage.setItem(STORAGE_ID, JSON.stringify(todos));
+    }
+  };
+});

architecture-examples/angularjs_persistencejs/css/app.css

-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, font, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  outline: 0;
-  font-weight: inherit;
-  font-style: inherit;
-  font-size: 100%;
-  font-family: inherit;
-  vertical-align: baseline;
-}
-body {
-  line-height: 1;
-  color: black;
-  background: white;
-}
-ol, ul {
-  list-style: none;
-}
-a img {
-  border: none;
-}
-
-html {
-  background: #eeeeee;
-}
-  body {
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-size: 14px;
-    line-height: 1.4em;
-    background: #eeeeee;
-    color: #333333;
-  }
-
-.clickable{
-  cursor:pointer;
-}
-
-#todoapp {
-    background: none repeat scroll 0 0 white;
-    border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 5px;
-    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
-    background: none repeat scroll 0 0 white;
-    margin: 0 auto 40px;
-    padding: 20px;
-    width: 480px;
-}
-
-#todoapp {
-  width: 480px;
-  margin: 0 auto 40px;
-  background: white;
-  padding: 20px;
-  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
-  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
-  -o-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
-  box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
-}
-  #todoapp h1 {
-    font-size: 36px;
-    font-weight: bold;
-    text-align: center;
-    padding: 20px 0 30px 0;
-    line-height: 1;
-  }
-
-#create-todo {
-  position: relative;
-}
-  #todo-form input {
-    width: 466px;
-    font-size: 24px;
-    font-family: inherit;
-    line-height: 1.4em;
-    border: 0;
-    outline: none;
-    padding: 6px;
-    border: 1px solid #999999;
-    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-    -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-  }
-    #create-todo input::-webkit-input-placeholder {
-      font-style: italic;
-    }
-  #create-todo span {
-    position: absolute;
-    z-index: 999;
-    width: 170px;
-    left: 50%;
-    margin-left: -85px;
-  }
-
-#todo-list {
-  margin-top: 10px;
-}
-  #todo-list li {
-    padding: 12px 20px 11px 0;
-    position: relative;
-    font-size: 24px;
-    line-height: 1.1em;
-    border-bottom: 1px solid #cccccc;
-  }
-    #todo-list li:after {
-      content: "\0020";
-      display: block;
-      height: 0;
-      clear: both;
-      overflow: hidden;
-      visibility: hidden;
-    }
-    #todo-list li.editing-true {
-      padding: 0;
-      border-bottom: 0;
-    }
-  #todo-list .editing-true .display,
-  #todo-list .edit {
-    display: none;
-  }
-    #todo-list .editing-true .edit {
-      display: block;
-    }
-    #todo-list .editing-true input {
-      width: 444px;
-      font-size: 24px;
-      font-family: inherit;
-      margin: 0;
-      line-height: 1.6em;
-      border: 0;
-      outline: none;
-      padding: 10px 7px 0px 27px;
-      border: 1px solid #999999;
-      -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-      -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-      -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-      box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-    }
-  #todo-list .check {
-    position: relative;
-    top: 9px;
-    margin: 0 10px 0 7px;
-    float: left;
-  }
-  #todo-list .done-true .todo-content {
-    text-decoration: line-through;
-    color: #777777;
-  }
-  #todo-list .todo-destroy {
-    position: absolute;
-    right: 5px;
-    top: 14px;
-    display: none;
-    cursor: pointer;
-    width: 20px;
-    height: 20px;
-    background: url(../img/destroy.png) no-repeat 0 0;
-  }
-    #todo-list li:hover .todo-destroy {
-      display: block;
-    }
-    #todo-list .todo-destroy:hover {
-      background-position: 0 -20px;
-    }
-
-#todo-stats {
-  *zoom: 1;
-  margin-top: 10px;
-  color: #777777;
-  
-  background: none repeat scroll 0 0 #F4FCE8;
-    border-radius: 0 0 5px 5px;
-    border-top: 1px solid #EDEDED;
-    color: #555555;
-    display: block;
-    line-height: 36px;
-    margin: 20px -20px -20px;
-    overflow: hidden;
-    padding: 0 20px;
-}
-
-
-    
-  #todo-stats:after {
-    content: "\0020";
-    display: block;
-    height: 0;
-    clear: both;
-    overflow: hidden;
-    visibility: hidden;
-  }
-  #todo-stats .todo-count {
-    float: left;
-  }
-    #todo-stats .todo-count .number {
-      font-weight: bold;
-      color: #333333;
-    }
-  #todo-stats .todo-clear {
-    float: right;
-  }
-  
-  #todoapp #todo-stats {
-    background: none repeat scroll 0 0 #F4FCE8;
-    border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 5px;
-    border-top: 1px solid #EDEDED;
-    color: #555555;
-    line-height: 36px;
-    margin-top: 10px;
-    padding: 0 20px;
-}
-
-  #todoapp #todo-stats .todo-clear a {
-	display: block;
-	line-height: 20px;
-	text-decoration: none;
-	-moz-border-radius: 12px;
-	-webkit-border-radius: 12px;
-	-o-border-radius: 12px;
-	-ms-border-radius: 12px;
-	-khtml-border-radius: 12px;
-	border-radius: 12px;
-	background: rgba(0, 0, 0, 0.1);
-	color: #555555;
-	font-size: 11px;
-	margin-top: 8px;
-	padding: 0 10px 1px;
-	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-	-o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-	box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-}
-/* line 136 */
-#todoapp #todo-stats .todo-clear a:hover, #todoapp #todo-stats .todo-clear a:focus {
-	background: rgba(0, 0, 0, 0.15);
-	-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-	-o-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-	box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-}
-
-    #todo-stats .todo-clear a {
-      color: #777777;
-      font-size: 12px;
-    }
-      #todo-stats .todo-clear a:visited {
-        color: #777777;
-      }
-      #todo-stats .todo-clear a:hover, #todo-stats .todo-clear a:focus {
-        color: #336699;
-      }
-
-#instructions {
-  width: 520px;
-  margin: 10px auto;
-  color: #777777;
-  text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
-  text-align: center;
-}
-  #instructions a {
-    color: #336699;
-  }
-
-#credits {
-  width: 520px;
-  margin: 30px auto;
-  color: #999;
-  text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
-  text-align: center;
-}
-  #credits a {
-    color: #888;
-  }
-
-
-/*
- *  Fran�ois 'cahnory' Germain
- */
-.ui-tooltip, .ui-tooltip-top, .ui-tooltip-right, .ui-tooltip-bottom, .ui-tooltip-left {
-  color:#ffffff;
-  cursor:normal;
-  display:-moz-inline-stack;
-  display:inline-block;
-  font-size:12px;
-  font-family:arial;
-  padding:.5em 1em;
-  position:relative;
-  text-align:center;
-  text-shadow:0 -1px 1px #111111;
-  -webkit-border-top-left-radius:4px ;
-  -webkit-border-top-right-radius:4px ;
-  -webkit-border-bottom-right-radius:4px ;
-  -webkit-border-bottom-left-radius:4px ;
-  -khtml-border-top-left-radius:4px ;
-  -khtml-border-top-right-radius:4px ;
-  -khtml-border-bottom-right-radius:4px ;
-  -khtml-border-bottom-left-radius:4px ;
-  -moz-border-radius-topleft:4px ;
-  -moz-border-radius-topright:4px ;
-  -moz-border-radius-bottomright:4px ;
-  -moz-border-radius-bottomleft:4px ;
-  border-top-left-radius:4px ;
-  border-top-right-radius:4px ;
-  border-bottom-right-radius:4px ;
-  border-bottom-left-radius:4px ;
-  -o-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
-  -moz-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
-  -khtml-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
-  -webkit-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
-  box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
-  background-color:#3b3b3b;
-  background-image:-moz-linear-gradient(top,#555555,#222222);
-  background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#555555),color-stop(1,#222222));
-  filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#555555,EndColorStr=#222222);
-  -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#555555,EndColorStr=#222222);
-}
-.ui-tooltip:after, .ui-tooltip-top:after, .ui-tooltip-right:after, .ui-tooltip-bottom:after, .ui-tooltip-left:after {
-  content:"\25B8";
-  display:block;
-  font-size:2em;
-  height:0;
-  line-height:0;
-  position:absolute;
-}
-.ui-tooltip:after, .ui-tooltip-bottom:after {
-  color:#2a2a2a;
-  bottom:0;
-  left:1px;
-  text-align:center;
-  text-shadow:1px 0 2px #000000;
-  -o-transform:rotate(90deg);
-  -moz-transform:rotate(90deg);
-  -khtml-transform:rotate(90deg);
-  -webkit-transform:rotate(90deg);
-  width:100%;
-}
-.ui-tooltip-top:after {
-  bottom:auto;
-  color:#4f4f4f;
-  left:-2px;
-  top:0;
-  text-align:center;
-  text-shadow:none;
-  -o-transform:rotate(-90deg);
-  -moz-transform:rotate(-90deg);
-  -khtml-transform:rotate(-90deg);
-  -webkit-transform:rotate(-90deg);
-  width:100%;
-}
-.ui-tooltip-right:after {
-  color:#222222;
-  right:-0.375em;
-  top:50%;
-  margin-top:-.05em;
-  text-shadow:0 1px 2px #000000;
-  -o-transform:rotate(0);
-  -moz-transform:rotate(0);
-  -khtml-transform:rotate(0);
-  -webkit-transform:rotate(0);
-}
-.ui-tooltip-left:after {
-  color:#222222;
-  left:-0.375em;
-  top:50%;
-  margin-top:.1em;
-  text-shadow:0 -1px 2px #000000;
-  -o-transform:rotate(180deg);
-  -moz-transform:rotate(180deg);
-  -khtml-transform:rotate(180deg);
-  -webkit-transform:rotate(180deg);
-}

architecture-examples/angularjs_persistencejs/index.html

-<!doctype html>
-<html xmlns:ng="http://angularjs.org/" xmlns:my="http://rx.org">
-<head>
-	<meta charset="utf-8">
-	<title>AngularJS with PersistenceJS Storage Todo App</title>
-	<link rel="stylesheet" href="css/app.css">
-	<!--[if IE]>
-	<script src="../../assets/ie.js"></script>
-	<![endif]-->
-</head>
-<body>
-		<div ng:controller="App.Controllers.TodoController" id="todoapp">
-			<div class="title">
-					<h1>
-							Todos
-					</h1>
-			</div>
-			<div class="content">
-					<div id="todo-form">
-					</div>
-					<form id="todo-form" ng:submit="addTodo()">
-							<input id="new-todo" name="newTodo" my:blur="addTodo()" placeholder="What needs to be done?" type="text">
-							<span class="ui-tooltip-top" ng:show="showHitEnterHint">
-									Press Enter to save this task
-							</span>
-					</form>
-					<div id="todos">
-							<ul id="todo-list">
-								<li class="todo" ng:class="'editing-' + todo.editing + ' done-' + todo.done" ng:repeat="todo in todos">
-									<div class="display">
-										<input ng:change="changeStatus(todo)" class="check" type="checkbox" name="todo.done" / >
-										<div ng:click="editTodo(todo)" class="todo-content"> {{ todo.content }} </div>
-										<span class="todo-destroy" ng:click="removeTodo(todo)"></span>
-								 </div>
-								<div class="edit">
-									<form ng:submit="finishEditing(todo)">
-											<input class="todo-input" my:focus="todo.editing" my:blur="finishEditing(todo)" name="todo.content" type="text">
-									</form>
-								</div>
-								</li>
-							</ul>
-					</div>
-					<div id="todo-stats">
-						<span class="todo-count" ng:show="hasTodos()">
-							<ng:pluralize count="remainingTodos()" when="{'0' : 'No items left.', '1': '1 item left.', 'other' : '{} items left.' }">
-							</ng:pluralize>
-						</span>
-						<span class="todo-clear" ng:show="hasFinishedTodos()">
-								<a ng:click="clearCompletedItems()">
-									Clear <ng:pluralize count="finishedTodos()" when="{'1': '1 completed item', 'other' : '{} completed items' }">
-									</ng:pluralize>
-								</a>
-						</span>
-			</div>
-			</div>
-	</div>
-	<ul id="instructions">
-		<li>Click to edit a todo.</li>
-	</ul>
-	<div id="credits">
-			<p>
-					Originally Created by
-					<br>
-					<a href="http://jgn.me/">Jérôme Gravel-Niquet</a>
-			</p>
-			<p>
-					Rewritten to use <a href="http://angularjs.org">AngularJS </a> by
-					<br>
-					<a href="http://cburgdorf.wordpress.com/">Christoph Burgdorf</a>
-					<br>Cleanup, edits: <a href="http://www.linkedin.com/pub/dan-doyon/2/1b0/a83">Dan Doyon</a>
-			</p>
-	<p>
-		Extended for persistent WebSQL storage by <br/>
-		<a href="http://jacobmumm.com">Jacob Mumm</a><br/>
-		Using <a href="http://persistencejs.org">PersistenceJS</a>
-	</p>
-	</div>
-	<script src="../../assets/base.js"></script>
-	<script src="js/booter.js"></script>
-	<script src="lib/angular/angular.min.js" ng:autobind></script>
-	<script src="lib/rx/rx.js"></script>
-	<script src="lib/rx/rx.angular.js"></script>
-	<script src="lib/persistence/persistence.js"></script>
-	<script src="lib/persistence/persistence.store.sql.js"></script>
-	<script src="lib/persistence/persistence.store.websql.js"></script>
-	<script src="js/controllers.js"></script>
-	<script src="js/directive.js"></script>
-	<script src="js/services.js"></script>
-</body>
-</html>
\ No newline at end of file

architecture-examples/angularjs_persistencejs/js/booter.js

-var App = {};
-App.Controllers = {};

architecture-examples/angularjs_persistencejs/js/controllers.js

-/* App Controllers */
-
-App.Controllers.TodoController = function (persistencejs) {
-    var self = this;
-    self.newTodo = "";
-	self.editTodoStartContent = "";
-
-    self.addTodo = function() {
-        if (self.newTodo.length === 0) return;
-        
-        self.todos.push({
-            content: self.newTodo,
-            done: false,
-            editing: false
-        });
-		persistencejs.add(self.newTodo);
-        self.newTodo = "";
-    };
-
-    self.editTodo = function(todo) {
-        angular.forEach(self.todos, function(value) {
-            value.editing = false;
-        });
-        todo.editing = true;
-		self.editTodoStartContent = todo.content;
-    };
-
-	self.changeStatus = function(todo){
-		persistencejs.changeStatus(todo);
-	};
-	
-    self.finishEditing = function(todo) {
-        todo.editing = false;
-		persistencejs.edit(self.editTodoStartContent, todo.content);
-    };
-
-    self.removeTodo = function(todo) {
-        angular.Array.remove(self.todos, todo);
-		persistencejs.remove(todo);
-    };
-
-    self.todos = [];
-
-    var countTodos = function(done) {
-        return function() {
-            return angular.Array.count(self.todos, function(x) {
-                return x.done === (done === "done");
-            });
-        }
-    };
-
-    self.remainingTodos = countTodos("undone");
-
-    self.finishedTodos = countTodos("done");
-
-    self.clearCompletedItems = function() {
-        var oldTodos = self.todos;
-        self.todos = [];
-        angular.forEach(oldTodos, function(todo) {
-            if (!todo.done) self.todos.push(todo);
-        });
-		persistencejs.clearCompletedItems();
-    };
-
-    self.hasFinishedTodos = function() {
-        return self.finishedTodos() > 0;
-    };
-
-    self.hasTodos = function() {
-        return self.todos.length > 0;
-    };
-	
-	self.loadTodos = function(){
-		persistencejs.fetchAll(self);
-	}
-	
-	self.refresh = function(){ self.$apply(); }
-
-	self.loadTodos();
-	
-    /*
-     The following code deals with hiding the hint *while* you are typing,
-     showing it once you did *finish* typing (aka 500 ms since you hit the last key)
-     *in case* the result is a non empty string
-     */
-    Rx.Observable.FromAngularScope(self, "newTodo")
-        .Do(function() {
-            self.showHitEnterHint = false;
-        })
-        .Throttle(500)
-        .Select(function(x) {
-            return x.length > 0;
-        })
-        .ToOutputProperty(self, "showHitEnterHint");
-};
-
-App.Controllers.TodoController.$inject = ['persistencejs'];
\ No newline at end of file

architecture-examples/angularjs_persistencejs/js/directive.js

-
-angular.directive('my:blur', function(expression, compiledElement) {
-    var compiler = this;
-    return function(linkElement) {
-        var scope = this;
-        linkElement.bind('blur', function(event) {
-            scope.$apply(expression, linkElement);
-            event.stopPropagation();
-        });
-    };
-});
-
-angular.directive("my:focus", function(expression, compiledElement){
-  return function(element){
-    this.$watch(expression, function(){
-      if(angular.formatter.boolean.parse(expression)){
-        element[0].focus();
-      } 
-    }, element);
-  };
-});

architecture-examples/angularjs_persistencejs/js/services.js

-angular.service('persistencejs', function() {
-	persistence.store.websql.config(persistence, 'todo-angular-persistence', 'todo database', 5*1024*1024);
-	var Todo = persistence.define('todo', {
-		content: 'TEXT',
-		done: 'BOOL'
-	});
-	persistence.schemaSync();
-	return {
-		add: function(item){
-			var t = new Todo();
-			t.content = item;
-			t.done = false;
-			persistence.add(t);
-			persistence.flush();
-		},
-		
-		edit: function(startContent, endContent){
-			Todo.all().filter('content','=',startContent).one(function(item){
-				item.content = endContent;
-				persistence.flush();
-			});
-		},
-		
-		changeStatus: function(item){
-			Todo.all().filter('content','=',item.content).one(function(todo){
-				todo.done = item.done;
-				persistence.flush();
-			});
-		},
-		
-		clearCompletedItems: function(){
-			Todo.all().filter('done','=',true).destroyAll();
-		},
-		
-		remove: function(item){
-			Todo.all().filter('content','=',item.content).destroyAll();
-		},
-		
-		fetchAll: function(controller){
-			Todo.all().list(function(items){
-				var itemCount = items.length;
-				var todos = [];
-				items.forEach(function(item){
-					todos.push({
-						content: item.content,
-						done: item.done,
-						editing: false
-					});
-					if(--itemCount == 0){
-						controller.todos = todos;
-						controller.refresh();
-					}
-				});
-			});
-		},
-	};
-});

architecture-examples/angularjs_persistencejs/lib/persistence/persistence.store.websql.js

-try {
-  if(!window) {
-    window = {};
-    //exports.console = console;
-  }
-} catch(e) {
-  window = {};
-  exports.console = console;
-}
-
-var persistence = (window && window.persistence) ? window.persistence : {}; 
-
-if(!persistence.store) {
-  persistence.store = {};
-}
-
-persistence.store.websql = {};
-
-
-persistence.store.websql.config = function(persistence, dbname, description, size) {
-  var conn = null;
-
-  /**
-   * Create a transaction
-   * 
-   * @param callback,
-   *            the callback function to be invoked when the transaction
-   *            starts, taking the transaction object as argument
-   */
-  persistence.transaction = function (callback) {
-    if(!conn) {
-      throw new Error("No ongoing database connection, please connect first.");
-    } else {
-      conn.transaction(callback);
-    }
-  };
-
-  ////////// Low-level database interface, abstracting from HTML5 and Gears databases \\\\
-  persistence.db = persistence.db || {};
-
-  persistence.db.implementation = "unsupported";
-  persistence.db.conn = null;
-
-  // window object does not exist on Qt Declarative UI (http://doc.trolltech.org/4.7-snapshot/declarativeui.html)
-  if (window && window.openDatabase) {
-    persistence.db.implementation = "html5";
-  } else if (window && window.google && google.gears) {
-    persistence.db.implementation = "gears";
-  } else {
-    try {
-      if (openDatabaseSync) {
-        // TODO: find a browser that implements openDatabaseSync and check out if
-        //       it is attached to the window or some other object
-        persistence.db.implementation = "html5-sync";
-      }
-    } catch(e) {
-    }
-  }
-
-  persistence.db.html5 = {};
-
-  persistence.db.html5.connect = function (dbname, description, size) {
-    var that = {};
-    var conn = openDatabase(dbname, '1.0', description, size);
-
-    that.transaction = function (fn) {
-      return conn.transaction(function (sqlt) {
-          return fn(persistence.db.html5.transaction(sqlt));
-        });
-    };
-    return that;
-  };
-
-  persistence.db.html5.transaction = function (t) {
-    var that = {};
-    that.executeSql = function (query, args, successFn, errorFn) {
-      if(persistence.debug) {
-        console.log(query, args);
-      }
-      t.executeSql(query, args, function (_, result) {
-          if (successFn) {
-            var results = [];
-            for ( var i = 0; i < result.rows.length; i++) {
-              results.push(result.rows.item(i));
-            }
-            successFn(results);
-          }
-        }, errorFn);
-    };
-    return that;
-  };
-
-  persistence.db.html5Sync = {};
-
-  persistence.db.html5Sync.connect = function (dbname, description, size) {
-    var that = {};
-    var conn = openDatabaseSync(dbname, '1.0', description, size);
-
-    that.transaction = function (fn) {
-      return conn.transaction(function (sqlt) {
-          return fn(persistence.db.html5Sync.transaction(sqlt));
-        });
-    };
-    return that;
-  };
-
-  persistence.db.html5Sync.transaction = function (t) {
-    var that = {};
-    that.executeSql = function (query, args, successFn, errorFn) {
-      if (args == null) args = [];
-
-      if(persistence.debug) {
-        console.log(query, args);
-      }
-
-      var result = t.executeSql(query, args);
-      if (result) {
-        if (successFn) {
-          var results = [];
-          for ( var i = 0; i < result.rows.length; i++) {
-            results.push(result.rows.item(i));
-          }
-          successFn(results);
-        }
-      }
-    };
-    return that;
-  };
-
-  persistence.db.gears = {};
-
-  persistence.db.gears.connect = function (dbname) {
-    var that = {};
-    var conn = google.gears.factory.create('beta.database');
-    conn.open(dbname);
-
-    that.transaction = function (fn) {
-      fn(persistence.db.gears.transaction(conn));
-    };
-    return that;
-  };
-
-  persistence.db.gears.transaction = function (conn) {
-    var that = {};
-    that.executeSql = function (query, args, successFn, errorFn) {
-      if(persistence.debug) {
-        console.log(query, args);
-      }
-      var rs = conn.execute(query, args);
-      if (successFn) {
-        var results = [];
-        while (rs.isValidRow()) {
-          var result = {};
-          for ( var i = 0; i < rs.fieldCount(); i++) {
-            result[rs.fieldName(i)] = rs.field(i);
-          }
-          results.push(result);
-          rs.next();
-        }
-        successFn(results);
-      }
-    };
-    return that;
-  };
-
-  persistence.db.connect = function (dbname, description, size) {
-    if (persistence.db.implementation == "html5") {
-      return persistence.db.html5.connect(dbname, description, size);
-    } else if (persistence.db.implementation == "html5-sync") {
-      return persistence.db.html5Sync.connect(dbname, description, size);
-    } else if (persistence.db.implementation == "gears") {
-      return persistence.db.gears.connect(dbname);
-    }
-  };
-
-  ///////////////////////// SQLite dialect
-
-  persistence.store.websql.sqliteDialect = {
-    // columns is an array of arrays, e.g.
-    // [["id", "VARCHAR(32)", "PRIMARY KEY"], ["name", "TEXT"]]
-    createTable: function(tableName, columns) {
-      var tm = persistence.typeMapper;
-      var sql = "CREATE TABLE IF NOT EXISTS `" + tableName + "` (";
-      var defs = [];
-      for(var i = 0; i < columns.length; i++) {
-        var column = columns[i];
-        defs.push("`" + column[0] + "` " + tm.columnType(column[1]) + (column[2] ? " " + column[2] : ""));
-      }
-      sql += defs.join(", ");
-      sql += ')';
-      return sql;
-    },
-
-    // columns is array of column names, e.g.
-    // ["id"]
-    createIndex: function(tableName, columns, options) {
-      options = options || {};
-      return "CREATE "+(options.unique?"UNIQUE ":"")+"INDEX IF NOT EXISTS `" + tableName + "__" + columns.join("_") + 
-             "` ON `" + tableName + "` (" + 
-             columns.map(function(col) { return "`" + col + "`"; }).join(", ") + ")";
-    }
-  };
-
-  // Configure persistence for generic sql persistence, using sqliteDialect
-  persistence.store.sql.config(persistence, persistence.store.websql.sqliteDialect);
-
-  // Make the connection
-  conn = persistence.db.connect(dbname, description, size);
-  if(!conn) {
-    throw new Error("No supported database found in this browser.");
-  }
-};
-
-try {
-  exports.persistence = persistence;
-} catch(e) {}

architecture-examples/angularjs_persistencejs/lib/rx/rx.angular.js

-(function () {
-    var global = this,
-        root = (typeof ProvideCustomRxRootObject == "undefined") ? global.Rx : ProvideCustomRxRootObject();
-
-    var observable = root.Observable;
-    var observableCreate = observable.Create;
-
-    observable.FromAngularScope = function (angularScope, propertyName) {
-        return observableCreate(function (observer) {
-            var unwatch = angularScope.$watch(function(){
-                return angularScope[propertyName];
-            }, 
-            function(){
-                observer.OnNext(angularScope[propertyName]);
-            });
-            return function () {
-                unwatch();
-            };
-        })
-        .Skip(1); //In AngularJS 0.10.x There is no way to avoid initial evaluation. So we take care about it!
-    };
-
-    observable.prototype.ToOutputProperty = function (scope, propertyName) {
-        var disposable = this.Subscribe(function (data) {
-            scope[propertyName] = data;
-            scope.$apply();
-        });
-        
-        scope.$on('$destroy', function(event){
-            //we need to asure that we only dispose the observable when it's our scope that
-            //was destroyed.
-
-            //TODO: Figure out if thats enough to asure the above (e.g what happens when
-            //a child scope will be destroyed but ours won't be affected. Or the other way around, 
-            //if a higher scope will be destroyed (and therefore ours as well) does it mean that $destroy() 
-            //will be also called on our scope or will our scope get destroyed without actually 
-            //calling $destroy() on it?
-            if (event.targetScope === scope){
-                disposable.Dispose();
-            }
-        });
-    };
-
-})();
\ No newline at end of file

architecture-examples/backbone/js/app.js

+$(function(){
+
+	// Kick things off by creating the **App**.
+	var App = new window.app.AppView;
+
+});
\ No newline at end of file

architecture-examples/backbone/js/init.js

+
+// Constants
+var ENTER_KEY = 13;
+
+// Setup namespace for the app
+window.app = window.app || {};
\ No newline at end of file

architecture-examples/javascriptmvc/steal/build/apps/test.js

-// load("steal/build/apps/test.js")
-_args = ['cookbook', 'mxui/combobox', 'mxui/modal'];
-load("steal/buildjs");
\ No newline at end of file