bradlygreen · alexiosmakris · Dec 24, 2010 · Jan 11, 2011 · Jan 27, 2011 · Feb 9, 2011
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,8 @@
-.idea
-.DS_Store*
-ehthumbs.db
-Icon?
-Thumbs.db
+**/.DS_Store
+nbproject
+manifest.mf
+build.xml
+
+.project
+.settings
+.idea/*
diff --git a/README.md b/README.md
@@ -1,4 +1,7 @@
 Memory-Game
 ===========
 
-AngularJS example app that implements the famous memory game of finding matching pairs of cards.  Popular with toddlers everywhere!
+AngularJS example app that implements the famous memory game of finding matching pairs of cards.  Popular with toddlers everywhere!
+
+
+View demo at: <http://igorminar.github.io/Memory-Game/app/index.html>
diff --git a/app/css/app.css b/app/css/app.css
@@ -8,7 +8,6 @@ div {
   width: 165px;
   height: 200px;
   position: relative;
-  border: 1px solid #CCC;
   -webkit-perspective: 800px;
   -moz-perspective: 800px;
   -ms-perspective: 800px;

diff --git a/app/index-async.html b/app/index-async.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <style>
+    [ng-cloak] {
+      display: none;
+    }
+  </style>
+  <script>
+    // include angular loader, which allows the files to load in any order
+    /*
+     AngularJS v1.0.0rc1
+     (c) 2010-2012 AngularJS http://angularjs.org
+     License: MIT
+    */
+    'use strict';(function(i){function d(c,a,e){return c[a]||(c[a]=e())}return d(d(i,"angular",Object),"module",function(){var c={};return function(a,e,f){e&&c.hasOwnProperty(a)&&(c[a]=null);return d(c,a,function(){function b(a,b,d){return function(){c[d||"push"]([a,b,arguments]);return g}}if(!e)throw Error("No module: "+a);var c=[],d=[],h=b("$injector","invoke"),g={_invokeQueue:c,_runBlocks:d,requires:e,name:a,provider:b("$provide","provider"),factory:b("$provide","factory"),service:b("$provide","service"),
+    value:b("$provide","value"),constant:b("$provide","constant","unshift"),filter:b("$filterProvider","register"),directive:b("$compileProvider","directive"),config:h,run:function(a){d.push(a);return this}};f&&h(f);return g})}})})(window);
+
+    // include a third-party async loader library
+    /*!
+     * $script.js v1.3
+     * https://github.com/ded/script.js
+     * Copyright: @ded & @fat - Dustin Diaz, Jacob Thornton 2011
+     * Follow our software http://twitter.com/dedfat
+     * License: MIT
+     */
+    !function(a,b,c){function t(a,c){var e=b.createElement("script"),f=j;e.onload=e.onerror=e[o]=function(){e[m]&&!/^c|loade/.test(e[m])||f||(e.onload=e[o]=null,f=1,c())},e.async=1,e.src=a,d.insertBefore(e,d.firstChild)}function q(a,b){p(a,function(a){return!b(a)})}var d=b.getElementsByTagName("head")[0],e={},f={},g={},h={},i="string",j=!1,k="push",l="DOMContentLoaded",m="readyState",n="addEventListener",o="onreadystatechange",p=function(a,b){for(var c=0,d=a.length;c<d;++c)if(!b(a[c]))return j;return 1};!b[m]&&b[n]&&(b[n](l,function r(){b.removeEventListener(l,r,j),b[m]="complete"},j),b[m]="loading");var s=function(a,b,d){function o(){if(!--m){e[l]=1,j&&j();for(var a in g)p(a.split("|"),n)&&!q(g[a],n)&&(g[a]=[])}}function n(a){return a.call?a():e[a]}a=a[k]?a:[a];var i=b&&b.call,j=i?b:d,l=i?a.join(""):b,m=a.length;c(function(){q(a,function(a){h[a]?(l&&(f[l]=1),o()):(h[a]=1,l&&(f[l]=1),t(s.path?s.path+a+".js":a,o))})},0);return s};s.get=t,s.ready=function(a,b,c){a=a[k]?a:[a];var d=[];!q(a,function(a){e[a]||d[k](a)})&&p(a,function(a){return e[a]})?b():!function(a){g[a]=g[a]||[],g[a][k](b),c&&c(d)}(a.join("|"));return s};var u=a.$script;s.noConflict=function(){a.$script=u;return this},typeof module!="undefined"&&module.exports?module.exports=s:a.$script=s}(this,document,setTimeout)
+
+    // load all of the dependencies asynchronously.
+    $script([
+      'lib/angular/angular.js',
+      'js/app.js',
+      'js/services.js',
+      'js/controllers.js',
+      'js/filters.js',
+      'js/directives.js'
+    ], function() {
+      // when all is done, execute bootstrap angular application
+      angular.bootstrap(document, ['myApp']);
+    });
+  </script>
+  <title>My AngularJS App</title>
+  <link rel="stylesheet" href="css/app.css">
+</head>
+<body ng-cloak>
+  <ul class="menu">
+    <li><a href="#/view1">view1</a></li>
+    <li><a href="#/view2">view2</a></li>
+  </ul>
+
+  <div ng-view></div>
+
+  <div>Angular seed app: v<span app-version></span></div>
+
+</body>
+</html>
diff --git a/app/index.html b/app/index.html
@@ -14,11 +14,18 @@
 
   <table>
     <tr ng-repeat="row in game.grid">
