jeena/Podcast
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Upgrade to angularjs 1.2.0 rc1

Browse source
This commit is contained in:
Colin Frei 2013-08-21 19:46:51 +02:00
parent d223dfd662
commit d6b021bfaf
674 changed files with 79667 additions and 62269 deletions
Download patch file Download diff file Expand all files Collapse all files

84
lib/angular/docs/partials/tutorial/step_09.html Normal file → Executable file
View file

@ -1,26 +1,23 @@
<h1><code ng:non-bindable=""></code>
<span class="hint"></span>
<a href="http://github.com/angular/angular.js/edit/master/docs/content/tutorial/step_09.ngdoc" class="improve-docs btn btn-primary"><i class="icon-edit"> </i> Improve this doc</a><h1><code ng:non-bindable=""></code>
<div><span class="hint"></span>
</div>
</h1>
<div><a href="http://github.com/angular/angular.js/edit/master/docs/content/tutorial/step_09.ngdoc" class="improve-docs btn btn-primary">Improve this doc</a><ul doc-tutorial-nav="9"></ul>
<div><div class="tutorial-page tutorial-9-filters-page"><ul doc-tutorial-nav="9"></ul>
<p>In this step you will learn how to create your own custom display filter.</p>
<div doc-tutorial-reset="9">
</div>
<p>Navigate to one of the detail pages.</p>
<p>In the previous step, the details page displayed either "true" or "false" to indicate whether
<p>In the previous step, the details page displayed either &quot;true&quot; or &quot;false&quot; to indicate whether
certain phone features were present or not. We have used a custom filter to convert those text
strings into glyphs: ✓ for "true", and ✘ for "false". Let's see what the filter code looks like.</p>
strings into glyphs: ✓ for &quot;true&quot;, and ✘ for &quot;false&quot;. Let&#39;s see what the filter code looks like.</p>
<p>The most important changes are listed below. You can see the full diff on <a href="https://github.com/angular/angular-phonecat/compare/step-8...step-9">GitHub</a>:</p>
<h3>Custom Filter</h3>
<h3>Custom Filter</h2>
<p>In order to create a new filter, you are going to create a <code>phonecatFilters</code> module and register
your custom filter with this module:</p>
<p><strong><code>app/js/filters.js</code>:</strong>
<pre class="prettyprint linenums">
angular.module('phonecatFilters', []).filter('checkmark', function() {
@ -29,26 +26,19 @@ angular.module('phonecatFilters', []).filter('checkmark', function() {
};
});
</pre>
<p>The name of our filter is "checkmark". The <code>input</code> evaluates to either <code>true</code> or <code>false</code>, and we
return one of two unicode characters we have chosen to represent true or false (<code>\u2713</code> and
<code>\u2718</code>).</p>
<p>The name of our filter is &quot;checkmark&quot;. The <code>input</code> evaluates to either <code>true</code> or <code>false</code>, and we
return one of the two unicode characters we have chosen to represent true (<code>\u2713</code> -&gt; ✓) or false (<code>\u2718</code> -&gt; ✘).</p>
<p>Now that our filter is ready, we need to register the <code>phonecatFilters</code> module as a dependency for
our main <code>phonecat</code> module.</p>
<p><strong><code>app/js/app.js</code>:</strong>
<pre class="prettyprint linenums">
...
angular.module('phonecat', ['phonecatFilters']).
...
</pre>
<h3>Template</h3>
<h2>Template</h2>
<p>Since the filter code lives in the <code>app/js/filters.js</code> file, we need to include this file in our
layout template.</p>
<p><strong><code>app/index.html</code>:</strong>
<pre class="prettyprint linenums">
...
@ -56,14 +46,9 @@ layout template.</p>
&lt;script src="js/filters.js"&gt;&lt;/script&gt;
...
</pre>
<p>The syntax for using filters in Angular templates is as follows:</p>
<pre><code>{{ expression | filter }}
</code></pre>
<p>Let's employ the filter in the phone details template:</p>
<pre><code>{{ expression | filter }}</code></pre>
<p>Let&#39;s employ the filter in the phone details template:</p>
<p><strong><code>app/partials/phone-detail.html</code>:</strong>
<pre class="prettyprint linenums">
...
@ -75,11 +60,8 @@ layout template.</p>
&lt;/dl&gt;
...
</pre>
<h3>Test</h3>
<h2>Test</h3>
<p>Filters, like any other component, should be tested and these tests are very easy to write.</p>
<p><strong><code>test/unit/filtersSpec.js</code>:</strong>
<pre class="prettyprint linenums">
describe('filter', function() {
@ -97,35 +79,27 @@ describe('filter', function() {
});
});
</pre>
<p>Note that you need to configure our test injector with the <code>phonecatFilters</code> module before any of
our filter tests execute.</p>
<p>You should now see the following output in the Testacular tab:</p>
<pre><code> Chrome 22.0: Executed 4 of 4 SUCCESS (0.034 secs / 0.012 secs)
</code></pre>
<h2>Experiments</h2>
<p>You should now see the following output in the Karma tab:</p>
<pre><code> Chrome 22.0: Executed 4 of 4 SUCCESS (0.034 secs / 0.012 secs)</code></pre>
<h2>Experiments</h1>
<ul>
<li><p>Let's experiment with some of the <a href="api/ng.$filter"><code>built-in Angular filters</code></a> and add the
<li><p>Let&#39;s experiment with some of the <a href="api/ng.$filter"><code>built-in Angular filters</code></a> and add the
following bindings to <code>index.html</code>:</p>
<ul><li><code>{{ "lower cap string" | uppercase }}</code></li>
<li><code>{{ {foo: "bar", baz: 23} | json }}</code></li>
<ul>
<li><code>{{ &quot;lower cap string&quot; | uppercase }}</code></li>
<li><code>{{ {foo: &quot;bar&quot;, baz: 23} | json }}</code></li>
<li><code>{{ 1304375948024 | date }}</code></li>
<li><code>{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}</code></li></ul></li>
<li><code>{{ 1304375948024 | date:&quot;MM/dd/yyyy @ h:mma&quot; }}</code></li>
</ul>
</li>
<li><p>We can also create a model with an input element, and combine it with a filtered binding. Add
the following to index.html:</p>
<pre><code>&lt;input ng-model="userInput"&gt; Uppercased: {{ userInput | uppercase }}
</code></pre></li>
<pre><code> &lt;input ng-model=&quot;userInput&quot;&gt; Uppercased: {{ userInput | uppercase }}</code></pre>
</li>
</ul>
<h2>Summary</h2>
<h1>Summary</h2>
<p>Now that you have learned how to write and test a custom filter, go to <a href="tutorial/step_10">step 10</a> to
learn how we can use Angular to enhance the phone details page further.</p>
<ul doc-tutorial-nav="9"></ul></div>
<ul doc-tutorial-nav="9"></ul></div></div>