Merge pull request #81 from dhbaird/uiIncludeFragment-demo

Adding demo/index.html for uiInclude.

Author: ProLoser

modules/include/demo/index.html

@@ -0,0 +1,62 @@
+<section id="include">
+  <div class="page-header">
+    <h1>Include Fragment</h1>
+  </div>
+  <div class="row">
+    <div class="span6">
+      <h3>What?</h3>
+      <p><code>uiInclude</code> is an alternative to <a
+      href="http://docs.angularjs.org/api/ng.directive:ngInclude">ngInclude</a>
+      that adds fragment support via a <code>fragment</code> attribute. The
+      fragment attribute uses the <a
+      href="http://docs.angularjs.org/api/angular.element">element.find()</a>
+      API, and therefore requires jQuery in order to support full CSS
+      selectors; Without jQuery, it falls back to Angular's jqLite
+      implementation which is very limited as it only selects by element
+      name.</p>
+    </div>
+    <div class="span6">
+      <h3>Why?</h3>
+      <p>Use this instead of <code>ngInclude</code> only if you need
+      fragments. Fragment support has two primary uses: (1) it serves as a
+      drop in replacement for <a
+      href="http://api.jquery.com/load/">jQuery.load()</a>, which permits a
+      subset of a requested document to be selected, and (2) because some
+      people want to put multiple templates into a single file and they need a
+      way to select which specific fragment to use.  The former use is
+      expected to be benefit projects that are migrating from jQuery to
+      Angular.</p>
+    </div>
+  </div>
+  <div class="row">
+    <div class="span12">
+      <h3>Demo</h3>
+      <div style="display: none">
+        <fragment-1>Fragment 1</fragment-1>
+        <fragment-2>Fragment 2</fragment-2>
+        <fragment-3>Fragment 3</fragment-3>
+      </div>
+      Choose fragment to load:
+      <select ng-model="uiIncludeFragment">
+        <option value="fragment-1">fragment-1</option>
+        <option value="fragment-2">fragment-2</option>
+        <option value="fragment-3">fragment-3</option>
+      </select>
+      <br/>
+      Fragment content <span ng-show="uiIncludeFragment">(<code>fragment="'{{uiIncludeFragment}}'"</code>)</span>:
+      <div class="well">
+        <ui-include src="'demos.html'" fragment="uiIncludeFragment" ng-show="uiIncludeFragment"></ui-include>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="span12">
+      <h3>How?</h3>
+      <pre class="prettyprint">
+&lt;ui-include src="'my/url/to/partial/file'" fragment="'#id-to-fragment'"&gt;&lt;/ui-include&gt;
+&lt;!-- Don't forget to quote string literals! --&gt;
+&lt;!-- Don't forget to include jQuery if you need full selector support! --&gt;
+</pre>
+    </div>
+  </div>
+</section>

modules/utils.js

@@ -2,6 +2,7 @@ angular.module('ui.utils',  [
   "ui.event",
   "ui.format",
   "ui.highlight",
+  "ui.include",
   "ui.indeterminate",
   "ui.inflector",
   "ui.jq",
@@ -13,4 +14,4 @@ angular.module('ui.utils',  [
   "ui.showhide",
   "ui.unique",
   "ui.validate"
-]);
+]);