-      <td ng-repeat="tile in row" class="container">
-        <div class="card" ng-class="{flipped: tile.flipped}" ng-click="game.flipTile(tile)">
-            <img class="front" ng-src="img/back.png">
-            <img class="back" ng-src="img/{{tile.title}}.png">
+      <td ng-repeat="tile in row" ng-click="game.flipTile(tile)">
+
+        <!-- this entire block can be replaced with our custom component mgCard:
+          <mg-card tile="tile"></mg-card>
+        -->
+        <div class="container">
+          <div class="card" ng-class="{flipped: tile.flipped}">
+              <img class="front" ng-src="img/back.png">
+              <img class="back" ng-src="img/{{tile.title}}.png">
+          </div>
         </div>
+
       </td>
     </tr>
   </table>

diff --git a/app/js/app.js b/app/js/app.js
@@ -16,3 +16,27 @@ memoryGameApp.factory('game', function() {
 memoryGameApp.controller('GameCtrl', function GameCtrl($scope, game) {
   $scope.game = game;
 });
+
+
+//usages:
+//- in the repeater as: <mg-card tile="tile"></mg-card>
+//- card currently being matched as: <mg-card tile="game.firstPick"></mg-card>
+
+memoryGameApp.directive('mgCard', function() {
+  return {
+    restrict: 'E',
+    // instead of inlining the template string here, one could use templateUrl: 'mg-card.html'
+    // and then either create a mg-card.html file with the content or add
+    // <script type="text/ng-template" id="mg-card.html">.. template here.. </script> element to
+    // index.html
+    template: '<div class="container">' +
+                '<div class="card" ng-class="{flipped: tile.flipped}">' +
+                  '<img class="front" ng-src="img/back.png">' +
+                  '<img class="back" ng-src="img/{{tile.title}}.png">' +
+                '</div>' +
+              '</div>',
+    scope: {
+      tile: '='
+    }
+  }
+});
diff --git a/app/lib/angular/angular-cookies.js b/app/lib/angular/angular-cookies.js
@@ -1,21 +1,21 @@
 /**
- * @license AngularJS v1.0.0rc6
+ * @license AngularJS v1.0.6
  * (c) 2010-2012 Google, Inc. http://angularjs.org
  * License: MIT
  */
-(function(angular) {
+(function(window, angular, undefined) {
 'use strict';
 
 /**
  * @ngdoc overview
- * @name angular.module.ngCookies
+ * @name ngCookies
  */
 
 
 angular.module('ngCookies', ['ng']).
   /**
    * @ngdoc object
-   * @name angular.module.ngCookies.$cookies
+   * @name ngCookies.$cookies
    * @requires $browser
    *
    * @description
@@ -25,6 +25,18 @@ angular.module('ngCookies', ['ng']).
    * this object, new cookies are created/deleted at the end of current $eval.
    *
    * @example
+   <doc:example>
+     <doc:source>
+       <script>
+         function ExampleController($cookies) {
+           // Retrieving a cookie
+           var favoriteCookie = $cookies.myFavorite;
+           // Setting a cookie
+           $cookies.myFavorite = 'oatmeal';
+         }
+       </script>
+     </doc:source>
+   </doc:example>
    */
    factory('$cookies', ['$rootScope', '$browser', function ($rootScope, $browser) {
       var cookies = {},
@@ -109,7 +121,7 @@ angular.module('ngCookies', ['ng']).
 
   /**
    * @ngdoc object
-   * @name angular.module.ngCookies.$cookieStore
+   * @name ngCookies.$cookieStore
    * @requires $cookies
    *
    * @description
@@ -123,8 +135,8 @@ angular.module('ngCookies', ['ng']).
       return {
         /**
          * @ngdoc method
-         * @name angular.module.ngCookies.$cookieStore#get
-         * @methodOf angular.module.ngCookies.$cookieStore
+         * @name ngCookies.$cookieStore#get
+         * @methodOf ngCookies.$cookieStore
          *
          * @description
          * Returns the value of given cookie key
@@ -138,8 +150,8 @@ angular.module('ngCookies', ['ng']).
 
         /**
          * @ngdoc method
-         * @name angular.module.ngCookies.$cookieStore#put
-         * @methodOf angular.module.ngCookies.$cookieStore
+         * @name ngCookies.$cookieStore#put
+         * @methodOf ngCookies.$cookieStore
          *
          * @description
          * Sets a value for given cookie key
@@ -153,8 +165,8 @@ angular.module('ngCookies', ['ng']).
 
         /**
          * @ngdoc method
-         * @name angular.module.ngCookies.$cookieStore#remove
-         * @methodOf angular.module.ngCookies.$cookieStore
+         * @name ngCookies.$cookieStore#remove
+         * @methodOf ngCookies.$cookieStore
          *
          * @description
          * Remove given cookie
@@ -168,4 +180,5 @@ angular.module('ngCookies', ['ng']).
 
     }]);
 
-})(window.angular);
+
+})(window, window.angular);
diff --git a/app/lib/angular/angular-cookies.min.js b/app/lib/angular/angular-cookies.min.js
@@ -1,7 +1,7 @@
 /*
- AngularJS v1.0.0rc6
+ AngularJS v1.0.6
  (c) 2010-2012 Google, Inc. http://angularjs.org
  License: MIT
 */
-(function(f){'use strict';f.module("ngCookies",["ng"]).factory("$cookies",["$rootScope","$browser",function(d,c){var b={},g={},h,i=!1,j=f.copy,k=f.isUndefined;c.addPollFn(function(){var a=c.cookies();h!=a&&(h=a,j(a,g),j(a,b),i&&d.$apply())})();i=!0;d.$watch(function(){var a,e,d;for(a in g)k(b[a])&&c.cookies(a,void 0);for(a in b)e=b[a],f.isString(e)?e!==g[a]&&(c.cookies(a,e),d=!0):f.isDefined(g[a])?b[a]=g[a]:delete b[a];if(d)for(a in e=c.cookies(),b)b[a]!==e[a]&&(k(e[a])?delete b[a]:b[a]=e[a])});return b}]).factory("$cookieStore",
-["$cookies",function(d){return{get:function(c){return f.fromJson(d[c])},put:function(c,b){d[c]=f.toJson(b)},remove:function(c){delete d[c]}}}])})(window.angular);
+(function(m,f,l){'use strict';f.module("ngCookies",["ng"]).factory("$cookies",["$rootScope","$browser",function(d,c){var b={},g={},h,i=!1,j=f.copy,k=f.isUndefined;c.addPollFn(function(){var a=c.cookies();h!=a&&(h=a,j(a,g),j(a,b),i&&d.$apply())})();i=!0;d.$watch(function(){var a,e,d;for(a in g)k(b[a])&&c.cookies(a,l);for(a in b)e=b[a],f.isString(e)?e!==g[a]&&(c.cookies(a,e),d=!0):f.isDefined(g[a])?b[a]=g[a]:delete b[a];if(d)for(a in e=c.cookies(),b)b[a]!==e[a]&&(k(e[a])?delete b[a]:b[a]=e[a])});return b}]).factory("$cookieStore",
+["$cookies",function(d){return{get:function(c){return f.fromJson(d[c])},put:function(c,b){d[c]=f.toJson(b)},remove:function(c){delete d[c]}}}])})(window,window.angular);
diff --git a/app/lib/angular/angular-loader.js b/app/lib/angular/angular-loader.js
@@ -1,5 +1,5 @@
 /**
- * @license AngularJS v1.0.0rc6
+ * @license AngularJS v1.0.6
  * (c) 2010-2012 Google, Inc. http://angularjs.org
  * License: MIT
  */
@@ -36,8 +36,8 @@ function setupModuleLoader(window) {
      *
      * # Module
      *
-     * A module is a collocation of services, directives, filters, and configure information. Module
-     * is used to configure the {@link angular.module.AUTO.$injector $injector}.
+     * A module is a collocation of services, directives, filters, and configuration information. Module
+     * is used to configure the {@link AUTO.$injector $injector}.
      *
      * <pre>
      * // Create a new module
@@ -61,13 +61,13 @@ function setupModuleLoader(window) {
      * </pre>
      *
      * However it's more likely that you'll just use
-     * {@link angular.module.ng.$compileProvider.directive.ngApp ngApp} or
+     * {@link ng.directive:ngApp ngApp} or
      * {@link angular.bootstrap} to simplify this process for you.
      *
      * @param {!string} name The name of the module to create or retrieve.
      * @param {Array.<string>=} requires If specified then new module is being created. If unspecified then the
      *        the module is being retrieved for further configuration.
-     * @param {Function} configFn Option configuration function for the module. Same as
+     * @param {Function} configFn Optional configuration function for the module. Same as
      *        {@link angular.Module#config Module#config()}.
      * @returns {module} new module with the {@link angular.Module} api.
      */
@@ -121,7 +121,7 @@ function setupModuleLoader(window) {
            * @param {string} name service name
            * @param {Function} providerType Construction function for creating new instance of the service.
            * @description
-           * See {@link angular.module.AUTO.$provide#provider $provide.provider()}.
+           * See {@link AUTO.$provide#provider $provide.provider()}.
            */
           provider: invokeLater('$provide', 'provider'),
 
@@ -132,7 +132,7 @@ function setupModuleLoader(window) {
            * @param {string} name service name
            * @param {Function} providerFunction Function for creating new instance of the service.
            * @description
-           * See {@link angular.module.AUTO.$provide#factory $provide.factory()}.
+           * See {@link AUTO.$provide#factory $provide.factory()}.
            */
           factory: invokeLater('$provide', 'factory'),
 
@@ -143,7 +143,7 @@ function setupModuleLoader(window) {
            * @param {string} name service name
            * @param {Function} constructor A constructor function that will be instantiated.
            * @description
-           * See {@link angular.module.AUTO.$provide#service $provide.service()}.
+           * See {@link AUTO.$provide#service $provide.service()}.
            */
           service: invokeLater('$provide', 'service'),
 
@@ -154,7 +154,7 @@ function setupModuleLoader(window) {
            * @param {string} name service name
            * @param {*} object Service instance object.
            * @description
-           * See {@link angular.module.AUTO.$provide#value $provide.value()}.
+           * See {@link AUTO.$provide#value $provide.value()}.
            */
           value: invokeLater('$provide', 'value'),
 
@@ -166,7 +166,7 @@ function setupModuleLoader(window) {
            * @param {*} object Constant value.
            * @description
            * Because the constant are fixed, they get applied before other provide methods.
-           * See {@link angular.module.AUTO.$provide#constant $provide.constant()}.
+           * See {@link AUTO.$provide#constant $provide.constant()}.
            */
           constant: invokeLater('$provide', 'constant', 'unshift'),
 
@@ -177,7 +177,7 @@ function setupModuleLoader(window) {
            * @param {string} name Filter name.
            * @param {Function} filterFactory Factory function for creating new instance of filter.
            * @description
-           * See {@link angular.module.ng.$filterProvider#register $filterProvider.register()}.
+           * See {@link ng.$filterProvider#register $filterProvider.register()}.
            */
           filter: invokeLater('$filterProvider', 'register'),
 
@@ -188,7 +188,7 @@ function setupModuleLoader(window) {
            * @param {string} name Controller name.
            * @param {Function} constructor Controller constructor function.
            * @description
-           * See {@link angular.module.ng.$controllerProvider#register $controllerProvider.register()}.
+           * See {@link ng.$controllerProvider#register $controllerProvider.register()}.
            */
           controller: invokeLater('$controllerProvider', 'register'),
 
@@ -200,7 +200,7 @@ function setupModuleLoader(window) {
            * @param {Function} directiveFactory Factory function for creating new instance of
            * directives.
            * @description
-           * See {@link angular.module.ng.$compileProvider.directive $compileProvider.directive()}.
+           * See {@link ng.$compileProvider#directive $compileProvider.directive()}.
            */
           directive: invokeLater('$compileProvider', 'directive'),
 
@@ -222,8 +222,8 @@ function setupModuleLoader(window) {
            * @param {Function} initializationFn Execute this function after injector creation.
            *    Useful for application initialization.
            * @description
-           * Use this method to register work which needs to be performed when the injector with
-           * with the current module is finished loading.
+           * Use this method to register work which should be performed when the injector is done
+           * loading all modules.
            */
           run: function(block) {
             runBlocks.push(block);
@@ -254,6 +254,7 @@ function setupModuleLoader(window) {
   });
 
 }
+
 )(window);
 
 /**

diff --git a/app/lib/angular/angular-loader.min.js b/app/lib/angular/angular-loader.min.js
@@ -1,5 +1,5 @@
 /*
- AngularJS v1.0.0rc6
+ AngularJS v1.0.6
  (c) 2010-2012 Google, Inc. http://angularjs.org
  License: MIT
 */