Merge pull request #195 from passy/angular-requirejs

angular.js with require.js

Merge pull request #195 from passy/angular-requirejs
angular.js with require.js
a35531a1 · Sindre Sorhus · cca0ef2f · d1647375 · a35531a1 · a35531a1
Commit a35531a1 authored Jul 03, 2012 by Sindre Sorhus
10 changed files
--- a/labs/dependency-examples/angularjs_require/index.html
+++ b/labs/dependency-examples/angularjs_require/index.html
+<!doctype html>
+<html lang="en">
+<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]-->
+  <script>
+    // Include angular-loader to allow modules to be loaded in any order.
+    /*
+    AngularJS v1.0.0
+    (c) 2010-2012 Google, Inc. http://angularjs.org
+    License: MIT
+    */
+    (function(i){'use strict';function d(c,b,e){return c[b]||(c[b]=e())}return d(d(i,"angular",Object),"module",function(){var c={};return function(b,e,f){e&&c.hasOwnProperty(b)&&(c[b]=null);return d(c,b,function(){function a(a,b,d){return function(){c[d||"push"]([a,b,arguments]);return g}}if(!e)throw Error("No module: "+b);var c=[],d=[],h=a("$injector","invoke"),g={_invokeQueue:c,_runBlocks:d,requires:e,name:b,provider:a("$provide","provider"),factory:a("$provide","factory"),service:a("$provide","service"),
+    value:a("$provide","value"),constant:a("$provide","constant","unshift"),filter:a("$filterProvider","register"),controller:a("$controllerProvider","register"),directive:a("$compileProvider","directive"),config:h,run:function(a){d.push(a);return this}};f&&h(f);return g})}})})(window);
+  </script>
+</head>
+<body>
+  <section id="todoapp" ng-controller="TodoController">
+    <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">
+            <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>,
+        <a href="http://igorminar.com">Igor Minar</a> and
+        <a href="http://twitter.com/passy">Pascal Hartig</a>
+     </p>
+  </footer>
+  <script src="../../../assets/base.js"></script>
+  <script data-main="js/main" src="../../../assets/require.min.js"></script>
+</body>
+</html>
--- a/labs/dependency-examples/angularjs_require/js/app.js
+++ b/labs/dependency-examples/angularjs_require/js/app.js
+'use strict';
+
+define([], function () {
+    return angular.module('todomvc', []);
+});
--- a/labs/dependency-examples/angularjs_require/js/controllers/todo.js
+++ b/labs/dependency-examples/angularjs_require/js/controllers/todo.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
+ */
+
+define(['app', 'services/todoStorage'], function (app) {
+  return app.controller('TodoController', ['$scope', '$location', 'todoStorage', 'filterFilter',
+    function TodoController( $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;
+        });
+      };
+    }
+  ]);
+});
--- a/labs/dependency-examples/angularjs_require/js/directives/todoBlur.js
+++ b/labs/dependency-examples/angularjs_require/js/directives/todoBlur.js
+'use strict';
+/**
+ * Directive that executes an expression when the element it is applied to loses focus.
+ */
+
+define(['app'], function ( app ) {
+  app.directive('todoBlur', function() {
+    return function( scope, elem, attrs ) {
+      elem.bind('blur', function() {
+        scope.$apply(attrs.todoBlur);
+      });
+    };
+  });
+});
--- a/labs/dependency-examples/angularjs_require/js/directives/todoFocus.js
+++ b/labs/dependency-examples/angularjs_require/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.
+ */
+define(['app'], function ( app ) {
+  app.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);
+        }
+      });
+    };
+  });
+});
--- a/labs/dependency-examples/angularjs_require/js/libs/angular/angular.min.js
+++ b/labs/dependency-examples/angularjs_require/js/libs/angular/angular.min.js
--- a/labs/dependency-examples/angularjs_require/js/main.js
+++ b/labs/dependency-examples/angularjs_require/js/main.js
+'use strict';
+
+require.config({
+    paths: {
+        angular: 'libs/angular/angular.min'
+    },
+    shim: {
+        angular: {
+            exports: 'angular'
+        }
+    }
+});
+
+require(['angular', 'app', 'controllers/todo', 'directives/todoFocus', 'directives/todoBlur'], function (angular) {
+    angular.bootstrap(document, ['todomvc']);
+});
--- a/labs/dependency-examples/angularjs_require/js/services/todoStorage.js
+++ b/labs/dependency-examples/angularjs_require/js/services/todoStorage.js
+'use strict';
+
+/**
+ * Services that persists and retrieves TODOs from localStorage.
+ */
+define(['app'], function (app) {
+  app.factory( 'todoStorage', function() {
+    var STORAGE_ID = 'todos-angularjs-requirejs';
+
+    return {
+      get: function() {
+        return JSON.parse(localStorage.getItem(STORAGE_ID) || '[]');
+      },
+
+      put: function( todos ) {
+        localStorage.setItem(STORAGE_ID, JSON.stringify(todos));
+      }
+    };
+  });
+});
--- a/labs/index.html
+++ b/labs/index.html
@@ -96,6 +96,9 @@
 						<li>
 							<a href="dependency-examples/knockoutjs_require/index.html" data-source="" data-content="This project is an adaptation of /architecture-examples/knockoutjs with require.js.">Knockout + Require.js *</a>
 						</li>
+						<li>
+							<a href="dependency-examples/angularjs_require/index.html" data-source="http://angularjs.org" data-content="What HTML would have been had it been designed for web apps. This is an example of using it with AMD modules.">AngularJS + RequireJS</a>
+						</li>
 					</ul>
 					<ul class="nav nav-pills">
 						<li>
@@ -178,6 +181,7 @@
 					<a href="https://github.com/krebbl">krebbl</a>
 					<a href="http://github.com/hay">Hay Kranen</a>
 					<a href="https://github.com/mikaelkaron">Mikael Karon</a>
+					<a href="https://github.com/passy">Pascal Hartig</a>
 				</p>
 			</footer>
 		</div>

--- a/readme.md
+++ b/readme.md
@@ -59,6 +59,7 @@ We also have a number of in-progress applications in our [Labs](http://addyosman
 - [Broke](https://github.com/brokenseal/broke)
 - [o_O](http://weepy.github.com/o_O)
 - [Fun](https://github.com/marcuswestin/fun)
+- [AngularJS](http://angularjs.org) + [RequireJS](http://requirejs.org) (using AMD)


 ## Live demos