angular · matsko · Jul 26, 2013 · Jul 28, 2013 · Jul 29, 2013 · Jul 29, 2013
diff --git a/docs/components/angular-bootstrap/bootstrap-prettify.js b/docs/components/angular-bootstrap/bootstrap-prettify.js
@@ -7,6 +7,7 @@ var DEPENDENCIES = {
   'angular.js': 'http://code.angularjs.org/' + angular.version.full + '/angular.min.js',
   'angular-resource.js': 'http://code.angularjs.org/' + angular.version.full + '/angular-resource.min.js',
   'angular-route.js': 'http://code.angularjs.org/' + angular.version.full + '/angular-route.min.js',
+  'angular-animate.js': 'http://code.angularjs.org/' + angular.version.full + '/angular-animate.min.js',
   'angular-sanitize.js': 'http://code.angularjs.org/' + angular.version.full + '/angular-sanitize.min.js',
   'angular-cookies.js': 'http://code.angularjs.org/' + angular.version.full + '/angular-cookies.min.js'
 };
@@ -188,7 +189,7 @@ directive.ngEmbedApp = ['$templateCache', '$browser', '$rootScope', '$location',
   return {
     terminal: true,
     link: function(scope, element, attrs) {
-      var modules = [],
+      var modules = ['ngAnimate'],
           embedRootScope,
           deregisterEmbedRootScope;
 

diff --git a/docs/src/ngdoc.js b/docs/src/ngdoc.js
@@ -190,6 +190,7 @@ Doc.prototype = {
           var example = new Example(self.scenarios);
           if(animations) {
             example.enableAnimations();
+            example.addDeps('angular-animate.js');
           }
 
           example.setModule(module);

diff --git a/docs/src/templates/css/animations.css b/docs/src/templates/css/animations.css
@@ -64,18 +64,6 @@
   height:0;
 }
 
-.example-animate-container {
-  position:relative;
-  background:white;
-  border:1px solid black;
-  height:40px;
-  overflow:hidden;
-}
-
-.example-animate-container > div {
-  padding:1em;
-}
-
 .animate-container.animations-off * {
   -webkit-transition: none;
   -moz-transition: none;

diff --git a/docs/src/templates/js/docs.js b/docs/src/templates/js/docs.js
@@ -357,32 +357,123 @@ docsApp.serviceFactory.formPostData = function($document) {
   };
 };
 
-docsApp.serviceFactory.openPlunkr = function(templateMerge, formPostData, angularUrls) {
+
+docsApp.serviceFactory.prepareDefaultAppModule = function() {
   return function(content) {
+    var deps = [];
+    angular.forEach(content.deps, function(file) {
+      if(file.name == 'angular-animate.js') {
+        deps.push('ngAnimate');
+      }
+    });
+
+    var moduleName = 'App';
+    return {
+      module : moduleName,
+      script : "angular.module('" + moduleName + "', ['" + deps.join("','") + "']);\n\n"
+    };
+  };
+};
+
+docsApp.serviceFactory.prepareEditorAssetTags = function(angularUrls) {
+  return function(content, options) {
+    options = options || {};
+    var includeLocalFiles = options.includeLocalFiles;
+    var html = makeScriptTag(angularUrls['angular.js']);
+
     var allFiles = [].concat(content.js, content.css, content.html, content.json);
-    var indexHtmlContent = '<!doctype html>\n' +
-        '<html ng-app="{{module}}">\n' +
-        '  <head>\n' +
-        '    <script src="{{angularJSUrl}}"></script>\n' +
-        '{{scriptDeps}}\n' +
-        '  </head>\n' +
-        '  <body>\n\n' +
-        '{{indexContents}}' +
-        '\n\n  </body>\n' +
-        '</html>\n';
-    var scriptDeps = '';
     angular.forEach(content.deps, function(file) {
       if (file.name !== 'angular.js') {
-        scriptDeps += '    <script src="' + file.name + '"></script>\n';
+        var isLocal = false;
+        for(var i=0;i<allFiles.length;i++) {
+          if(allFiles[i].name == file.name) {
+            isLocal = true;
+            break;
+          }
+        }
+        if(!(isLocal && !includeLocalFiles)) {
+          var assetUrl = angularUrls[file.name] || file.name;
+          html += makeScriptTag(assetUrl);
+        }
       }
     });
+
+    if(includeLocalFiles) {
+      angular.forEach(content.css, function(file, index) {
+        html += makeCssLinkTag(file.name);
+      });
+    }
+
+    return html;
+
+
+    function makeScriptTag(src) {
+      return '<script type="text/javascript" src="' + src + '"></script>\n';
+    };
+
+    function makeCssLinkTag(src) {
+      return '<link rel="stylesheet" type="text/css" href="' + src + '" />\n';
+    };
+  };
+};
+
+
+docsApp.serviceFactory.openPlunkr = function(templateMerge, formPostData, prepareEditorAssetTags, prepareDefaultAppModule) {
+  return function(content) {
+    var hasRouting = false;
+    angular.forEach(content.deps, function(file) {
+      hasRouting = hasRouting || file.name == 'angular-route.js';
+    });
+    var indexHtmlContent = '<!doctype html>\n' +
+                           '<html ng-app="{{module}}">\n' +
+                           '  <head>\n' +
+                           '{{scriptDeps}}';
+
+    if(hasRouting) {
+        indexHtmlContent += '<script type="text/javascript">\n' +
+                            '//this is here to make plunkr work with AngularJS routing\n' +
+                            'angular.element(document.getElementsByTagName(\'head\')).append(' +
+                              'angular.element(\'<base href="\' + window.location.pathname + \'" />\')' +
+                            ');\n' +
+                            '</script>\n';
+    }
+
+    indexHtmlContent += '</head>\n' +
+                        '  <body>\n\n' +
+                        '{{indexContents}}\n\n' +
+                        '  </body>\n' +
+                        '</html>\n';
+
     indexProp = {
       module: content.module,
-      angularJSUrl: angularUrls['angular.js'],
-      scriptDeps: scriptDeps,
+      scriptDeps: prepareEditorAssetTags(content, { includeLocalFiles : true }),
       indexContents: content.html[0].content
     };
+
+    var allFiles = [].concat(content.js, content.css, content.html, content.json);
+
+    if(!content.module) {
+      var moduleData = prepareDefaultAppModule(content);
+      indexProp.module = moduleData.module;
+
+      var found = false;
+      angular.forEach(content.js, function(file) {
+        if(file.name == 'script.js') {
+          file.content = moduleData.script + file.content;
+          found = true;
+        }
+      });
+      if(!found) {
+        indexProp.scriptDeps += '<script type="text/javascript" src="script.js"></script>\n';
+        allFiles.push({
+          name : 'script.js',
+          content : moduleData.script
+        });
+      }
+    };
+
     var postData = {};
+
     angular.forEach(allFiles, function(file, index) {
       if (file.content && file.name != 'index.html') {
         postData['files[' + file.name + ']'] = file.content;
@@ -399,13 +490,14 @@ docsApp.serviceFactory.openPlunkr = function(templateMerge, formPostData, angula
   };
 };
 
-docsApp.serviceFactory.openJsFiddle = function(templateMerge, formPostData, angularUrls) {
-
+docsApp.serviceFactory.openJsFiddle = function(templateMerge, formPostData, prepareEditorAssetTags, prepareDefaultAppModule) {
   var HTML = '<div ng-app=\"{{module}}\">\n{{html:2}}</div>',
-      CSS = '</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> \n' +
-        '{{head:0}}<style>\n.ng-invalid { border: 1px solid red; }\n{{css}}',
+      CSS = '</style> <!-- Ugly Hack to make remote files preload in jsFiddle --> \n' +
+        '{{head:0}}<style>{{css}}',
       SCRIPT = '{{script}}',
-      SCRIPT_CACHE = '\n\n<!-- {{name}} -->\n<script type="text/ng-template" id="{{name}}">\n{{content:2}}</script>';
+      SCRIPT_CACHE = '\n\n<!-- {{name}} -->\n<script type="text/ng-template" id="{{name}}">\n{{content:2}}</script>',
+      BASE_HREF_TAG = '<!--  Ugly Hack to make AngularJS routing work inside of jsFiddle -->\n' +
+                      '<base href="/" />\n\n';
 
   return function(content) {
     var prop = {
@@ -414,8 +506,11 @@ docsApp.serviceFactory.openJsFiddle = function(templateMerge, formPostData, angu
           css: '',
           script: ''
         };
-
-    prop.head = templateMerge('<script src="{{url}}"></script>', {url: angularUrls['angular.js']});
+    if(!prop.module) {
+      var moduleData = prepareDefaultAppModule(content);
+      prop.script = moduleData.script;
+      prop.module = moduleData.module;
+    };
 
     angular.forEach(content.html, function(file, index) {
       if (index) {
@@ -425,6 +520,8 @@ docsApp.serviceFactory.openJsFiddle = function(templateMerge, formPostData, angu
       }
     });
 
+    prop.head = prepareEditorAssetTags(content, { includeLocalFiles : false });
+
     angular.forEach(content.js, function(file, index) {
       prop.script += file.content;
     });
@@ -433,9 +530,18 @@ docsApp.serviceFactory.openJsFiddle = function(templateMerge, formPostData, angu
       prop.css += file.content;
     });
 
+    var hasRouting = false;
+    angular.forEach(content.deps, function(file) {
+      hasRouting = hasRouting || file.name == 'angular-route.js';
+    });
+
+    var compiledHTML = templateMerge(HTML, prop);
+    if(hasRouting) {
+      compiledHTML = BASE_HREF_TAG + compiledHTML;
+    }
     formPostData("http://jsfiddle.net/api/post/library/pure/", {
       title: 'AngularJS Example',
-      html: templateMerge(HTML, prop),
+      html: compiledHTML,
       js: templateMerge(SCRIPT, prop),
       css: templateMerge(CSS, prop)
     });

diff --git a/src/ng/directive/ngClass.js b/src/ng/directive/ngClass.js
@@ -42,12 +42,18 @@ function classDirective(name, selector) {
 
 
         function removeClass(classVal) {
-          $animate.removeClass(element, flattenClasses(classVal));
+          classVal = flattenClasses(classVal);
+          if(classVal && classVal.length > 0) {
+            $animate.removeClass(element, classVal);
+          }
         }
 
 
         function addClass(classVal) {
-          $animate.addClass(element, flattenClasses(classVal));
+          classVal = flattenClasses(classVal);
+          if(classVal && classVal.length > 0) {
+            $animate.addClass(element, classVal);
+          }
         }
 
         function flattenClasses(classVal) {
@@ -103,8 +109,7 @@ function classDirective(name, selector) {
       <span ng-class="myVar">Sample Text</span>
      </file>
      <file name="style.css">
-       .my-class-add,
-       .my-class-remove {
+       .my-class-add, .my-class-remove {
          -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
          -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
          -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;

diff --git a/src/ng/directive/ngIf.js b/src/ng/directive/ngIf.js
@@ -47,26 +47,31 @@
     <file name="index.html">
       Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/>
       Show when checked:
-      <span ng-if="checked" class="example-if">
+      <span ng-if="checked" class="animate-if">
         I'm removed when the checkbox is unchecked.
       </span>
     </file>
     <file name="animations.css">
-      .example-if.ng-enter,
-      .example-if.ng-leave {
+      .animate-if {
+        background:white;
+        border:1px solid black;
+        padding:10px;
+      }
+
+      .animate-if.ng-enter, .animate-if.ng-leave {
         -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
         -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
         -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
         transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
       }
 
-      .example-if.ng-enter,
-      .example-if.ng-leave.ng-leave-active {
+      .animate-if.ng-enter,
+      .animate-if.ng-leave.ng-leave-active {
         opacity:0;
       }
 
-      .example-if.ng-enter.ng-enter-active,
-      .example-if.ng-leave {
+      .animate-if.ng-enter.ng-enter-active,
+      .animate-if.ng-leave {
         opacity:1;
       }
     </file>

diff --git a/src/ng/directive/ngInclude.js b/src/ng/directive/ngInclude.js
@@ -71,10 +71,21 @@
       Content of template2.html
     </file>
     <file name="animations.css">
+      .example-animate-container {
+        position:relative;
+        background:white;
+        border:1px solid black;
+        height:40px;
+        overflow:hidden;
+      }
+
+      .example-animate-container > div {
+        padding:10px;
+      }
+
       .include-example.ng-enter, .include-example.ng-leave {
         -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
         -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-        -ms-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
         -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
         transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
 

diff --git a/src/ng/directive/ngRepeat.js b/src/ng/directive/ngRepeat.js
@@ -127,15 +127,30 @@
       ]">
         I have {{friends.length}} friends. They are:
         <input type="search" ng-model="q" placeholder="filter friends..." />
-        <ul>
+        <ul class="example-animate-container">
           <li class="animate-repeat" ng-repeat="friend in friends | filter:q">
             [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
           </li>
         </ul>
       </div>
     </file>
     <file name="animations.css">
-      .animate-repeat {
+      .example-animate-container {
+        background:white;
+        border:1px solid black;
+        list-style:none;
+        margin:0;
+        padding:0;
+      }
+
+      .example-animate-container > li {
+        padding:10px;
+        list-style:none;
+      }
+
+      .animate-repeat.ng-enter,
+      .animate-repeat.ng-leave,
+      .animate-repeat.ng-move {
         -webkit-transition:all linear 0.5s;
         -moz-transition:all linear 0.5s;
         -o-transition:all linear 0.5s;
@@ -145,19 +160,25 @@
       .animate-repeat.ng-enter {
         line-height:0;
         opacity:0;
+        padding-top:0;
+        padding-bottom:0;
       }
       .animate-repeat.ng-enter.ng-enter-active {
         line-height:20px;
         opacity:1;
+        padding:10px;
       }
 
       .animate-repeat.ng-leave {
         opacity:1;
         line-height:20px;
+        padding:10px;
       }
       .animate-repeat.ng-leave.ng-leave-active {
         opacity:0;
         line-height:0;
+        padding-top:0;
+        padding-bottom:0;
       }
 
       .animate-repeat.ng-move { }