atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">

  <title><![CDATA[Mirco Zeiss]]></title>
  <link href="http://mircozeiss.com/atom.xml" rel="self"/>
  <link href="http://mircozeiss.com/"/>
  <updated>2013-08-22T18:27:48+02:00</updated>
  <id>http://mircozeiss.com/</id>
  <author>
    <name><![CDATA[Mirco Zeiss]]></name>
    
  </author>
  <generator uri="http://octopress.org/">Octopress</generator>

  
  <entry>
    <title type="html"><![CDATA[GitHub like signup form with AngularJS and Bootstrap v3]]></title>
    <link href="http://mircozeiss.com/github-like-signup-form-with-angularjs-and-bootstrap-v3/"/>
    <updated>2013-08-21T22:37:00+02:00</updated>
    <id>http://mircozeiss.com/github-like-signup-form-with-angularjs-and-bootstrap-v3</id>
    <content type="html"><![CDATA[<p>Building a modern and clean signup form still requires more coding than one might think. <a href="https://github.com/">GitHub</a>
has a simple signup form that I really like. Just three input fields (username, email and password) and you are ready
to go.</p>

<p>In this post we will build a fully featured copy of this signup form. AngularJS manages our frontend and a small Express.js
app takes care of our backend. As an extra gimmick I added password verification to make sure that our users don&#8217;t
 have typos in their passwords. In the end we have some validation in the frontend and also in our backend. Take a look
 at the <a href="http://mysterious-escarpment-9591.herokuapp.com/signup">final app</a>. If everything was correct you should see a json object with your username, email and the hashed password
 in addition to some extra information. I also uploaded the whole code to GitHub <a href="https://github.com/zeMirco/ng-signup-form">ng-signup-form</a>.</p>

<h3>The layout</h3>

<p>We use the brand new <a href="http://getbootstrap.com/">Bootstrap v3</a> to build our page. Inside a panel component we have a form with
four input fields. The first one is for username, the second one for email and the last two ones are for password and
 password verification.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/signup-form-layout.png" title="Signup form built on top of Bootstrap v3" ></p>

<h3>Backend with Express.js</h3>

<p>Our backend consists of only three routes: <code>GET /signup</code>, <code>POST /signup</code> and <code>POST /signup/check/username</code>. Our main route <code>/</code> redirects
directly to <code>/signup</code> so when you open the page the signup form is immediately shown.</p>

<p>The code for the first route <code>GET /signup</code> looks like the following.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/signup&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">res</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="s1">&#39;signup&#39;</span><span class="p">);</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>It simply takes our <code>signup.jade</code> template and renders it. Our second route <code>POST /signup</code> is the target for the signup form. Let&#8217;s go through the code step by step.
First of all we get the values of the input fields from the request object.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">username</span> <span class="o">=</span> <span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">username</span><span class="p">;</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">email</span> <span class="o">=</span> <span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">email</span><span class="p">;</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">password</span> <span class="o">=</span> <span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">password</span><span class="p">;</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">verification</span> <span class="o">=</span> <span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">verification</span><span class="p">;</span>
</span></code></pre></td></tr></table></div></figure>


<p>Afterwards we perform some input validation, check for duplicate username, create a salt and hashed password
and at the end send a response back to the user. Whenever we encounter invalid data we rerender the
<code>signup.jade</code> template with an additional error message to tell the user what went wrong. Let&#8217;s start with some input validation.</p>

<h4>1. Input validation on the backend</h4>

<p>Although our submit button is disabled as long as we don&#8217;t have valid values in our input fields, some clever
people will be able to send invalid data to our backend. That&#8217;s why we have to double check the incoming data
on the server. We have to make sure that none of the fields are empty, the username doesn&#8217;t contain any
non-url-safe characters, email value is a valid email address and finally that the provided password matches
the verification.</p>

<p>All in all the code looks like this.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">error</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
</span><span class='line'><span class="c1">// regexp from https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js#L4</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">EMAIL_REGEXP</span> <span class="o">=</span> <span class="sr">/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,6}$/</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// check for valid inputs</span>
</span><span class='line'><span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">username</span> <span class="o">||</span> <span class="o">!</span><span class="nx">email</span> <span class="o">||</span> <span class="o">!</span><span class="nx">password</span> <span class="o">||</span> <span class="o">!</span><span class="nx">verification</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">error</span> <span class="o">=</span> <span class="s1">&#39;All fields are required&#39;</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">username</span> <span class="o">!==</span> <span class="nb">encodeURIComponent</span><span class="p">(</span><span class="nx">username</span><span class="p">))</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">error</span> <span class="o">=</span> <span class="s1">&#39;Username may not contain any non-url-safe characters&#39;</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">email</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="nx">EMAIL_REGEXP</span><span class="p">))</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">error</span> <span class="o">=</span> <span class="s1">&#39;Email is invalid&#39;</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">password</span> <span class="o">!==</span> <span class="nx">verification</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">error</span> <span class="o">=</span> <span class="s1">&#39;Passwords don\&#39;t match&#39;</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="k">if</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">response</span><span class="p">.</span><span class="nx">status</span><span class="p">(</span><span class="mi">403</span><span class="p">);</span>
</span><span class='line'>  <span class="nx">response</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="s1">&#39;signup&#39;</span><span class="p">,</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">error</span><span class="o">:</span> <span class="nx">error</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>  <span class="k">return</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<h4>2. Check for duplicate username</h4>

<p>In a real world app you would query your database to check for duplicate usernames. In this example
I&#8217;m using an in-memory array with json data as dummy database. We simply loop through the array to see
if an entry with the requested username already exists.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="c1">// dummy db</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">dummyDb</span> <span class="o">=</span> <span class="p">[</span>
</span><span class='line'>  <span class="p">{</span><span class="nx">username</span><span class="o">:</span> <span class="s1">&#39;john&#39;</span><span class="p">,</span> <span class="nx">email</span><span class="o">:</span> <span class="s1">&#39;john@email.com&#39;</span><span class="p">},</span>
</span><span class='line'>  <span class="p">{</span><span class="nx">username</span><span class="o">:</span> <span class="s1">&#39;jack&#39;</span><span class="p">,</span> <span class="nx">email</span><span class="o">:</span> <span class="s1">&#39;jack@email.com&#39;</span><span class="p">},</span>
</span><span class='line'>  <span class="p">{</span><span class="nx">username</span><span class="o">:</span> <span class="s1">&#39;jim&#39;</span><span class="p">,</span> <span class="nx">email</span><span class="o">:</span> <span class="s1">&#39;jim@email.com&#39;</span><span class="p">},</span>
</span><span class='line'><span class="p">];</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// check if username is already taken</span>
</span><span class='line'><span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">dummyDb</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">dummyDb</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">username</span> <span class="o">===</span> <span class="nx">username</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">response</span><span class="p">.</span><span class="nx">status</span><span class="p">(</span><span class="mi">403</span><span class="p">);</span>
</span><span class='line'>    <span class="nx">response</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="s1">&#39;signup&#39;</span><span class="p">,</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">error</span><span class="o">:</span> <span class="s1">&#39;Username is already taken&#39;</span>
</span><span class='line'>    <span class="p">});</span>
</span><span class='line'>    <span class="k">return</span><span class="p">;</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>Pro tip: Never do the same for duplicate email addresses. Read more about this topic in Troy Hunt&#8217;s excellent
post <a href="http://www.troyhunt.com/2012/05/everything-you-ever-wanted-to-know.html">Everything you ever wanted to know about building a secure password reset feature</a>.</p>

<h4>3. Create salt and hash password</h4>

<p>Just for completeness and demonstration purpose I included a small function to create a random salt and hash the provided
password. It might help beginners and reminds everyone never to save passwords in plain text to your db.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="c1">// create salt and hash password</span>
</span><span class='line'><span class="nx">pass</span><span class="p">.</span><span class="nx">hash</span><span class="p">(</span><span class="nx">password</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">salt</span><span class="p">,</span> <span class="nx">hash</span><span class="p">){</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'>  <span class="c1">// yeah we have a new user</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">user</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">username</span><span class="o">:</span> <span class="nx">username</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">email</span><span class="o">:</span> <span class="nx">email</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">salt</span><span class="o">:</span> <span class="nx">salt</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">hash</span><span class="o">:</span> <span class="nx">hash</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">createdAt</span><span class="o">:</span> <span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">()</span>
</span><span class='line'>  <span class="p">};</span>
</span><span class='line'>
</span><span class='line'>  <span class="c1">// for fully featured example check duplicate email, send verification link and save user to db</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">(</span><span class="mi">200</span><span class="p">,</span> <span class="nx">user</span><span class="p">)</span>
</span><span class='line'>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>I used <a href="https://github.com/visionmedia/node-pwd">pwd</a> to generate the salt and hash the password. You need to include the <a href="https://github.com/visionmedia/node-pwd/pull/3/files">pull request</a>
from jlubawy to make this work for node v0.10 and above. An alternative is <a href="https://github.com/ncb000gt/node.bcrypt.js/">bcrypt</a>.</p>

<p>That&#8217;s it. We&#8217;re are almost done with our backend. I will explain the third route <code>POST /signup/check/username</code> in the section
<strong>Custom validators</strong>.</p>

<h3>Form validation with AngularJS</h3>

<p>A good starting point for form validation with AngularJS is the section in the guide <a href="http://docs.angularjs.org/guide/forms">about forms</a>.
First of all you might want to tell the browser not to validate your form since we&#8217;d like to use AngularJS for that. Simply add <code>novalidate</code>
as an attribute to your form.</p>

<p>In our example we use two of the built in validators namely <code>required</code> and <code>email</code>. <code>required</code> makes sure you really enter some content
into the input fields and <code>email</code> uses a regular expression to verify a correct format of the email address. To show error message whenever one
of those validators returns an error we use Bootstrap&#8217;s <code>.help-block</code> class in conjunction with the <code>ngShow</code> directive.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">span</span><span class="p">.</span><span class="nx">help</span><span class="o">-</span><span class="nx">block</span><span class="p">(</span><span class="nx">ng</span><span class="o">-</span><span class="nx">show</span><span class="o">=</span><span class="s2">&quot;form.username.$dirty &amp;&amp; form.username.$error.required&quot;</span><span class="p">)</span> <span class="nx">Please</span> <span class="nx">choose</span> <span class="nx">a</span> <span class="nx">username</span>
</span><span class='line'><span class="nx">span</span><span class="p">.</span><span class="nx">help</span><span class="o">-</span><span class="nx">block</span><span class="p">(</span><span class="nx">ng</span><span class="o">-</span><span class="nx">show</span><span class="o">=</span><span class="s2">&quot;form.email.$dirty &amp;&amp; form.email.$error.email&quot;</span><span class="p">)</span> <span class="nx">Email</span> <span class="nx">is</span> <span class="nx">invalid</span>
</span></code></pre></td></tr></table></div></figure>


<p>You might wonder what <code>$dirty</code> is doing in our code. Every form and every form element in the AngularJS world has two states: <code>$pristine</code> and
<code>$dirty</code>. Your form gets the <code>$pristine</code> state on initial page load before you start entering text into the input fields. So before touching your form it is <code>$pristine</code>. As soon as you start
entering values the forms loses this state and gets the <code>$dirty</code> state because you started working with it. AngularJS also provides CSS classes
to allow for different styling of these states <code>.ng-pristine</code> and <code>.ng-dirty</code>. Read more about that topic in the AngularJS docs about <a href="http://docs.angularjs.org/api/ng.directive:form.FormController">FormController</a>.
If we used the same code as above but without <code>form.username.$dirty</code> and <code>form.email.$dirty</code> the span blocks would be visible on page load.</p>

<h4>Custom validators</h4>

<p>Our first custom validator sends a <code>POST</code> request to the server to check if the username is already taken. We will use a similar
structure as GitHub does. They send a request to <code>/signup_check/username</code> and if the username is already taken they respond with
a status of 403 and the message <code>Username already taken</code>. The same goes for usernames that contain invalid characters.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/github-dev-tools-headers.png" title="Chrome dev tools showing request and response headers" ></p>

<p>Here is the code of our Express app.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="s1">&#39;/signup/check/username&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">username</span> <span class="o">=</span> <span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">username</span><span class="p">;</span>
</span><span class='line'>  <span class="c1">// check if username contains non-url-safe characters</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">username</span> <span class="o">!==</span> <span class="nb">encodeURIComponent</span><span class="p">(</span><span class="nx">username</span><span class="p">))</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">res</span><span class="p">.</span><span class="nx">json</span><span class="p">(</span><span class="mi">403</span><span class="p">,</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">invalidChars</span><span class="o">:</span> <span class="kc">true</span>
</span><span class='line'>    <span class="p">});</span>
</span><span class='line'>    <span class="k">return</span><span class="p">;</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'>  <span class="c1">// check if username is already taken - query your db here</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">usernameTaken</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
</span><span class='line'>  <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">dummyDb</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">if</span> <span class="p">(</span><span class="nx">dummyDb</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">username</span> <span class="o">===</span> <span class="nx">username</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">usernameTaken</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
</span><span class='line'>      <span class="k">break</span><span class="p">;</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">usernameTaken</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">res</span><span class="p">.</span><span class="nx">json</span><span class="p">(</span><span class="mi">403</span><span class="p">,</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">isTaken</span><span class="o">:</span> <span class="kc">true</span>
</span><span class='line'>    <span class="p">});</span>
</span><span class='line'>    <span class="k">return</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'>  <span class="c1">// looks like everything is fine</span>
</span><span class='line'>  <span class="nx">res</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="mi">200</span><span class="p">);</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>We first check for non-url-safe characters and afterwards if the username is already taken. If one of those is the case
we send status 403 and some json data back to the client to tell it what went wrong. If everything is fine we simply send
a status of 200 without any data.</p>

<p>On the client side we build a custom directive called <code>unique-username</code>.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
<span class='line-number'>35</span>
<span class='line-number'>36</span>
<span class='line-number'>37</span>
<span class='line-number'>38</span>
<span class='line-number'>39</span>
<span class='line-number'>40</span>
<span class='line-number'>41</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">directive</span><span class="p">(</span><span class="s1">&#39;uniqueUsername&#39;</span><span class="p">,</span> <span class="p">[</span><span class="s1">&#39;$http&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">$http</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">return</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">require</span><span class="o">:</span> <span class="s1">&#39;ngModel&#39;</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">link</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">scope</span><span class="p">,</span> <span class="nx">elem</span><span class="p">,</span> <span class="nx">attrs</span><span class="p">,</span> <span class="nx">ctrl</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">scope</span><span class="p">.</span><span class="nx">busy</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
</span><span class='line'>      <span class="nx">scope</span><span class="p">.</span><span class="nx">$watch</span><span class="p">(</span><span class="nx">attrs</span><span class="p">.</span><span class="nx">ngModel</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>
</span><span class='line'>        <span class="c1">// hide old error messages</span>
</span><span class='line'>        <span class="nx">ctrl</span><span class="p">.</span><span class="nx">$setValidity</span><span class="p">(</span><span class="s1">&#39;isTaken&#39;</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
</span><span class='line'>        <span class="nx">ctrl</span><span class="p">.</span><span class="nx">$setValidity</span><span class="p">(</span><span class="s1">&#39;invalidChars&#39;</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'>        <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>          <span class="c1">// don&#39;t send undefined to the server during dirty check</span>
</span><span class='line'>          <span class="c1">// empty username is caught by required directive</span>
</span><span class='line'>          <span class="k">return</span><span class="p">;</span>
</span><span class='line'>        <span class="p">}</span>
</span><span class='line'>
</span><span class='line'>        <span class="c1">// show spinner</span>
</span><span class='line'>        <span class="nx">scope</span><span class="p">.</span><span class="nx">busy</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>        <span class="c1">// send request to server</span>
</span><span class='line'>        <span class="nx">$http</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="s1">&#39;/signup/check/username&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">username</span><span class="o">:</span> <span class="nx">value</span><span class="p">})</span>
</span><span class='line'>          <span class="p">.</span><span class="nx">success</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>            <span class="c1">// everything is fine -&gt; do nothing</span>
</span><span class='line'>            <span class="nx">scope</span><span class="p">.</span><span class="nx">busy</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
</span><span class='line'>          <span class="p">})</span>
</span><span class='line'>          <span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>
</span><span class='line'>            <span class="c1">// display new error message</span>
</span><span class='line'>            <span class="k">if</span> <span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">isTaken</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>              <span class="nx">ctrl</span><span class="p">.</span><span class="nx">$setValidity</span><span class="p">(</span><span class="s1">&#39;isTaken&#39;</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
</span><span class='line'>            <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">invalidChars</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>              <span class="nx">ctrl</span><span class="p">.</span><span class="nx">$setValidity</span><span class="p">(</span><span class="s1">&#39;invalidChars&#39;</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
</span><span class='line'>            <span class="p">}</span>
</span><span class='line'>
</span><span class='line'>            <span class="nx">scope</span><span class="p">.</span><span class="nx">busy</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
</span><span class='line'>          <span class="p">});</span>
</span><span class='line'>      <span class="p">})</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">}]);</span>
</span></code></pre></td></tr></table></div></figure>


<p>We can use this directive in the same way we did before with <code>required</code> and <code>email</code> validators.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">span</span><span class="p">.</span><span class="nx">help</span><span class="o">-</span><span class="nx">block</span><span class="p">(</span><span class="nx">ng</span><span class="o">-</span><span class="nx">show</span><span class="o">=</span><span class="s2">&quot;form.username.$dirty &amp;&amp; form.username.$error.isTaken&quot;</span><span class="p">)</span> <span class="nx">Username</span> <span class="nx">already</span> <span class="nx">taken</span>
</span><span class='line'><span class="nx">span</span><span class="p">.</span><span class="nx">help</span><span class="o">-</span><span class="nx">block</span><span class="p">(</span><span class="nx">ng</span><span class="o">-</span><span class="nx">show</span><span class="o">=</span><span class="s2">&quot;form.username.$dirty &amp;&amp; form.username.$error.invalidChars&quot;</span><span class="p">)</span> <span class="nx">Username</span> <span class="nx">may</span> <span class="nx">not</span> <span class="nx">contain</span> <span class="nx">any</span> <span class="nx">non</span><span class="o">-</span><span class="nx">url</span><span class="o">-</span><span class="nx">safe</span> <span class="nx">characters</span>
</span></code></pre></td></tr></table></div></figure>


<p>The <code>uniqueUsername</code> directive also shows a spinner while talking to the server. Through <code>ng-show="busy"</code> we can hide and show the spinner.
The icon is taken from the Glyphicons that come with Bootstrap and some CSS makes it spin.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
</pre></td><td class='code'><pre><code class='css'><span class='line'><span class="k">@-webkit-keyframes</span> <span class="nt">rotating</span> <span class="p">{</span>
</span><span class='line'>  <span class="nt">from</span> <span class="p">{</span>
</span><span class='line'>    <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">transform</span><span class="o">:</span> <span class="n">rotate</span><span class="p">(</span><span class="m">0</span><span class="n">deg</span><span class="p">);</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'>  <span class="nt">to</span> <span class="p">{</span>
</span><span class='line'>    <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">transform</span><span class="o">:</span> <span class="n">rotate</span><span class="p">(</span><span class="m">360</span><span class="n">deg</span><span class="p">);</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="nc">.rotating</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">float</span><span class="o">:</span> <span class="k">right</span><span class="p">;</span>
</span><span class='line'>  <span class="k">position</span><span class="o">:</span> <span class="k">relative</span><span class="p">;</span>
</span><span class='line'>  <span class="k">top</span><span class="o">:</span> <span class="m">-24px</span><span class="p">;</span>
</span><span class='line'>  <span class="k">right</span><span class="o">:</span> <span class="m">10px</span><span class="p">;</span>
</span><span class='line'>  <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">animation</span><span class="o">:</span> <span class="n">rotating</span> <span class="m">1s</span> <span class="n">linear</span> <span class="n">infinite</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>Our second custom form validation method checks whether the password and the password verification input fields have exactly the
same values. Again we use a custom directive for that.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">directive</span><span class="p">(</span><span class="s1">&#39;match&#39;</span><span class="p">,</span> <span class="p">[</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">return</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">require</span><span class="o">:</span> <span class="s1">&#39;ngModel&#39;</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">link</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">scope</span><span class="p">,</span> <span class="nx">elem</span><span class="p">,</span> <span class="nx">attrs</span><span class="p">,</span> <span class="nx">ctrl</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>
</span><span class='line'>      <span class="nx">scope</span><span class="p">.</span><span class="nx">$watch</span><span class="p">(</span><span class="s1">&#39;[&#39;</span> <span class="o">+</span> <span class="nx">attrs</span><span class="p">.</span><span class="nx">ngModel</span> <span class="o">+</span> <span class="s1">&#39;, &#39;</span> <span class="o">+</span> <span class="nx">attrs</span><span class="p">.</span><span class="nx">match</span> <span class="o">+</span> <span class="s1">&#39;]&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">value</span><span class="p">){</span>
</span><span class='line'>        <span class="nx">ctrl</span><span class="p">.</span><span class="nx">$setValidity</span><span class="p">(</span><span class="s1">&#39;match&#39;</span><span class="p">,</span> <span class="nx">value</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">===</span> <span class="nx">value</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span> <span class="p">);</span>
</span><span class='line'>      <span class="p">},</span> <span class="kc">true</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">}]);</span>
</span></code></pre></td></tr></table></div></figure>


<p>To use this directive apply it to the password input field as well as the verification input field.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">input</span><span class="p">.</span><span class="nx">form</span><span class="o">-</span><span class="nx">control</span><span class="p">(</span><span class="nx">type</span><span class="o">=</span><span class="s2">&quot;password&quot;</span><span class="p">,</span> <span class="nx">name</span><span class="o">=</span><span class="s2">&quot;password&quot;</span><span class="p">,</span> <span class="nx">id</span><span class="o">=</span><span class="s2">&quot;password&quot;</span><span class="p">,</span> <span class="nx">ng</span><span class="o">-</span><span class="nx">model</span><span class="o">=</span><span class="s2">&quot;password&quot;</span><span class="p">,</span> <span class="nx">required</span><span class="p">,</span> <span class="nx">match</span><span class="o">=</span><span class="s2">&quot;verification&quot;</span><span class="p">)</span>
</span><span class='line'><span class="nx">input</span><span class="p">.</span><span class="nx">form</span><span class="o">-</span><span class="nx">control</span><span class="p">(</span><span class="nx">type</span><span class="o">=</span><span class="s2">&quot;password&quot;</span><span class="p">,</span> <span class="nx">name</span><span class="o">=</span><span class="s2">&quot;verification&quot;</span><span class="p">,</span> <span class="nx">id</span><span class="o">=</span><span class="s2">&quot;verification&quot;</span><span class="p">,</span> <span class="nx">ng</span><span class="o">-</span><span class="nx">model</span><span class="o">=</span><span class="s2">&quot;verification&quot;</span><span class="p">,</span> <span class="nx">required</span><span class="p">,</span> <span class="nx">match</span><span class="o">=</span><span class="s2">&quot;password&quot;</span><span class="p">)</span>
</span></code></pre></td></tr></table></div></figure>


<p>The error message works as expected but only show it when the verification input fields contains a value.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">span</span><span class="p">.</span><span class="nx">help</span><span class="o">-</span><span class="nx">block</span><span class="p">(</span><span class="nx">ng</span><span class="o">-</span><span class="nx">show</span><span class="o">=</span><span class="s2">&quot;form.verification.$dirty &amp;&amp; form.verification.$error.match &amp;&amp; !form.verification.$error.required&quot;</span><span class="p">)</span> <span class="nx">Passwords</span> <span class="nx">don</span><span class="err">&#39;</span><span class="nx">t</span> <span class="nx">match</span>
</span></code></pre></td></tr></table></div></figure>


<p>Last but not least we keep the submit button disabled as long as our form contains validation errors.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">input</span><span class="p">.</span><span class="nx">btn</span><span class="p">.</span><span class="nx">btn</span><span class="o">-</span><span class="nx">primary</span><span class="p">(</span><span class="nx">type</span><span class="o">=</span><span class="s2">&quot;submit&quot;</span><span class="p">,</span> <span class="nx">value</span><span class="o">=</span><span class="s2">&quot;Sign up&quot;</span><span class="p">,</span> <span class="nx">ng</span><span class="o">-</span><span class="nx">disabled</span><span class="o">=</span><span class="s2">&quot;form.$invalid&quot;</span><span class="p">)</span>
</span></code></pre></td></tr></table></div></figure>


<h3>Conclusion</h3>

<p>We&#8217;ve built a signup form very similar to the one GitHub uses with an Express.js backend and AngularJS
on the frontend. In addition to the form validators already provided by AngularJS we&#8217;ve implemented two
custom form validators for unique usernames and password verification. Take a look at the final <a href="http://mysterious-escarpment-9591.herokuapp.com/signup">app</a>. Try usernames like
<strong>john</strong>, <strong>jack</strong> and <strong>jim</strong>.</p>

<p>One thing I couldn&#8217;t achieve is sending invalid usernames and emails back from the server to the client.
So that the input fields already contain the false information and the user just has to correct them. That
doesn&#8217;t work because AngularJS doesn&#8217;t allow an invalid email inside an input field of type <code>email</code>. To
better understand the problem take a look at a quick <a href="http://plnkr.co/edit/XzcCA7?p=preview">example</a>. If you&#8217;ve got an idea how to solve this problem
please feel free to comment below or provide an answer to my question at <a href="http://stackoverflow.com/questions/18217916/how-to-init-invalid-email-and-show-in-inputtype-email">stackoverflow</a>. Thank you!</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Sync multiple AngularJS apps without server via PouchDB]]></title>
    <link href="http://mircozeiss.com/sync-multiple-angularjs-apps-without-server-via-pouchdb/"/>
    <updated>2013-07-10T20:34:00+02:00</updated>
    <id>http://mircozeiss.com/sync-multiple-angularjs-apps-without-server-via-pouchdb</id>
    <content type="html"><![CDATA[<p>Nowadays several solutions exist to keep web apps in sync and/or store data offline with JavaScript:</p>

<ul>
<li><a href="http://socket.io/">Socket.io</a></li>
<li><a href="http://www.breezejs.com/">Breeze.js</a></li>
<li><a href="https://towtruck.mozillalabs.com/">TowTruck</a></li>
<li><a href="https://www.firebase.com/">Firebase</a></li>
<li><a href="http://pusher.com/">Pusher</a></li>
<li><a href="https://parse.com/products">Parse</a></li>
<li>and my latest favorite <a href="http://hood.ie/">Hood.ie</a></li>
</ul>


<p>I could go on with that list but you get the idea. Some of the mentioned technologies are more powerful
and have more features out of the box than others. They usually need a server that runs your app and
takes care of all the business logic. In this post I will demonstrate how to build a web app that
syncs data automatically, runs on all modern platforms, stores data persistently and <strong>doesn&#8217;t need a server</strong>.
The app is powered by <a href="http://angularjs.org/">AngularJS</a> and <a href="http://pouchdb.com/">PouchDB</a>.</p>

<p>The video shows the final app in action. On the left side we have Chrome and Firefox showing our <code>index.html</code> from file and
on the right side you can see Futon, the admin panel for CouchDB.</p>

<iframe width="640" height="480" src="http://www.youtube.com/embed/QSC1fnfUlU0" frameborder="0" allowfullscreen></iframe>


<br>


<br>


<h3>Install CouchDB</h3>

<p>First of all you have to install CouchDB. You could use some third party instance provider like <a href="https://cloudant.com/">Cloudant</a>
 or <a href="http://www.iriscouch.com/">Iris Couch</a>. However our final example won&#8217;t work with them because we need to have CORS enabled on our CouchDB.
 CORS was introduced with v1.3. Cloudant instances are running on v1.0.2 whereas Iris Couch actually provides
  v1.3. Sadly you cannot enable CORS by hand. That&#8217;s why we will work with our own instance.</p>

<p>Go to <a href="http://couchdb.apache.org/">couchdb.apache.org</a> and click on the big fat download button. Download
the package for your operating system, select a mirror, wait and then open CouchDB. On my MacBook I get
a little CouchDB icon on my Menu Bar. Click on it and select <strong>Open admin console</strong>. Or just open your browser and navigate to
<a href="http://127.0.0.1:5984/_utils/">127.0.0.1:5984/_utils</a>. You are now inside Futon, which is the admin tool for CouchDB.</p>

<p>First of all we have to <a href="http://docs.couchdb.org/en/latest/cors.html">enable CORS</a>. Go to section <em>httpd</em> and
set <strong>enable_cors</strong> to true. Navigate to the bottom of the page and click on <strong>Add a new section</strong>. Enter the following into
the form that pops up</p>

<ul>
<li>section: cors</li>
<li>option: origins</li>
<li>value: *</li>
</ul>


<p>Now let&#8217;s create our database. Click on <strong>Create database &#8230;</strong> and enter <code>ng-db</code>. The name is important and we have
to use the exact name later on for the client code. That&#8217;s it! Our CouchDB instance is running, CORS is enabled
and we have a database to work with. Next install PouchDB.</p>

<h3>Download PouchDB</h3>

<p>To add PouchDB to your app you simply have to <a href="http://download.pouchdb.com/pouchdb-nightly.min.js">download</a> the JS file. As always I recommend working with the
non-minified version during development and switch to the min version for deployment. Include the .js file inside
your index.html.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;pouchdb.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>Done. We can now start using PouchDB in our app.</p>

<h3>Create AngularJS app</h3>

<p>Activate AngularJS as shown in the <a href="http://angularjs.org/">docs</a>.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">myApp</span> <span class="o">=</span> <span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;myApp&#39;</span><span class="p">,</span> <span class="p">[]);</span>
</span></code></pre></td></tr></table></div></figure>


<h4>PouchDB service</h4>

<p>The first service we create simply makes the PouchDB instance available inside the AngularJS world.
It also turns on continuous replication so changes are automatically synced between database and client
no matter where they occur.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">myApp</span><span class="p">.</span><span class="nx">factory</span><span class="p">(</span><span class="s1">&#39;myPouch&#39;</span><span class="p">,</span> <span class="p">[</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">mydb</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Pouch</span><span class="p">(</span><span class="s1">&#39;ng-pouch&#39;</span><span class="p">);</span>
</span><span class='line'>  <span class="nx">Pouch</span><span class="p">.</span><span class="nx">replicate</span><span class="p">(</span><span class="s1">&#39;ng-pouch&#39;</span><span class="p">,</span> <span class="s1">&#39;http://127.0.0.1:5984/ng-db&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">continuous</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
</span><span class='line'>  <span class="nx">Pouch</span><span class="p">.</span><span class="nx">replicate</span><span class="p">(</span><span class="s1">&#39;http://127.0.0.1:5984/ng-db&#39;</span><span class="p">,</span> <span class="s1">&#39;ng-pouch&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">continuous</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
</span><span class='line'>  <span class="k">return</span> <span class="nx">mydb</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="p">}]);</span>
</span></code></pre></td></tr></table></div></figure>


<h4>PouchDB promises wrapper</h4>

<p>Our second service is a simple wrapper around PouchDB&#8217;s native API to save and remove documents. The
service provides two helper functions <code>return()</code> and <code>remove(id)</code> that both return promises. That keeps
the async code nice and tidy.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
<span class='line-number'>35</span>
<span class='line-number'>36</span>
<span class='line-number'>37</span>
<span class='line-number'>38</span>
<span class='line-number'>39</span>
<span class='line-number'>40</span>
<span class='line-number'>41</span>
<span class='line-number'>42</span>
<span class='line-number'>43</span>
<span class='line-number'>44</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">myApp</span><span class="p">.</span><span class="nx">factory</span><span class="p">(</span><span class="s1">&#39;pouchWrapper&#39;</span><span class="p">,</span> <span class="p">[</span><span class="s1">&#39;$q&#39;</span><span class="p">,</span> <span class="s1">&#39;$rootScope&#39;</span><span class="p">,</span> <span class="s1">&#39;myPouch&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">$q</span><span class="p">,</span> <span class="nx">$rootScope</span><span class="p">,</span> <span class="nx">myPouch</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">return</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">add</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">text</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="kd">var</span> <span class="nx">deferred</span> <span class="o">=</span> <span class="nx">$q</span><span class="p">.</span><span class="nx">defer</span><span class="p">();</span>
</span><span class='line'>      <span class="kd">var</span> <span class="nx">doc</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;todo&#39;</span><span class="p">,</span>
</span><span class='line'>        <span class="nx">text</span><span class="o">:</span> <span class="nx">text</span>
</span><span class='line'>      <span class="p">};</span>
</span><span class='line'>      <span class="nx">myPouch</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="nx">doc</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">$rootScope</span><span class="p">.</span><span class="nx">$apply</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>          <span class="k">if</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>            <span class="nx">deferred</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="nx">err</span><span class="p">)</span>
</span><span class='line'>          <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>            <span class="nx">deferred</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="nx">res</span><span class="p">)</span>
</span><span class='line'>          <span class="p">}</span>
</span><span class='line'>        <span class="p">});</span>
</span><span class='line'>      <span class="p">});</span>
</span><span class='line'>      <span class="k">return</span> <span class="nx">deferred</span><span class="p">.</span><span class="nx">promise</span><span class="p">;</span>
</span><span class='line'>    <span class="p">},</span>
</span><span class='line'>    <span class="nx">remove</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="kd">var</span> <span class="nx">deferred</span> <span class="o">=</span> <span class="nx">$q</span><span class="p">.</span><span class="nx">defer</span><span class="p">();</span>
</span><span class='line'>      <span class="nx">myPouch</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">id</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">doc</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">$rootScope</span><span class="p">.</span><span class="nx">$apply</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>          <span class="k">if</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>            <span class="nx">deferred</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span>
</span><span class='line'>          <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>            <span class="nx">myPouch</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="nx">doc</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>              <span class="nx">$rootScope</span><span class="p">.</span><span class="nx">$apply</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>                <span class="k">if</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>                  <span class="nx">deferred</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="nx">err</span><span class="p">)</span>
</span><span class='line'>                <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>                  <span class="nx">deferred</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="nx">res</span><span class="p">)</span>
</span><span class='line'>                <span class="p">}</span>
</span><span class='line'>              <span class="p">});</span>
</span><span class='line'>            <span class="p">});</span>
</span><span class='line'>          <span class="p">}</span>
</span><span class='line'>        <span class="p">});</span>
</span><span class='line'>      <span class="p">});</span>
</span><span class='line'>      <span class="k">return</span> <span class="nx">deferred</span><span class="p">.</span><span class="nx">promise</span><span class="p">;</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="p">}]);</span>
</span></code></pre></td></tr></table></div></figure>


<h4>PouchDB event listener</h4>

<p>Our last service is a listener that emits events whenever PouchDB fires the <code>onChange</code> event. It either
emits <code>newTodo</code> when a new document is added to the database or <code>delTodo</code> when a document is deleted. The change
object coming from PouchDB looks like the following</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="p">{</span>
</span><span class='line'>  <span class="s2">&quot;id&quot;</span><span class="o">:</span> <span class="s2">&quot;6F48205D-E97B-4621-ACAD-4CD3DFAC074E&quot;</span><span class="p">,</span>
</span><span class='line'>  <span class="s2">&quot;seq&quot;</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span>
</span><span class='line'>  <span class="s2">&quot;changes&quot;</span><span class="o">:</span> <span class="p">[{</span><span class="s2">&quot;rev&quot;</span><span class="o">:</span><span class="s2">&quot;2-96ea3cf93a75c6510c08c95e42686aa1&quot;</span><span class="p">}],</span>
</span><span class='line'>  <span class="s2">&quot;deleted&quot;</span><span class="o">:</span> <span class="kc">true</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>From the key <code>deleted</code> we get a Boolean value that tells us if the change was a deletion or an addition
to our database. If the value is <code>true</code> we know that an object was deleted from our database and we therefore
emit a <code>delTodo</code> event with the document id. If the value is <code>false</code> we unfortunately don&#8217;t get the new
object directly from the <code>onChange</code> handler. We only get the document id and have to manually get it
via GET request. At the end we fire a <code>newTodo</code> event with the new document as data.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">myApp</span><span class="p">.</span><span class="nx">factory</span><span class="p">(</span><span class="s1">&#39;listener&#39;</span><span class="p">,</span> <span class="p">[</span><span class="s1">&#39;$rootScope&#39;</span><span class="p">,</span> <span class="s1">&#39;myPouch&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">$rootScope</span><span class="p">,</span> <span class="nx">myPouch</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">myPouch</span><span class="p">.</span><span class="nx">changes</span><span class="p">({</span>
</span><span class='line'>    <span class="nx">continuous</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">onChange</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">change</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">change</span><span class="p">.</span><span class="nx">deleted</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">$rootScope</span><span class="p">.</span><span class="nx">$apply</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>          <span class="nx">myPouch</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">change</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">doc</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>            <span class="nx">$rootScope</span><span class="p">.</span><span class="nx">$apply</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>              <span class="k">if</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span>
</span><span class='line'>              <span class="nx">$rootScope</span><span class="p">.</span><span class="nx">$broadcast</span><span class="p">(</span><span class="s1">&#39;newTodo&#39;</span><span class="p">,</span> <span class="nx">doc</span><span class="p">);</span>
</span><span class='line'>            <span class="p">})</span>
</span><span class='line'>          <span class="p">});</span>
</span><span class='line'>        <span class="p">})</span>
</span><span class='line'>      <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">$rootScope</span><span class="p">.</span><span class="nx">$apply</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>          <span class="nx">$rootScope</span><span class="p">.</span><span class="nx">$broadcast</span><span class="p">(</span><span class="s1">&#39;delTodo&#39;</span><span class="p">,</span> <span class="nx">change</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
</span><span class='line'>        <span class="p">});</span>
</span><span class='line'>      <span class="p">}</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>  <span class="p">})</span>
</span><span class='line'><span class="p">}]);</span>
</span></code></pre></td></tr></table></div></figure>


<h4>Main controller</h4>

<p>Our controller combines the three services and creates a link to our view. First of all we create
an empty array that will hold our todo objects. The <code>submit()</code> function
is executed whenever the <strong>Add</strong> button is clicked. A click on the small cross calls the <code>remove(id)</code>
function.</p>

<p>At the end of our controller we have the listener for our two custom events <code>newTodo</code> and <code>delTodo</code>.
It adds or removes items from the <code>todos</code> array.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">myApp</span><span class="p">.</span><span class="nx">controller</span><span class="p">(</span><span class="s1">&#39;TodoCtrl&#39;</span><span class="p">,</span> <span class="p">[</span><span class="s1">&#39;$scope&#39;</span><span class="p">,</span> <span class="s1">&#39;listener&#39;</span><span class="p">,</span> <span class="s1">&#39;pouchWrapper&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">$scope</span><span class="p">,</span> <span class="nx">listener</span><span class="p">,</span> <span class="nx">pouchWrapper</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">$scope</span><span class="p">.</span><span class="nx">submit</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">pouchWrapper</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">$scope</span><span class="p">.</span><span class="nx">text</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">$scope</span><span class="p">.</span><span class="nx">text</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>
</span><span class='line'>    <span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">reason</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">reason</span><span class="p">);</span>
</span><span class='line'>    <span class="p">})</span>
</span><span class='line'>  <span class="p">};</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">$scope</span><span class="p">.</span><span class="nx">remove</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">pouchWrapper</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="nx">id</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'><span class="c1">//      console.log(res);</span>
</span><span class='line'>    <span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">reason</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">reason</span><span class="p">);</span>
</span><span class='line'>    <span class="p">})</span>
</span><span class='line'>  <span class="p">};</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">$scope</span><span class="p">.</span><span class="nx">todos</span> <span class="o">=</span> <span class="p">[];</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">$scope</span><span class="p">.</span><span class="nx">$on</span><span class="p">(</span><span class="s1">&#39;newTodo&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="nx">todo</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">$scope</span><span class="p">.</span><span class="nx">todos</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">todo</span><span class="p">);</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">$scope</span><span class="p">.</span><span class="nx">$on</span><span class="p">(</span><span class="s1">&#39;delTodo&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span><span class="o">&lt;</span><span class="nx">$scope</span><span class="p">.</span><span class="nx">todos</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="k">if</span> <span class="p">(</span><span class="nx">$scope</span><span class="p">.</span><span class="nx">todos</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">_id</span> <span class="o">===</span> <span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">$scope</span><span class="p">.</span><span class="nx">todos</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">i</span><span class="p">,</span><span class="mi">1</span><span class="p">);</span>
</span><span class='line'>      <span class="p">}</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>
</span><span class='line'><span class="p">}]);</span>
</span></code></pre></td></tr></table></div></figure>


<p>One thing I haven&#8217;t figured out yet is an error message similar to:</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>GET http://127.0.0.1:5984/ng-db/_local%2F4e458454e3c7031672110dc4a02c72f4 404 (Object Not Found)
</span></code></pre></td></tr></table></div></figure>


<p>The rest works absolutely fine and although I get this error message I can&#8217;t see any problems during sync.</p>

<h3>Conclusion</h3>

<p>We used AngularJS and PouchDB to build a small app that syncs serverless and stores data persistently.
 Changes are distributed automatically. They can be made inside the database, on any client or on any third
 party device that pushes changes to the connected CouchDB. AngularJS events update our models in the controller that pushes
 changes to our views via two-way data binding. It is possible to add todos to the app when offline and
 as soon you are back online all data is synced to the connected devices. For more information about
 the topic visit <a href="http://nobackend.org/">nobackend.org</a>.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Grunt deployment process with Jade]]></title>
    <link href="http://mircozeiss.com/grunt-deployment-process-with-jade/"/>
    <updated>2013-06-27T19:20:00+02:00</updated>
    <id>http://mircozeiss.com/grunt-deployment-process-with-jade</id>
    <content type="html"><![CDATA[<p>When building web projects you want to concatenate and minify CSS and JavaScript files
before deployment. Instead of having multiple single files you only
have one file with one single request. It also means you have to change the path to the script inside
your <code>.html</code> or <code>.jade</code> file. During development your code often looks like this.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;js/script1.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span><span class='line'><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;js/script2.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span><span class='line'><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;js/script3.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span><span class='line'><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;js/script4.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>For deployment you might want to change this to a single request fetching a minified file.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;js/script.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>In this post I will demonstrate three solutions for this problem.</p>

<ol>
<li><code>grunt-usemin</code> with <code>.html</code> files</li>
<li><code>grunt-preprocess</code> with a tmp/ , dev/ and prod/ folder</li>
<li><code>grunt-preprocess</code> with only dev/ and prod/ folder</li>
</ol>


<h3>Meet grunt-usemin</h3>

<p>If you are using plain HTML files <a href="https://github.com/yeoman/grunt-usemin">grunt-usemin</a> is your best friend. In your <code>index.html</code> file
you only have to add two lines of code.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="c">&lt;!-- build:js js/app.js --&gt;</span>
</span><span class='line'><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;js/script1.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span><span class='line'><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;js/script2.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span><span class='line'><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;js/script3.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span><span class='line'><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;js/script4.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span><span class='line'><span class="c">&lt;!-- endbuild --&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>Add a task for <code>usemin</code> to your <code>Gruntfile.js</code>.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">useminPrepare</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">html</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;deploy/views/example.html&#39;</span><span class="p">]</span>
</span><span class='line'><span class="p">},</span>
</span><span class='line'><span class="nx">usemin</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">html</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;deploy/views/example.html&#39;</span><span class="p">]</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>After running <code>grunt usemin</code> your <code>index.html</code> contains the link to the minified file.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;js/app.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>Unfortunately this doesn&#8217;t work for <code>.jade</code> files as <code>grunt-usemin</code> spits out HTML code. Therefore
let&#8217;s look at another solution.</p>

<h3>grunt-preprocess as an alternative</h3>

<p><a href="https://github.com/onehealth/grunt-preprocess">grunt-preprocess</a> doesn&#8217;t alter your code. It only shows or hides certain blocks depending
on various settings. You can use it in HTML, JavaScript, CSS, C, Java, etc.</p>

<h4>Code in tmp/ and deploy to dev/ and prod/</h4>

<p>One way to set up your app structure would be coding in a tmp/ folder and deploying to a development folder for testing and
to a production folder for final deployments.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>/tmp
</span><span class='line'>/dev
</span><span class='line'>/prod
</span></code></pre></td></tr></table></div></figure>


<p>With this structure you can use <code>grunt-preprocess</code> as follows.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="c">&lt;!-- @if production=false --&gt;</span>
</span><span class='line'>script(src=&quot;/javascripts/script1.js&quot;)
</span><span class='line'>script(src=&quot;/javascripts/script2.js&quot;)
</span><span class='line'>script(src=&quot;/javascripts/script3.js&quot;)
</span><span class='line'><span class="c">&lt;!-- @endif --&gt;</span>
</span><span class='line'>
</span><span class='line'><span class="c">&lt;!-- @if production=true --&gt;</span>
</span><span class='line'>script(src=&quot;/javascripts/script.min.js&quot;)
</span><span class='line'><span class="c">&lt;!-- @endif --&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>You can&#8217;t work with this file directly since it loads your single script files and also the minified file. Include
the tasks for building dev and prod versions into your <code>Gruntfile.js</code>.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">preprocess</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>  <span class="c1">// production version with min script</span>
</span><span class='line'>  <span class="nx">prod</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">src</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;deploy/views/layout-wrong.jade&#39;</span><span class="p">],</span>
</span><span class='line'>    <span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">inline</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
</span><span class='line'>      <span class="nx">context</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">production</span><span class="o">:</span> <span class="kc">true</span>  <span class="c1">// important</span>
</span><span class='line'>      <span class="p">}</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>  <span class="p">},</span>
</span><span class='line'>  <span class="c1">// development version</span>
</span><span class='line'>  <span class="nx">dev</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">src</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;deploy/views/layout-wrong.jade&#39;</span><span class="p">],</span>
</span><span class='line'>    <span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">inline</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
</span><span class='line'>      <span class="nx">context</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">production</span><span class="o">:</span> <span class="kc">false</span>  <span class="c1">// important</span>
</span><span class='line'>      <span class="p">}</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>The important part is the <code>context</code> where you can set the <code>production</code> variable to <code>true</code> or <code>false</code>.
When running <code>grunt preprocess:dev</code> you&#8217;ll get</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">script</span><span class="p">(</span><span class="nx">src</span><span class="o">=</span><span class="s2">&quot;/javascripts/script1.js&quot;</span><span class="p">)</span>
</span><span class='line'><span class="nx">script</span><span class="p">(</span><span class="nx">src</span><span class="o">=</span><span class="s2">&quot;/javascripts/script2.js&quot;</span><span class="p">)</span>
</span><span class='line'><span class="nx">script</span><span class="p">(</span><span class="nx">src</span><span class="o">=</span><span class="s2">&quot;/javascripts/script3.js&quot;</span><span class="p">)</span>
</span></code></pre></td></tr></table></div></figure>


<p>compared to running <code>grunt preprocess:prod</code></p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">script</span><span class="p">(</span><span class="nx">src</span><span class="o">=</span><span class="s2">&quot;/javascripts/script.min.js&quot;</span><span class="p">)</span>
</span></code></pre></td></tr></table></div></figure>


<p>This setup adds extra overhead to your project folder and requires recompiling on every change. To neglect recompiling
you could add a <strong>watch</strong> task to your <code>Gruntfile</code> so the files are recreated every time you make changes. Still it is not an ideal
solution.</p>

<h4>Code in dev/ and deploy to /prod</h4>

<p>Here is a neat little trick that allows working with your development files and deploying
files that contain the links to minified assets. So you don&#8217;t have to work in a tmp folder and
build files either for your development or your deployment folder.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'>  <span class="c">&lt;!--</span> <span class="err">@</span><span class="nx">exclude</span> <span class="o">--&gt;</span>
</span><span class='line'>  <span class="nx">script</span><span class="p">(</span><span class="nx">src</span><span class="o">=</span><span class="s2">&quot;/javascripts/script1.js&quot;</span><span class="p">)</span>
</span><span class='line'>  <span class="nx">script</span><span class="p">(</span><span class="nx">src</span><span class="o">=</span><span class="s2">&quot;/javascripts/script2.js&quot;</span><span class="p">)</span>
</span><span class='line'>  <span class="nx">script</span><span class="p">(</span><span class="nx">src</span><span class="o">=</span><span class="s2">&quot;/javascripts/script3.js&quot;</span><span class="p">)</span>
</span><span class='line'>  <span class="c">&lt;!--</span> <span class="err">@</span><span class="nx">endexclude</span> <span class="o">--&gt;</span>
</span><span class='line'>
</span><span class='line'><span class="c">&lt;!--</span> <span class="err">@</span><span class="nx">exclude</span> <span class="o">--&gt;</span>
</span><span class='line'><span class="c1">//- &lt;!-- @endexclude --&gt;</span>
</span><span class='line'>  <span class="nx">script</span><span class="p">(</span><span class="nx">src</span><span class="o">=</span><span class="s2">&quot;/javascripts/script.min.js&quot;</span><span class="p">)</span>
</span></code></pre></td></tr></table></div></figure>


<p>The preprocess task in your Gruntfile looks like this</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">preprocess</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">inline</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">src</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;deploy/views/layout.jade&#39;</span><span class="p">],</span>
</span><span class='line'>    <span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">inline</span><span class="o">:</span> <span class="kc">true</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>How does this work? Well, first of all if you start your Express app and navigate to the index page
you will only see</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;/javascripts/script.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>It is not documented but Jade won&#8217;t complain when you use plain HTML comments. That allows us to use this
nifty trick. The line <code>script(src="/javascripts/script.min.js")</code> is commented out because of the <code>//-</code> one line
above. Therefore you can work with this file during development and <code>script.min.js</code> won&#8217;t be called.
Now comes the magic: if you build your deployment files everything between <code>&lt;!-- @exclude --&gt;</code> and
<code>&lt;!-- @endexclude --&gt;</code> is removed from the file. That means your single script files don&#8217;t exist anymore
and also the comment <code>//-</code> above the minified script will be removed. That means the line <code>script(src="/javascripts/script.min.js")</code>
is now active and calls your minified file.</p>

<p>To make this work keep an eye on the indentation of your <code>layout.jade</code> file. The following won&#8217;t work.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="c">&lt;!-- @exclude --&gt;</span>
</span><span class='line'>script(src=&quot;/javascripts/script1.js&quot;)
</span><span class='line'>script(src=&quot;/javascripts/script2.js&quot;)
</span><span class='line'>script(src=&quot;/javascripts/script3.js&quot;)
</span><span class='line'><span class="c">&lt;!-- @endexclude --&gt;</span>
</span><span class='line'>
</span><span class='line'><span class="c">&lt;!-- @exclude --&gt;</span>
</span><span class='line'>//- <span class="c">&lt;!-- @endexclude --&gt;</span>
</span><span class='line'>  script(src=&quot;/javascripts/script.min.js&quot;)
</span></code></pre></td></tr></table></div></figure>


<p>It produces this output in Jade.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='jade'><span class='line'><span class="nt">script</span>(<span class="na">src=</span><span class="s">&quot;//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js&quot;</span>)
</span><span class='line'>  <span class="nt">script</span>(<span class="na">src=</span><span class="s">&quot;/javascripts/script.min.js&quot;</span>)
</span></code></pre></td></tr></table></div></figure>


<p>Compiled to HTML it looks like this and won&#8217;t execute any code</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;...&quot;</span><span class="nt">&gt;</span><span class="nx">script</span><span class="p">(</span><span class="nx">src</span><span class="o">=</span><span class="s2">&quot;/javascripts/script.min.js&quot;</span><span class="p">)</span><span class="nt">&lt;/script&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<h3>Conclusion</h3>

<p>Replacing links to your assets for deployment is easy. When dealing with <code>html</code> files
use <a href="https://github.com/yeoman/grunt-usemin">grunt-usemin</a>. Otherwise give <a href="https://github.com/onehealth/grunt-preprocess">grunt-preprocess</a> a try. You can find an example Express
app with all the relevant grunt tasks at <a href="https://github.com/zeMirco/grunt-jade-preprocess">github</a>. To get the app ready for deployment run the following
commands.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>grunt deploy
</span><span class='line'><span class="nb">cd </span>deployment
</span><span class='line'>node app.js
</span></code></pre></td></tr></table></div></figure>


<p>Now open your browser, navigate to <a href="http://localhost:3000">localhost:3000</a> and take a look at
the source code. You should see only one JavaScript file <code>script.min.js</code>.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Building offline applications with AngularJS and PouchDB]]></title>
    <link href="http://mircozeiss.com/building-offline-applications-with-angularjs-and-pouchdb/"/>
    <updated>2013-06-17T19:20:00+02:00</updated>
    <id>http://mircozeiss.com/building-offline-applications-with-angularjs-and-pouchdb</id>
    <content type="html"><![CDATA[<p>You may have read my other post about <a href="http://mircozeiss.com/async-couchdb-queries-with-nano-and-promises/">Async CouchDB queries with nano and promises</a>. In that post I built a small app to track how many goals a player
scored per match. Every action was stored as a single document in CouchDB. JavaScript promises were
used to access the data which allowed functions be easily reused.</p>

<p>In this article I will build the same application without any backend. I use <a href="http://pouchdb.com/">PouchDB</a> as my database
and <a href="http://angularjs.org/">AngularJS</a> as the frontend framework.</p>

<h3>PouchDB</h3>

<p>I&#8217;d like to talk a little more about PouchDB since you can find a lot of intro articles for AngularJS
but not as many for PouchDB.</p>

<blockquote><p>PouchDB is a JavaScript library that allows you to store and query data for web applications that need to work offline, and sync with an online database when you are online.</p></blockquote>

<p>PouchDB provides the same API as CouchDB but works in the browser. If you already know CouchDB you
also know how to work with PouchDB. The library is under active development and currently available as an alpha version.
Although it is an alpha version it is very stable and so far I didn&#8217;t have any problems with the code.</p>

<p>The <a href="http://pouchdb.com/api.html">documentation</a> is a good starting point. Some handy features that were added recently and are not yet in the
documentation are</p>

<ul>
<li>built in map reduce functions</li>
<li>and query functions.</li>
</ul>


<h4>Built in map reduce functions</h4>

<p>You might know the built in map reduce functions from CouchDB. They are <code>_count</code>, <code>_sum</code> and <code>_stats</code>. All are written in Erlang
and allow fast access to your data. PouchDB also has those built in functions. Therefore you don&#8217;t have to write your own and pass them as
a parameter into the query function. A simple query looks like the following.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">map</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">doc</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">doc</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="s1">&#39;goal&#39;</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">emit</span><span class="p">(</span><span class="nx">doc</span><span class="p">.</span><span class="nx">playerId</span><span class="p">,</span> <span class="kc">null</span><span class="p">)</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">};</span>
</span><span class='line'>
</span><span class='line'><span class="nx">pouchdb</span><span class="p">.</span><span class="nx">query</span><span class="p">({</span><span class="nx">map</span><span class="o">:</span> <span class="nx">map</span><span class="p">,</span> <span class="nx">reduce</span><span class="o">:</span> <span class="s1">&#39;_count&#39;</span><span class="p">},</span> <span class="p">{</span><span class="nx">key</span><span class="o">:</span> <span class="s1">&#39;1&#39;</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span>
</span><span class='line'>  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">res</span><span class="p">);</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>The code above loops through all documents in our db. Whenever the mapping function finds one that has the type <code>goal</code> it emits it sorted by
<code>playerId</code>. The query function afterwards simply counts all documents with the playerID <code>'1'</code> and returns the sum.</p>

<p>Here is the code for the all the built in functions so you know what they do.</p>

<p><code>_count</code> <a href="https://github.com/daleharvey/pouchdb/blob/master/src/plugins/pouchdb.mapreduce.js#L37">(source)</a> counts all documents.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">function</span><span class="p">(</span><span class="nx">keys</span><span class="p">,</span> <span class="nx">values</span><span class="p">,</span> <span class="nx">rereduce</span><span class="p">){</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">rereduce</span><span class="p">){</span>
</span><span class='line'>    <span class="k">return</span> <span class="nx">sum</span><span class="p">(</span><span class="nx">values</span><span class="p">);</span>
</span><span class='line'>  <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">return</span> <span class="nx">values</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p><code>_sum</code> <a href="https://github.com/daleharvey/pouchdb/blob/master/src/plugins/pouchdb.mapreduce.js#L33">(source)</a> returns the sum of all document values.
It would return the same value as <code>_count</code> when every document is emitted with values equals <code>1</code>.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">function</span><span class="p">(</span><span class="nx">keys</span><span class="p">,</span> <span class="nx">values</span><span class="p">){</span>
</span><span class='line'>  <span class="k">return</span> <span class="nx">sum</span><span class="p">(</span><span class="nx">values</span><span class="p">);</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p><code>_stats</code> <a href="https://github.com/daleharvey/pouchdb/blob/master/src/plugins/pouchdb.mapreduce.js#L45">(source)</a> provides some basic statistical
analysis for our data.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">function</span><span class="p">(</span><span class="nx">keys</span><span class="p">,</span> <span class="nx">values</span><span class="p">,</span> <span class="nx">rereduce</span><span class="p">){</span>
</span><span class='line'>  <span class="k">return</span> <span class="p">{</span>
</span><span class='line'>    <span class="s1">&#39;sum&#39;</span><span class="o">:</span> <span class="nx">sum</span><span class="p">(</span><span class="nx">values</span><span class="p">),</span>
</span><span class='line'>    <span class="s1">&#39;min&#39;</span><span class="o">:</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="nx">values</span><span class="p">),</span>
</span><span class='line'>    <span class="s1">&#39;max&#39;</span><span class="o">:</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="nx">values</span><span class="p">),</span>
</span><span class='line'>    <span class="s1">&#39;count&#39;</span><span class="o">:</span> <span class="nx">values</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span>
</span><span class='line'>    <span class="s1">&#39;sumsqr&#39;</span><span class="o">:</span> <span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
</span><span class='line'>      <span class="kd">var</span> <span class="nx">_sumsqr</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
</span><span class='line'>      <span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">idx</span> <span class="k">in</span> <span class="nx">values</span><span class="p">){</span>
</span><span class='line'>        <span class="nx">_sumsqr</span> <span class="o">+=</span> <span class="nx">values</span><span class="p">[</span><span class="nx">idx</span><span class="p">]</span> <span class="o">*</span> <span class="nx">values</span><span class="p">[</span><span class="nx">idx</span><span class="p">];</span>
</span><span class='line'>      <span class="p">}</span>
</span><span class='line'>      <span class="k">return</span> <span class="nx">_sumsqr</span><span class="p">;</span>
</span><span class='line'>    <span class="p">})()</span>
</span><span class='line'>  <span class="p">};</span>
</span><span class='line'>  <span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<h4>Query functions</h4>

<p>Query functions are needed to <a href="http://pouchdb.com/api.html#fetch_a_document">fetch a document</a> when you don&#8217;t know the document&#8217;s ID. I couldn&#8217;t find anything about query
functions with individual keys in the documentation. So I looked at the tests and found the <a href="https://github.com/daleharvey/pouchdb/blob/decb29d057065f01a6121e129b24cd02240ef1b2/tests/test.views.js#L109-L124">test</a>
for opts.key.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">db</span><span class="p">.</span><span class="nx">query</span><span class="p">(</span><span class="nx">queryFun</span><span class="p">,</span> <span class="p">{</span><span class="nx">reduce</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="nx">key</span><span class="o">:</span> <span class="s1">&#39;key2&#39;</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">_</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">equal</span><span class="p">(</span><span class="nx">res</span><span class="p">.</span><span class="nx">rows</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="s1">&#39;Doc with key&#39;</span><span class="p">);</span>
</span><span class='line'>  <span class="nx">db</span><span class="p">.</span><span class="nx">query</span><span class="p">(</span><span class="nx">queryFun</span><span class="p">,</span> <span class="p">{</span><span class="nx">reduce</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="nx">key</span><span class="o">:</span> <span class="s1">&#39;key3&#39;</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">_</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">equal</span><span class="p">(</span><span class="nx">res</span><span class="p">.</span><span class="nx">rows</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="s1">&#39;Multiple docs with key&#39;</span><span class="p">);</span>
</span><span class='line'>    <span class="nx">start</span><span class="p">();</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>It shows that we can simply use the <code>key</code> property to look for specific results in our db. The same goes for <code>startkey</code> and <code>endkey</code>
 properties. Their documentation is in section <a href="http://pouchdb.com/api.html#fetch_documents">fetch documents</a> describing the <code>allDocs()</code> method.</p>

<h3>Marry PouchDB and AngularJS</h3>

<p>Since both frameworks are implemented independently, they don&#8217;t know how to work with each other. We
have to bring PouchDB into the AngularJS world in order to have access from the controller. The best
way to do this is using a <code>service</code>.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">services</span><span class="p">.</span><span class="nx">factory</span><span class="p">(</span><span class="s1">&#39;pouchdb&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">Pouch</span><span class="p">.</span><span class="nx">enableAllDbs</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
</span><span class='line'>  <span class="k">return</span> <span class="k">new</span> <span class="nx">Pouch</span><span class="p">(</span><span class="s1">&#39;myPouch&#39;</span><span class="p">);</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>Inject this service whenever you want to use PouchDB from your controller.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">myApp</span><span class="p">.</span><span class="nx">controller</span><span class="p">(</span><span class="s1">&#39;AppCtrl&#39;</span><span class="p">,</span> <span class="p">[</span><span class="s1">&#39;$scope&#39;</span><span class="p">,</span> <span class="s1">&#39;pouchdb&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">$scope</span><span class="p">,</span> <span class="nx">pouchdb</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="c1">// more code here</span>
</span><span class='line'><span class="p">}]);</span>
</span></code></pre></td></tr></table></div></figure>


<h3>Wrapping PouchDB into promises</h3>

<p>The PouchDB API will probably support promises at some point <a href="https://github.com/daleharvey/pouchdb/issues/608">in the future</a>. At the moment it does not.
If you&#8217;ve read my post about <a href="http://mircozeiss.com/async-couchdb-queries-with-nano-and-promises/">async CouchDB queries with nano and promises</a>, you know
promises come in really handy. As AngularJS offers promises through the <code>$q</code> module we can build some wrapper functions to interact with our data.</p>

<p>The wrapper is an AngularJS <strong>factory</strong> and consists of two functions. The first one <code>add(playerId)</code> adds a goal document to the db.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">add</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">playerId</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">deferred</span> <span class="o">=</span> <span class="nx">$q</span><span class="p">.</span><span class="nx">defer</span><span class="p">();</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">doc</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;goal&#39;</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">playerId</span><span class="o">:</span> <span class="nx">playerId</span>
</span><span class='line'>  <span class="p">};</span>
</span><span class='line'>  <span class="nx">pouchdb</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="nx">doc</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">$rootScope</span><span class="p">.</span><span class="nx">$apply</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>      <span class="k">if</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">deferred</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="nx">err</span><span class="p">)</span>
</span><span class='line'>      <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">deferred</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="nx">res</span><span class="p">)</span>
</span><span class='line'>      <span class="p">}</span>
</span><span class='line'>    <span class="p">});</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>  <span class="k">return</span> <span class="nx">deferred</span><span class="p">.</span><span class="nx">promise</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>We need the <code>$rootScope.$apply()</code> function because AngularJS doesn&#8217;t know what&#8217;s happening inside the <code>pouchdb.post()</code> callback.
It loses the scope and would neither <code>reject</code> nor <code>resolve</code> the promise. Read more about this topic at <a href="http://jimhoskins.com/2012/12/17/angularjs-and-apply.html">AngularJS and scope.$apply</a>
by Jim Hoskins.</p>

<p>The second function <code>getScore(playerId)</code> counts all documents per player and returns the total amount. If no documents are found
for a certain <code>playerId</code> it returns 0.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">getScore</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">playerId</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">deferred</span> <span class="o">=</span> <span class="nx">$q</span><span class="p">.</span><span class="nx">defer</span><span class="p">();</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">map</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">doc</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">if</span> <span class="p">(</span><span class="nx">doc</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="s1">&#39;goal&#39;</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">emit</span><span class="p">(</span><span class="nx">doc</span><span class="p">.</span><span class="nx">playerId</span><span class="p">,</span> <span class="kc">null</span><span class="p">)</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>  <span class="p">};</span>
</span><span class='line'>  <span class="nx">pouchdb</span><span class="p">.</span><span class="nx">query</span><span class="p">({</span><span class="nx">map</span><span class="o">:</span> <span class="nx">map</span><span class="p">,</span> <span class="nx">reduce</span><span class="o">:</span> <span class="s1">&#39;_count&#39;</span><span class="p">},</span> <span class="p">{</span><span class="nx">key</span><span class="o">:</span> <span class="nx">playerId</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">$rootScope</span><span class="p">.</span><span class="nx">$apply</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>      <span class="k">if</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">deferred</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span>
</span><span class='line'>      <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>        <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">res</span><span class="p">.</span><span class="nx">rows</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>          <span class="nx">deferred</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
</span><span class='line'>        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>          <span class="nx">deferred</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="nx">res</span><span class="p">.</span><span class="nx">rows</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">value</span><span class="p">);</span>
</span><span class='line'>        <span class="p">}</span>
</span><span class='line'>      <span class="p">}</span>
</span><span class='line'>    <span class="p">});</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>  <span class="k">return</span> <span class="nx">deferred</span><span class="p">.</span><span class="nx">promise</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>We can now inject this helper service into our controller and start using it. First of all get the score for each player
on page load.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">$q</span><span class="p">.</span><span class="nx">all</span><span class="p">([</span>
</span><span class='line'>  <span class="nx">pp</span><span class="p">.</span><span class="nx">getScore</span><span class="p">(</span><span class="s1">&#39;1&#39;</span><span class="p">),</span>
</span><span class='line'>  <span class="nx">pp</span><span class="p">.</span><span class="nx">getScore</span><span class="p">(</span><span class="s1">&#39;2&#39;</span><span class="p">),</span>
</span><span class='line'>  <span class="nx">pp</span><span class="p">.</span><span class="nx">getScore</span><span class="p">(</span><span class="s1">&#39;3&#39;</span><span class="p">)</span>
</span><span class='line'><span class="p">]).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">$scope</span><span class="p">.</span><span class="nx">score</span><span class="p">[</span><span class="s1">&#39;1&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">res</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
</span><span class='line'>    <span class="nx">$scope</span><span class="p">.</span><span class="nx">score</span><span class="p">[</span><span class="s1">&#39;2&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">res</span><span class="p">[</span><span class="mi">1</span><span class="p">];</span>
</span><span class='line'>    <span class="nx">$scope</span><span class="p">.</span><span class="nx">score</span><span class="p">[</span><span class="s1">&#39;3&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">res</span><span class="p">[</span><span class="mi">2</span><span class="p">]</span>
</span><span class='line'>  <span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>A click on a button invokes the <code>incScore()</code> function that calls our <code>add()</code> from the helper service. It creates a new
document, saves it to db and calculates the new score.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">$scope</span><span class="p">.</span><span class="nx">incScore</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">pp</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span>
</span><span class='line'>    <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="k">return</span> <span class="nx">pp</span><span class="p">.</span><span class="nx">getScore</span><span class="p">(</span><span class="nx">id</span><span class="p">);</span>
</span><span class='line'>    <span class="p">})</span>
</span><span class='line'>    <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">score</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">$scope</span><span class="p">.</span><span class="nx">score</span><span class="p">[</span><span class="nx">id</span><span class="p">]</span> <span class="o">=</span> <span class="nx">score</span><span class="p">;</span>
</span><span class='line'>    <span class="p">})</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>A working example with all code can be found at <a href="http://plnkr.co/edit/BoxJTY?p=preview">plnkr#BoxJTY</a>. Play with the scores of each player and afterwards
close your browser. Then open your browser again and navigate to the example page. Et voilà, the individual scores stay the same. The
values were stored in the browser&#8217;s db, completely offline. Be careful when you empty the cache. All
values will be lost. You will also notice that when you visit the example with a different browser the
individual scores are not the same. That&#8217;s because each browser (even each browser version) uses its own
private database that is not shared with other browsers or browser versions. If you want to transfer the score
to other browsers or mobile devices you have to implement a backend solution.</p>

<h3>Testing</h3>

<p>Not long ago I tweeted the following</p>

<blockquote class="twitter-tweet"><p>when writing your next uber <a href="https://twitter.com/search/%23angularjs">#angularjs</a> blog post provide appropriate tests</p>&mdash; Mirco Zeiss (@zeMirco) <a href="https://twitter.com/zeMirco/status/344182488098291713">June 10, 2013</a></blockquote>


<script async src="http://mircozeiss.com//platform.twitter.com/widgets.js" charset="utf-8"></script>


<p>The AngularJS folks are quite passionate about testing and so am I. It can be annoying sometimes and of course
takes more time but it is well worth it and will one day save your a**. In addition it will improve
the quality of your code and therefore the quality of your blog post.</p>

<p>So let&#8217;s write some tests for our new services. Before we start we have to think about which
things can actually be tested.</p>

<ol>
<li><code>Pouch.enableAllDbs</code> should be set to <code>true</code></li>
<li>The returned object should be an instance of Pouch</li>
<li>The name of our db should be <strong>myPouch</strong></li>
<li>The service should be able to save an object to db</li>
<li>The service should be able to retrieve an object from db</li>
</ol>


<p>When all the above tests pass we can be pretty sure that we&#8217;ve done a good job.</p>

<h4>1. Check if enableAllDbs is set to true</h4>

<p>Setting <code>enableAllDbs</code> to <code>true</code> isn&#8217;t necessary for this small example app. However if you&#8217;d like
to obtain a list of all databases one day this feature must have been set to <code>true</code> in advance.</p>

<p>The test looks like this.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;should set &quot;enableAllDbs&quot; to true&#39;</span><span class="p">,</span> <span class="nx">inject</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">pouchdb</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">expect</span><span class="p">(</span><span class="nx">Pouch</span><span class="p">.</span><span class="nx">enableAllDbs</span><span class="p">).</span><span class="nx">toBeTruthy</span><span class="p">();</span>
</span><span class='line'><span class="p">}));</span>
</span></code></pre></td></tr></table></div></figure>


<p>That was easy. Just three lines of code. Cool, testing is fun!</p>

<h4>2. Verify the constructor of the object returned from the service</h4>

<p>This is also a very simple test.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;should return a Pouch instance&#39;</span><span class="p">,</span> <span class="nx">inject</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">pouchdb</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">expect</span><span class="p">(</span><span class="nx">pouchdb</span> <span class="k">instanceof</span> <span class="nx">Pouch</span><span class="p">).</span><span class="nx">toBeTruthy</span><span class="p">();</span>
</span><span class='line'><span class="p">}));</span>
</span></code></pre></td></tr></table></div></figure>


<p>Really that&#8217;s it? Yep quite nice, right?</p>

<h4>3. Verify the name of our db</h4>

<p>I&#8217;m sorry but I have to disappoint you. Testing is not always as easy as in the first two examples. The following is an asynchronous test and that&#8217;s not as
simple with AngularJS and Jasmine.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;should create a db with name &quot;myPouch&quot;&#39;</span><span class="p">,</span> <span class="nx">inject</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">pouchdb</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">result</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">pouchdb</span><span class="p">.</span><span class="nx">info</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">result</span> <span class="o">=</span> <span class="nx">res</span><span class="p">;</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">waitsFor</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">return</span> <span class="nx">result</span><span class="p">;</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">runs</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">expect</span><span class="p">(</span><span class="nx">result</span><span class="p">.</span><span class="nx">db_name</span><span class="p">).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s1">&#39;_pouch_myPouch&#39;</span><span class="p">);</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>
</span><span class='line'><span class="p">}));</span>
</span></code></pre></td></tr></table></div></figure>


<p>First we have to call the <code>info()</code> method which gives us some information
about our db in the callback. Within that callback we save the info to our global variable <code>result</code>. The
<code>waitsFor()</code> and <code>runs()</code> functions are needed by Jasmine to wait for the result from our info callback and
then continue with the test.</p>

<h4>4. Test if service can save objects to db</h4>

<p>For this test we simply use our new service, save an object to the database and check for the correct callback.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;should allow saving new objects via a promise&#39;</span><span class="p">,</span> <span class="nx">inject</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">pp</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">result</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">pp</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="s1">&#39;1&#39;</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">result</span> <span class="o">=</span> <span class="nx">res</span><span class="p">;</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">waitsFor</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">return</span> <span class="nx">result</span><span class="p">;</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">runs</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">expect</span><span class="p">(</span><span class="nx">result</span><span class="p">.</span><span class="nx">ok</span><span class="p">).</span><span class="nx">toBeTruthy</span><span class="p">();</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>
</span><span class='line'><span class="p">}));</span>
</span></code></pre></td></tr></table></div></figure>


<h4>5. Test if service can retrieve objects from db</h4>

<p>For our last test we try to retrieve the before saved object and check whether we got the right score.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;should allow retrieving new objects via a promise&#39;</span><span class="p">,</span> <span class="nx">inject</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">pp</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">result</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">pp</span><span class="p">.</span><span class="nx">getScore</span><span class="p">(</span><span class="s1">&#39;1&#39;</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">result</span> <span class="o">=</span> <span class="nx">res</span><span class="p">;</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">waitsFor</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">return</span> <span class="nx">result</span><span class="p">;</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">runs</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">expect</span><span class="p">(</span><span class="nx">result</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>
</span><span class='line'><span class="p">}));</span>
</span></code></pre></td></tr></table></div></figure>


<p>That&#8217;s it! We can now safely assume that our service is working correctly and does what we expect.</p>

<h3>Conclusion</h3>

<p>AngularJS and PouchDB are awesome frameworks. I hope their engineers
and the community will support both for a long time to come. Combined they are a match made in heaven. AngularJS gives you all the
tools to keep your frontend code nice and tidy while PouchDB takes care of your data. Use both to write
offline applications that run in the browser on every modern device. See the final app at <a href="http://plnkr.co/edit/BoxJTY?p=preview">plnkr#BoxJTY</a>.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Using CSRF protection with Express and Angular]]></title>
    <link href="http://mircozeiss.com/using-csrf-with-express-and-angular/"/>
    <updated>2013-05-19T19:20:00+02:00</updated>
    <id>http://mircozeiss.com/using-csrf-with-express-and-angular</id>
    <content type="html"><![CDATA[<p>In this post I&#8217;ll demonstrate how to use CSRF protection for Express and Angular apps. Both frameworks have CSRF protection
built in but don&#8217;t understand each other without manual adjustments.</p>

<p>Express is built on top of the <a href="http://www.senchalabs.org/connect/">connect</a> framework which has a native <a href="http://www.senchalabs.org/connect/csrf.html">csrf</a> middleware. It generates a random string token
that is unique for each user. The token is saved in the user&#8217;s session on the server. On every request which mutates state,
usually <code>PUT</code>, <code>POST</code> and <code>DELETE</code> requests, the middleware validates whether the CSRF token sent from the client is the
same as the token stored in the user&#8217;s session on the server. If it isn&#8217;t the client gets the answer <code>403 Forbidden</code>. The following is taken from the docs and describes where the middleware is looking for the token.</p>

<blockquote><p>The default value function checks req.body generated by the bodyParser() middleware, req.query generated by query(), and the &#8220;X-CSRF-Token&#8221; header field.</p></blockquote>

<p>Angular also has CSRF features built into its $http service.</p>

<blockquote><p>When performing XHR requests, the $http service reads a token from a cookie called XSRF-TOKEN and sets it as the HTTP header X-XSRF-TOKEN</p></blockquote>

<p>Both frameworks offer CSRF protection. To make them work together we have to make some adjustments. Follow the steps below to make CSRF work for your next app</p>

<ol>
<li>Add CSRF middleware to your Express app</li>
<li>Tell the middleware to use the right token</li>
<li>Use custom middleware to set a cookie for Angular</li>
<li>Use Angular $http library for XHR requests</li>
</ol>


<h3>1. Adding CSRF middleware to an Express app</h3>

<p>In the first step we have to add the CSRF middleware to our app. As it requires sessions we also have to
add some extra session middleware. You don&#8217;t have to install anything because they come with Express.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">express</span><span class="p">.</span><span class="nx">cookieParser</span><span class="p">(</span><span class="s1">&#39;your secret here&#39;</span><span class="p">));</span>
</span><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">express</span><span class="p">.</span><span class="nx">cookieSession</span><span class="p">());</span>
</span><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">express</span><span class="p">.</span><span class="nx">csrf</span><span class="p">());</span>
</span></code></pre></td></tr></table></div></figure>


<h3>2. Telling CSRF middleware to use the right token</h3>

<p>As mentioned earlier the default CSRF middleware looks in <code>req.body</code>, <code>req.query</code> and the <code>X-CSRF-Token</code> header for the token.
Angular uses none of the methods but instead its own header <code>X-XSRF-TOKEN</code>. Therefor we have to tell Express where to look
for the token delivered by Angular. Create a new function that returns this token from the <code>request</code> object.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">csrfValue</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">req</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">token</span> <span class="o">=</span> <span class="p">(</span><span class="nx">req</span><span class="p">.</span><span class="nx">body</span> <span class="o">&amp;&amp;</span> <span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">_csrf</span><span class="p">)</span>
</span><span class='line'>    <span class="o">||</span> <span class="p">(</span><span class="nx">req</span><span class="p">.</span><span class="nx">query</span> <span class="o">&amp;&amp;</span> <span class="nx">req</span><span class="p">.</span><span class="nx">query</span><span class="p">.</span><span class="nx">_csrf</span><span class="p">)</span>
</span><span class='line'>    <span class="o">||</span> <span class="p">(</span><span class="nx">req</span><span class="p">.</span><span class="nx">headers</span><span class="p">[</span><span class="s1">&#39;x-csrf-token&#39;</span><span class="p">])</span>
</span><span class='line'>    <span class="o">||</span> <span class="p">(</span><span class="nx">req</span><span class="p">.</span><span class="nx">headers</span><span class="p">[</span><span class="s1">&#39;x-xsrf-token&#39;</span><span class="p">]);</span>
</span><span class='line'>  <span class="k">return</span> <span class="nx">token</span><span class="p">;</span>
</span><span class='line'><span class="p">};</span>
</span></code></pre></td></tr></table></div></figure>


<p>The function above is the default function taken from connect. I just added the last line <code>req.headers['x-xsrf-token']</code>.
It still accepts the other methods but also finds the incoming token from Angular. Now pass this function to the CSRF middleware from step 1.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">express</span><span class="p">.</span><span class="nx">csrf</span><span class="p">({</span><span class="nx">value</span><span class="o">:</span> <span class="nx">csrfValue</span><span class="p">}));</span>
</span></code></pre></td></tr></table></div></figure>


<p>Cool, Express can now find the token sent by Angular. One thing that is missing is sending the token from our Express server
to our Angular client.</p>

<h3>3. Using custom middleware to set a cookie for Angular</h3>

<p>Angular&#8217;s $http library reads the token from the <code>XSRF-TOKEN</code> cookie. We therefore have to set this cookie and send it to
the client. Setting a cookie in Express is done via the <code>res.cookie('name', 'value')</code> function. The name is obviously <code>XSRF-TOKEN</code>.
The value is read from the user&#8217;s session. The key <code>req.session._csrf</code> is automatically generated by the csrf middleware.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">,</span> <span class="nx">next</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">res</span><span class="p">.</span><span class="nx">cookie</span><span class="p">(</span><span class="s1">&#39;XSRF-TOKEN&#39;</span><span class="p">,</span> <span class="nx">req</span><span class="p">.</span><span class="nx">session</span><span class="p">.</span><span class="nx">_csrf</span><span class="p">);</span>
</span><span class='line'>  <span class="nx">next</span><span class="p">();</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<h3>4. Using Angular $http library for XHR requests</h3>

<p>We now have everything in place to use Angular&#8217;s $http library without further adjustments. A simple
controller could look like the following</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">myApp</span> <span class="o">=</span> <span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;myApp&#39;</span><span class="p">,[]);</span>
</span><span class='line'>
</span><span class='line'><span class="nx">myApp</span><span class="p">.</span><span class="nx">controller</span><span class="p">(</span><span class="s1">&#39;csrfCtrl&#39;</span><span class="p">,</span> <span class="p">[</span><span class="s1">&#39;$scope&#39;</span><span class="p">,</span> <span class="s1">&#39;$http&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">$scope</span><span class="p">,</span> <span class="nx">$http</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">$scope</span><span class="p">.</span><span class="nx">submit</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>
</span><span class='line'>    <span class="nx">$http</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="s1">&#39;/&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">value</span><span class="o">:</span> <span class="nx">$scope</span><span class="p">.</span><span class="nx">value</span><span class="p">})</span>
</span><span class='line'>      <span class="p">.</span><span class="nx">success</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">$scope</span><span class="p">.</span><span class="nx">answer</span> <span class="o">=</span> <span class="nx">data</span>
</span><span class='line'>      <span class="p">})</span>
</span><span class='line'>      <span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;err&#39;</span><span class="p">)</span>
</span><span class='line'>      <span class="p">})</span>
</span><span class='line'>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="p">}]);</span>
</span></code></pre></td></tr></table></div></figure>


<p>No adjustments are need on the client and your code should work as is.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/csrf-express-angular.png" title="CSRF example for Express and Angular" ></p>

<h3>Conclusion</h3>

<p>As you&#8217;ve seen adding CSRF protection to an app built with Express and Angular is really simple. There shouldn&#8217;t be
any reason not to use this technique for your next app. It adds another layer of security. The underlying principles can also
be applied to apps built with a different stack. Reading their documentations is always a good start.</p>

<p>You can find the code at GitHub <a href="https://github.com/zeMirco/csrf-express-angular">zeMirco/csrf-express-angular</a> and a running example at Heroku <a href="http://arcane-headland-6078.herokuapp.com/">http://arcane-headland-6078.herokuapp.com/</a>.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Not using email as the primary key with Mozilla Persona]]></title>
    <link href="http://mircozeiss.com/not-using-email-as-the-primary-key-with-mozilla-persona/"/>
    <updated>2013-05-13T20:53:00+02:00</updated>
    <id>http://mircozeiss.com/not-using-email-as-the-primary-key-with-mozilla-persona</id>
    <content type="html"><![CDATA[<p>Based on the feedback for my last post <a href="http://mircozeiss.com/mozilla-persona-example-app-with-express-and-couchdb/">Mozilla Persona example app with Express and CouchDB</a>
I made some small but quite important changes in the architecture of my app.</p>

<p><a href="http://fmarier.org/">Francois Marier</a> suggested that we shouldn&#8217;t use our users&#8217; email addresses as the primary key
in our db. That&#8217;s also what Mozilla&#8217;s <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Persona/The_implementor_s_guide/Enabling_users_to_change_their_email_address?redirectlocale=en-US&amp;redirectslug=Persona%2FThe_implementor_s_guide%2FEnabling_users_to_change_their_email_address">implementer&#8217;s guide</a> is telling. So
I took the code from my last post and refactored everything. Each user is now identified by a unique key and not anymore by his email address.
You can find the current version of the example app at GitHub <a href="https://github.com/zeMirco/mozilla-persona-express-couchdb">mozilla-persona-express-couchdb</a>.</p>

<h3>Using views to find users</h3>

<p>In the first version of my app I used the email as the primary key. Getting a user from db was as simple as a <code>GET</code> request
with the appropriate email address. Now that I don&#8217;t have the email as the primary key anymore and every user is stored under
a random string, we have to use a simple <strong>CouchDB view</strong>.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="s2">&quot;views&quot;</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>  <span class="s2">&quot;byEmail&quot;</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>    <span class="s2">&quot;map&quot;</span><span class="o">:</span> <span class="s2">&quot;function(doc){</span>
</span><span class='line'><span class="s2">      if (doc.type === &#39;user&#39;) {</span>
</span><span class='line'><span class="s2">        emit(doc.email, doc)</span>
</span><span class='line'><span class="s2">      }</span>
</span><span class='line'><span class="s2">    }&quot;</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>Every user document looks like the following</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="p">{</span>
</span><span class='line'>   <span class="s2">&quot;_id&quot;</span><span class="o">:</span> <span class="s2">&quot;3115b40189b7dfa4d007ff7fc8536af4&quot;</span><span class="p">,</span>
</span><span class='line'>   <span class="s2">&quot;_rev&quot;</span><span class="o">:</span> <span class="s2">&quot;2-359ee1c1e888690c9c6468b55fa48fa7&quot;</span><span class="p">,</span>
</span><span class='line'>   <span class="s2">&quot;type&quot;</span><span class="o">:</span> <span class="s2">&quot;user&quot;</span><span class="p">,</span>
</span><span class='line'>   <span class="s2">&quot;email&quot;</span><span class="o">:</span> <span class="s2">&quot;mirco.zeiss@gmail.com&quot;</span><span class="p">,</span>
</span><span class='line'>   <span class="s2">&quot;username&quot;</span><span class="o">:</span> <span class="s2">&quot;zeMirco&quot;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>Combined with the <strong>view</strong> from above gives us the following table, which we can query with the <code>email</code> as <code>key</code>.</p>

<table class="table table-striped table-hover table-condensed table-bordered">
  <thead>
    <tr>
      <th>Key</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>“test@mockmyid.com”</td>
      <td>{&#8230;}</td>
    </tr>
    <tr>
      <td>“mirco.zeiss@gmail.com”</td>
      <td>{&#8230;}</td>
    </tr>
  </tbody>
</table>


<h3>Querying the view</h3>

<p>In the first version of the app I used a simple <code>GET</code> request to retrieve the user object.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">db</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">email</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">doc</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="p">...</span>
</span><span class='line'><span class="p">})</span>
</span></code></pre></td></tr></table></div></figure>


<p>I changed those lines as we have to query the view now.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">db</span><span class="p">.</span><span class="nx">view</span><span class="p">(</span><span class="s1">&#39;users&#39;</span><span class="p">,</span> <span class="s1">&#39;byEmail&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">key</span><span class="o">:</span> <span class="nx">email</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">body</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="p">...</span>
</span><span class='line'><span class="p">})</span>
</span></code></pre></td></tr></table></div></figure>


<p>Unfortunately that means we can&#8217;t use the <a href="http://eclipsesource.com/blogs/2013/03/01/use-your-head-checking-couchdb-document-existence/"><code>HEAD</code> request</a> to check for document existence.
This is now done by checking the amout of <code>rows</code> we get back as an answer.</p>

<h3>Let the user change his email address</h3>

<p>With the new architecture in place users are able to change their email addresses as described in Mozilla&#8217;s <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Persona/The_implementor_s_guide/Enabling_users_to_change_their_email_address?redirectlocale=en-US&amp;redirectslug=Persona%2FThe_implementor_s_guide%2FEnabling_users_to_change_their_email_address">Implementer&#8217;s Guide</a>.
I haven&#8217;t yet implemented this feature but will do so in the near future and write about my experiences. So stay tuned!</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Mozilla Persona example app with Express and CouchDB]]></title>
    <link href="http://mircozeiss.com/mozilla-persona-example-app-with-express-and-couchdb/"/>
    <updated>2013-05-03T20:25:00+02:00</updated>
    <id>http://mircozeiss.com/mozilla-persona-example-app-with-express-and-couchdb</id>
    <content type="html"><![CDATA[<p><a href="https://developer.mozilla.org/en-US/docs/Persona">Mozilla Persona</a> gained a lot of attention recently.
The developers have released <a href="http://identity.mozilla.com/post/47541633049/persona-beta-2">Beta 2</a> at the
beginning of last month and aim to bring Persona to <a href="https://blog.mozilla.org/beyond-the-code/2013/04/09/persona-beta2/">half of the worldwide Internet population</a> in the near future.</p>

<p>Although Mozilla has a <a href="https://developer.mozilla.org/en-US/docs/Persona/Quick_Setup">quick setup guide</a> to demonstrate the basic implementation
it is not as trivial to create a fully featured web app with <a href="http://www.adambarth.com/papers/2008/barth-jackson-mitchell-b.pdf">CSRF protection</a>,
<a href="https://developer.mozilla.org/en-US/docs/Security/CSP">Content Security Policy</a> and database in the backend. That&#8217;s why I wrote
this simple example application to learn more about the system and help others to get started.</p>

<p>The app is built on the following open source stack</p>

<ul>
<li><a href="http://couchdb.apache.org/">CouchDB</a> hosted at <a href="https://cloudant.com/">Cloudant</a></li>
<li><a href="https://github.com/dscape/nano">nano</a></li>
<li><a href="http://expressjs.com/">Express</a></li>
<li><a href="https://github.com/mikeal/request">Request</a></li>
<li><a href="http://jquery.com/">jQuery</a></li>
<li><a href="http://twitter.github.io/bootstrap/">Bootstrap</a></li>
</ul>


<p>To see the demo visit <a href="http://mysterious-coast-9759.herokuapp.com/">mysterious-coast-9759.herokuapp.com</a>. The code is available at
GitHub <a href="https://github.com/zeMirco/mozilla-persona-express-couchdb/">mozilla-persona-express-couchdb</a>.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/mozilla-persona-example.png" title="Mozilla Persona example app with Express and CouchDB" ></p>

<h3>Related projects</h3>

<p>Several other examples already exist. Take a look at</p>

<ul>
<li><a href="https://github.com/mozilla/123done">123done</a></li>
<li><a href="https://github.com/lloyd/node.js-persona-example">node.js-persona-example</a></li>
<li><a href="https://github.com/lloyd/myfavoritebeer.org">myfavoritebeer.org</a></li>
<li><a href="https://github.com/mozilla/browserid-cookbook/tree/master/node-express">browserid-cookbook</a></li>
</ul>


<p>They were the foundation and inspiration for my own project. Without them I couldn&#8217;t have done it. Therefore, thanks to the authors!
Especially to <a href="http://lloyd.io/">Lloyd Hilaiel</a>, <a href="http://fmarier.org/">Francois Marier</a> and <a href="https://shanetomlinson.com/">Shane Tomlinson</a>.</p>

<p>However, all of the examples were missing some features I&#8217;d like to see. These are</p>

<ul>
<li>proper DB implementation</li>
<li>CSRF protection</li>
<li>Content Security Policy (CSP)</li>
<li>cookie for <code>loggedInUser</code> variable</li>
<li>use of request module (imho makes code easier to read)</li>
<li>simplicity</li>
</ul>


<p>So I tried to take the best parts from the above examples and throw them together in my own app.</p>

<h3>Getting started</h3>

<p>I won&#8217;t cover the basic implementation. Read more about those steps in <a href="https://developer.mozilla.org/en-US/docs/Persona/Quick_Setup">quick setup</a>.
I&#8217;d like to focus more on the advanced stuff.</p>

<p>Let&#8217;s start by implementing our database. We want to save our users identified by their email address and an additional property, which is the username.
As we are using CouchDB a sample document looks like the following.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="p">{</span>
</span><span class='line'>   <span class="s2">&quot;_id&quot;</span><span class="o">:</span> <span class="s2">&quot;mirco.zeiss@gmail.com&quot;</span><span class="p">,</span>
</span><span class='line'>   <span class="s2">&quot;_rev&quot;</span><span class="o">:</span> <span class="s2">&quot;31-a51c569f771348de72f06a0886b51ab0&quot;</span><span class="p">,</span>
</span><span class='line'>   <span class="s2">&quot;username&quot;</span><span class="o">:</span> <span class="s2">&quot;zeMirco&quot;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>Every time a user logs in with Persona <code>navigator.id.request()</code> is called and a <code>POST</code> request to <code>/auth/login</code> is made.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">onlogin</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">assertion</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">token</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#token&#39;</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
</span><span class='line'>  <span class="nx">$</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="s1">&#39;/auth/login&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">assertion</span><span class="o">:</span> <span class="nx">assertion</span><span class="p">,</span> <span class="nx">_csrf</span><span class="o">:</span> <span class="nx">token</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">reload</span><span class="p">();</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>We&#8217;ll get to the <code>token</code> and <code>_csrf</code> stuff later in this post. On the server the assertion is verified by posting it and the <code>audience</code> to Mozilla.
As soon as we get a valid answer back we have to do the following:</p>

<ol>
<li>Check if the email is stored in our db</li>
<li>If not create a new user with an empty <code>username</code> property and save him to the db</li>
<li>If the email is already present in our db do nothing (we have a returning user)</li>
</ol>


<p>Unfortunately Persona doesn&#8217;t tell us whether the user is a new or existing one. That&#8217;s why we have to check for existence on every login. CouchDB provides a handy feature to check for document existence. Instead of making a full <code>GET</code> request with the email as <code>key</code>
we can simply use a lightweight <code>HEAD</code> request. Read more about this trick at <a href="http://eclipsesource.com/blogs/2013/03/01/use-your-head-checking-couchdb-document-existence/">Use your head checking CouchDB document existence</a>.
If we get back an error with status code <code>404</code> we have a new user. Therefore save him to db.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">db</span><span class="p">.</span><span class="nx">head</span><span class="p">(</span><span class="nx">email</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">body</span><span class="p">,</span> <span class="nx">header</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">err</span> <span class="o">&amp;&amp;</span> <span class="nx">err</span><span class="p">.</span><span class="nx">status_code</span> <span class="o">===</span> <span class="mi">404</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="c1">// email is not in db</span>
</span><span class='line'>    <span class="kd">var</span> <span class="nx">doc</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">username</span><span class="o">:</span> <span class="s1">&#39;&#39;</span>
</span><span class='line'>    <span class="p">};</span>
</span><span class='line'>    <span class="nx">db</span><span class="p">.</span><span class="nx">insert</span><span class="p">(</span><span class="nx">doc</span><span class="p">,</span> <span class="nx">email</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">body</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="k">if</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span>
</span><span class='line'>      <span class="nx">resp</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="mi">200</span><span class="p">);</span>
</span><span class='line'>    <span class="p">})</span>
</span><span class='line'>  <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>    <span class="c1">// email is already stored in db</span>
</span><span class='line'>    <span class="nx">resp</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="mi">200</span><span class="p">);</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>Sweet, we can now save our users to db and differentiate between new and existing ones. Problem is we somehow have to remember who is logged in and who isn&#8217;t.
We don&#8217;t want ours users to make the login call on every request. Therefore we have to use <strong>sessions</strong>.</p>

<h3>Cookie session</h3>

<p>Express offers cookie based session support via the <a href="http://www.senchalabs.org/connect/">connect</a> <a href="http://www.senchalabs.org/connect/cookieSession.html">cookieSession</a> middleware.
You could also use Mozilla&#8217;s own implementation <a href="https://github.com/mozilla/node-client-sessions">node-client-sessions</a> or some key value stores like Redis.
Read more about the pros and cons of cookies vs stores at <a href="https://hacks.mozilla.org/2012/12/using-secure-client-side-sessions-to-build-simple-and-scalable-node-js-applications-a-node-js-holiday-season-part-3/">Using secure client-side sessions to build simple and scalable Node.JS applications</a>.</p>

<p>To enable cookie sessions in Express add the following middleware to your config.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="c1">// built in middleware</span>
</span><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">express</span><span class="p">.</span><span class="nx">cookieParser</span><span class="p">(</span><span class="s1">&#39;your secret here&#39;</span><span class="p">));</span>
</span><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">express</span><span class="p">.</span><span class="nx">cookieSession</span><span class="p">());</span>
</span></code></pre></td></tr></table></div></figure>


<p>You can now create sessions on login <code>req.session.email = email</code> and destroy them on logout <code>req.session = null</code>. Our users can also
visit the <code>/profile</code> route which is protected and not accessible for users without any valid session.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="c1">// middleware to restrict access to internal routes like /profile</span>
</span><span class='line'><span class="kd">function</span> <span class="nx">restrict</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">,</span> <span class="nx">next</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">req</span><span class="p">.</span><span class="nx">session</span><span class="p">.</span><span class="nx">email</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">next</span><span class="p">();</span>
</span><span class='line'>  <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">res</span><span class="p">.</span><span class="nx">redirect</span><span class="p">(</span><span class="s1">&#39;/&#39;</span><span class="p">);</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// use the middleware in your routes</span>
</span><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/profile&#39;</span><span class="p">,</span> <span class="nx">restrict</span><span class="p">,</span> <span class="nx">profile</span><span class="p">.</span><span class="nx">get</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>


<h3>Content Security Policy</h3>

<p><a href="https://developer.mozilla.org/en-US/docs/Security/CSP">Content Security Policy</a> (simply said) tells the browser to use JavaScript (and images, style sheets, frames, etc.)
only from your own domain while forbidding inline script and script from third party URLs. It adds another layer of security against XSS attacks.</p>

<p><a href="https://github.com/evilpacket/helmet">Helmet</a> is a great middleware to set CSP headers in Express. It also offers several other layers of security.
In my app I&#8217;ll write the headers by hand as it only requires a few lines of code.</p>

<p>Check for browser support and implementation at <a href="http://caniuse.com/#feat=contentsecuritypolicy">caniuse#contentsecuritypolicy</a>.
Firefox and IE10 need the <code>X-Content-Security-Policy</code> header while Safari and Chrome need <code>X-WebKit-CSP</code>.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">policy</span> <span class="o">=</span>  <span class="s2">&quot;default-src &#39;self&#39;;&quot;</span> <span class="o">+</span>
</span><span class='line'>              <span class="s2">&quot;frame-src &#39;self&#39; https://login.persona.org;&quot;</span> <span class="o">+</span>
</span><span class='line'>              <span class="s2">&quot;script-src &#39;self&#39; &#39;unsafe-inline&#39; https://login.persona.org;&quot;</span> <span class="o">+</span>
</span><span class='line'>              <span class="s2">&quot;style-src &#39;self&#39; &#39;unsafe-inline&#39;&quot;</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">,</span> <span class="nx">next</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="c1">// Firefox and Internet Explorer</span>
</span><span class='line'>  <span class="nx">res</span><span class="p">.</span><span class="nx">header</span><span class="p">(</span><span class="s2">&quot;X-Content-Security-Policy&quot;</span><span class="p">,</span> <span class="nx">policy</span><span class="p">);</span>
</span><span class='line'>  <span class="c1">// Safari and Chrome</span>
</span><span class='line'>  <span class="nx">res</span><span class="p">.</span><span class="nx">header</span><span class="p">(</span><span class="s2">&quot;X-WebKit-CSP&quot;</span><span class="p">,</span> <span class="nx">policy</span><span class="p">);</span>
</span><span class='line'>  <span class="c1">// continue with next middleware</span>
</span><span class='line'>  <span class="nx">next</span><span class="p">();</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>In theory adding <code>'unsafe-inline'</code> shouldn&#8217;t be necessary but I got errors in Chrome caused by jQuery. Maybe they are related to <a href="http://bugs.jquery.com/ticket/13507">jQuery bug #13507</a>.
You can verify the headers in the browser&#8217;s development tools.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/persona-csp.png" title="Content Security Policy Headers" ></p>

<h3>CSRF protection</h3>

<p>A great explanation for Cross-Site Request Forgery is the paper <a href="http://www.adambarth.com/papers/2008/barth-jackson-mitchell-b.pdf">Robust Defenses for Cross-Site Request Forgery</a>.
Express provides a built in middleware <a href="http://www.senchalabs.org/connect/csrf.html">csrf</a> which makes the use of CSRF very easy.</p>

<p>Our own custom middleware makes the <code>token</code> variable available to all our views and we can use it whenever we have to change the state on the server.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">,</span> <span class="nx">next</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">res</span><span class="p">.</span><span class="nx">locals</span><span class="p">.</span><span class="nx">token</span> <span class="o">=</span> <span class="nx">req</span><span class="p">.</span><span class="nx">session</span><span class="p">.</span><span class="nx">_csrf</span><span class="p">;</span>
</span><span class='line'>  <span class="nx">next</span><span class="p">();</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>That&#8217;s usually done by adding a hidden input field to the forms.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='jade'><span class='line'><span class="nt">form</span><span class="nf">#login</span><span class="nc">.navbar-form.pull-right</span>
</span><span class='line'>  <span class="nt">input</span><span class="nf">#token</span>(<span class="na">type=</span><span class="s">&quot;hidden&quot;</span><span class="err">,</span> <span class="na">name=</span><span class="s">&quot;_csrf&quot;</span><span class="err">,</span> <span class="na">value=</span><span class="nv">token</span>)
</span><span class='line'>  <span class="nt">button</span><span class="nc">.btn</span>(<span class="na">type=</span><span class="s">&quot;submit&quot;</span>) Login
</span></code></pre></td></tr></table></div></figure>


<p>The token is sent to the server and <code>app.use(express.csrf());</code> checks if it is equal to <code>req.session._csrf</code>. If it isn&#8217;t Express throws a <code>403</code> error.
We not only have to include the token in forms but also when we make ajax requests.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">token</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#token&#39;</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
</span><span class='line'><span class="nx">$</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="s1">&#39;/auth/login&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">assertion</span><span class="o">:</span> <span class="nx">assertion</span><span class="p">,</span> <span class="nx">_csrf</span><span class="o">:</span> <span class="nx">token</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">reload</span><span class="p">();</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>That explains the additional <code>_csrf</code> key.</p>

<h3>Sending <em>loggedInUser</em> from server to client JavaScript</h3>

<p>The <a href="https://developer.mozilla.org/en-US/docs/DOM/navigator.id.watch"><code>navigator.id.watch</code></a> function requires the <code>loggedInUser</code> parameter,
which tells Persona what you believe about the user&#8217;s state.</p>

<p><a href="https://github.com/mozilla/123done/blob/master/static/js/123done.js#L42-L44">123done</a> makes a GET request to <code>/api/auth_status</code> in order to get <code>loggedInUser</code></p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">$</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/api/auth_status&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">loggedInEmail</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">data</span><span class="p">).</span><span class="nx">logged_in_email</span><span class="p">;</span>
</span><span class='line'>  <span class="p">...</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>and the server responds with the current session.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/api/auth_status&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">res</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">({</span>
</span><span class='line'>    <span class="nx">logged_in_email</span><span class="o">:</span> <span class="nx">req</span><span class="p">.</span><span class="nx">session</span><span class="p">.</span><span class="nx">user</span> <span class="o">||</span> <span class="kc">null</span><span class="p">,</span>
</span><span class='line'>  <span class="p">}));</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p><a href="https://github.com/lloyd/node.js-persona-example/blob/master/views/index.ejs#L15">node.js-persona-example</a> uses inline JavaScript
and puts the variable via <a href="https://github.com/visionmedia/ejs">ejs</a> directly into the view.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>navigator.id.watch({
</span><span class='line'>  loggedInUser: <span class="err">&lt;</span>%- JSON.stringify(email) %&gt;,
</span><span class='line'>  ...
</span><span class='line'>})
</span></code></pre></td></tr></table></div></figure>


<p>The server renders the view with the local variable <code>email</code> with holds the current session.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">res</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="s1">&#39;index.ejs&#39;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">email</span><span class="o">:</span> <span class="nx">req</span><span class="p">.</span><span class="nx">session</span><span class="p">.</span><span class="nx">email</span> <span class="o">||</span> <span class="kc">null</span> <span class="p">});</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p><a href="https://github.com/lloyd/myfavoritebeer.org/blob/master/static/js/main.js#L135-L138">myfavoritebeer.org</a> also makes a GET request. This time to <code>/api/whoami</code>.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">$</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/api/whoami&#39;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">res</span> <span class="o">===</span> <span class="kc">null</span><span class="p">)</span> <span class="nx">loggedOut</span><span class="p">();</span>
</span><span class='line'>  <span class="k">else</span> <span class="nx">loggedIn</span><span class="p">(</span><span class="nx">res</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
</span><span class='line'><span class="p">},</span> <span class="s1">&#39;json&#39;</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>


<p>The server responds with the email from the current session and the corresponding image from <a href="https://www.libravatar.org/">Libravatar</a>.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;/api/whoami&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">req</span><span class="p">.</span><span class="nx">session</span> <span class="o">&amp;&amp;</span> <span class="k">typeof</span> <span class="nx">req</span><span class="p">.</span><span class="nx">session</span><span class="p">.</span><span class="nx">email</span> <span class="o">===</span> <span class="s1">&#39;string&#39;</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">respondWithUserInfo</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">);</span>
</span><span class='line'>  <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">return</span> <span class="nx">res</span><span class="p">.</span><span class="nx">json</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">});</span>
</span><span class='line'>
</span><span class='line'><span class="kd">function</span> <span class="nx">respondWithUserInfo</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">libravatar</span><span class="p">.</span><span class="nx">url</span><span class="p">({</span><span class="nx">email</span><span class="o">:</span> <span class="nx">req</span><span class="p">.</span><span class="nx">session</span><span class="p">.</span><span class="nx">email</span><span class="p">,</span> <span class="nx">size</span><span class="o">:</span> <span class="mi">32</span><span class="p">,</span> <span class="nx">http</span><span class="o">:</span> <span class="kc">false</span><span class="p">},</span>
</span><span class='line'>    <span class="kd">function</span> <span class="p">(</span><span class="nx">error</span><span class="p">,</span> <span class="nx">avatar</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="k">if</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>        <span class="k">return</span> <span class="nx">res</span><span class="p">.</span><span class="nx">json</span><span class="p">({</span><span class="s1">&#39;email&#39;</span><span class="o">:</span> <span class="nx">req</span><span class="p">.</span><span class="nx">session</span><span class="p">.</span><span class="nx">email</span><span class="p">,</span> <span class="s1">&#39;avatar&#39;</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">});</span>
</span><span class='line'>      <span class="p">}</span>
</span><span class='line'>      <span class="k">return</span> <span class="nx">res</span><span class="p">.</span><span class="nx">json</span><span class="p">({</span><span class="s1">&#39;email&#39;</span><span class="o">:</span> <span class="nx">req</span><span class="p">.</span><span class="nx">session</span><span class="p">.</span><span class="nx">email</span><span class="p">,</span> <span class="s1">&#39;avatar&#39;</span><span class="o">:</span> <span class="nx">avatar</span><span class="p">});</span>
</span><span class='line'>    <span class="p">});</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>Last but not least <a href="https://github.com/mozilla/browserid-cookbook/blob/master/node-express/views/layout.jade#L17-L22">browserid-cookbook</a>
uses inline script (this time with Jade instead ejs) to pass the current user to the frontend.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='jade'><span class='line'><span class="nt">if</span> user
</span><span class='line'>  <span class="nt">script</span>
</span><span class='line'>    <span class="nt">var</span> loggedInUser = &#39;<span class="si">#{</span><span class="n">user</span><span class="si">}</span>&#39;;
</span><span class='line'><span class="nt">else</span>
</span><span class='line'>  <span class="nt">script</span>
</span><span class='line'>    <span class="nt">var</span> loggedInUser = null;
</span></code></pre></td></tr></table></div></figure>


<p>The server sets the local variable <code>loggedInUser</code> from the current session.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">exports</span><span class="p">.</span><span class="nx">index</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">resp</span><span class="p">){</span>
</span><span class='line'>  <span class="nx">resp</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="s1">&#39;index&#39;</span><span class="p">,</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;Express&#39;</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">user</span><span class="o">:</span> <span class="nx">req</span><span class="p">.</span><span class="nx">session</span><span class="p">.</span><span class="nx">email</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">csrf</span><span class="o">:</span> <span class="nx">req</span><span class="p">.</span><span class="nx">session</span><span class="p">.</span><span class="nx">_csrf</span>
</span><span class='line'>  <span class="p">})</span>
</span><span class='line'><span class="p">};</span>
</span></code></pre></td></tr></table></div></figure>


<p>In summary two examples use inline script and two use extra GET requests. What&#8217;s the better implementation?</p>

<p>In my opinion both aren&#8217;t perfect. Inline script is probably the easiest but worst solution, as it won&#8217;t work with a strict Content Security Policy.
An extra GET request costs time and you have to implement an additional route on your server. That&#8217;s why I chose a third solution. I use cookies to send
the current user from our backend to the frontend. Mozilla also recommends this way.</p>

<blockquote><p>&#8230; you might examine the browser&#8217;s cookies to determine who is signed in.</p></blockquote>

<p>We can set the cookie via a custom middleware. If the user isn&#8217;t logged in and doesn&#8217;t have a valid session no cookie is needed.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">,</span> <span class="nx">next</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">req</span><span class="p">.</span><span class="nx">session</span><span class="p">.</span><span class="nx">email</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">res</span><span class="p">.</span><span class="nx">cookie</span><span class="p">(</span><span class="s1">&#39;email&#39;</span><span class="p">,</span> <span class="nx">req</span><span class="p">.</span><span class="nx">session</span><span class="p">.</span><span class="nx">email</span><span class="p">);</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'>  <span class="nx">next</span><span class="p">();</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>On the client we can read the cookie via the awesome <a href="https://github.com/carhartl/jquery-cookie">jquery-cookie</a> plugin.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">email</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">cookie</span><span class="p">(</span><span class="s1">&#39;email&#39;</span><span class="p">)</span> <span class="o">||</span> <span class="kc">null</span><span class="p">;</span>
</span></code></pre></td></tr></table></div></figure>


<p>Cookies have the advantage that they save the extra request to the server and don&#8217;t require inline script.</p>

<h3>Conclusion</h3>

<p>A few more steps than just the quick setup are needed to build a full featured web app based on Mozilla Persona. However it isn&#8217;t rocket science and I&#8217;ve learned a lot while developing this app.
Persona is a great technology and admins will have less to worry about, as no passwords are stored in the db.</p>

<p>I&#8217;m sure my example is far from being perfect so if you see any mistakes or find room for improvements please open an <a href="https://github.com/zeMirco/mozilla-persona-express-couchdb/issues">issue</a> at GitHub.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Async CouchDB queries with nano and promises]]></title>
    <link href="http://mircozeiss.com/async-couchdb-queries-with-nano-and-promises/"/>
    <updated>2013-04-21T00:00:00+02:00</updated>
    <id>http://mircozeiss.com/async-couchdb-queries-with-nano-and-promises</id>
    <content type="html"><![CDATA[<p>This post is about CouchDB and its <code>MapReduce</code> functionality. I&#8217;ll use simple <code>reduce</code>
functions to gather some statistics about soccer players. <a href="https://github.com/dscape/nano">Nano</a>
is used the query the database from
Node.js. To keep our code nice and tidy we&#8217;ll make use of <a href="https://github.com/promises-aplus/promises-spec">Promises</a>
through the <a href="https://github.com/kriskowal/q">q</a> module.</p>

<h3>1. CouchDB architecture</h3>

<p>Assuming we want to record every goal in a match and create some statistics to see who
 scored the most goals. Each goal is a single document in our CouchDB database</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="p">{</span>
</span><span class='line'>   <span class="s2">&quot;_id&quot;</span><span class="o">:</span> <span class="s2">&quot;ee2459df977d62d196872dd0ae63ea13&quot;</span><span class="p">,</span>
</span><span class='line'>   <span class="s2">&quot;_rev&quot;</span><span class="o">:</span> <span class="s2">&quot;1-e00b4c6130d022e7336cdafacd18f93a&quot;</span><span class="p">,</span>
</span><span class='line'>   <span class="s2">&quot;playerId&quot;</span><span class="o">:</span> <span class="s2">&quot;4&quot;</span><span class="p">,</span>
</span><span class='line'>   <span class="s2">&quot;type&quot;</span><span class="o">:</span> <span class="s2">&quot;goal&quot;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>The <code>type</code> key simply helps to differentiate between other documents (could be players with
name, age, price, etc.) and our <code>goal</code> documents.</p>

<p>With a simple <code>map</code> function we get every goal by player</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">function</span><span class="p">(</span><span class="nx">doc</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">doc</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="s1">&#39;goal&#39;</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">emit</span><span class="p">(</span><span class="nx">doc</span><span class="p">.</span><span class="nx">playerId</span><span class="p">,</span> <span class="mi">1</span><span class="p">)</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>The result of the <code>map</code> function looks similar to the following table</p>

<table class="table table-striped table-hover table-condensed table-bordered">
  <thead>
    <tr>
      <th>Key</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>“4”</td>
      <td>1</td>
    </tr>
    <tr>
      <td>“4”</td>
      <td>1</td>
    </tr>
    <tr>
      <td>“3”</td>
      <td>1</td>
    </tr>
    <tr>
      <td>“2”</td>
      <td>1</td>
    </tr>
    <tr>
      <td>“1”</td>
      <td>1</td>
    </tr>
    <tr>
      <td>“1”</td>
      <td>1</td>
    </tr>
    <tr>
      <td>“1”</td>
      <td>1</td>
    </tr>
    <tr>
      <td>“1”</td>
      <td>1</td>
    </tr>
    <tr>
      <td>“1”</td>
      <td>1</td>
    </tr>
  </tbody>
</table>


<p>The <strong>key</strong> represents the <code>playerId</code> and the <strong>value</strong> is <code>1</code> for every key. We need this
<strong>value</strong>
later on to calculate the total amout of goals scored by each player.</p>

<p>To get this total amout of goals we simply have to sum up all <strong>values</strong> per player. Therefore our <code>reduce</code>
function looks like this</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">_sum</span>
</span></code></pre></td></tr></table></div></figure>


<p><code>_sum</code> is a built in <code>reduce</code> function provided by CouchDB. More native functions can be found in the
<a href="http://wiki.apache.org/couchdb/Built-In_Reduce_Functions">CouchDB Wiki</a>. The result of the above function looks like this</p>

<table class="table table-striped table-hover table-condensed table-bordered">
  <thead>
    <tr>
      <th>Key</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>“4”</td>
      <td>2</td>
    </tr>
    <tr>
      <td>“3”</td>
      <td>1</td>
    </tr>
    <tr>
      <td>“2”</td>
      <td>1</td>
    </tr>
    <tr>
      <td>“1”</td>
      <td>5</td>
    </tr>
  </tbody>
</table>


<p>That&#8217;s exactly what we wanted. We can now query our view and pass the playerId as <strong>key</strong> to get the final value.</p>

<h3>2. Using the database with nano</h3>

<p>Several modules exist on <a href="https://npmjs.org/search?q=couchdb">npm</a> to interact with CouchDB. The most popular ones are
probably</p>

<ul>
<li><a href="https://github.com/dscape/nano">nano</a> and</li>
<li><a href="https://github.com/cloudhead/cradle">cradle</a></li>
</ul>


<p>In this post I&#8217;ll use nano. I haven&#8217;t used cradle yet but I&#8217;m sure it offers similar functionality.</p>

<p>To save new documents to our db we use the <code>insert</code> function</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">id</span> <span class="o">=</span> <span class="s2">&quot;1&quot;</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="kd">var</span> <span class="nx">doc</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">playerId</span><span class="o">:</span> <span class="nx">id</span>
</span><span class='line'><span class="p">};</span>
</span><span class='line'>
</span><span class='line'><span class="nx">nano</span><span class="p">.</span><span class="nx">insert</span><span class="p">(</span><span class="nx">doc</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">body</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span>
</span><span class='line'>  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;done&#39;</span><span class="p">);</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>The total amout of goals scored by each player is provided by the above created <code>MapReduce</code> function. We
can query this view using nano&#8217;s <code>view</code> function</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">nano</span><span class="p">.</span><span class="nx">view</span><span class="p">(</span><span class="s1">&#39;goals&#39;</span><span class="p">,</span> <span class="s1">&#39;byPlayer_sum&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">key</span><span class="o">:</span> <span class="nx">playerId</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">body</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">body</span><span class="p">.</span><span class="nx">rows</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="c1">// no goals for this player</span>
</span><span class='line'>    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
</span><span class='line'>  <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">body</span><span class="p">.</span><span class="nx">rows</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">value</span><span class="p">);</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>This gives us the sum for each player that we pass to CouchDB as a parameter <code>{key: playerId}</code>.</p>

<p>So, now we can store new documents and retrieve the sum via nano from our db. The problem is loading
multiple sums for different players at the same time and then display the results to our users. The easiest solution
is using a series of callback functions</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">nano</span><span class="p">.</span><span class="nx">view</span><span class="p">(</span><span class="s1">&#39;goals&#39;</span><span class="p">,</span> <span class="s1">&#39;byPlayer_sum&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">key</span><span class="o">:</span> <span class="mi">1</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">bodyOne</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">nano</span><span class="p">.</span><span class="nx">view</span><span class="p">(</span><span class="s1">&#39;goals&#39;</span><span class="p">,</span> <span class="s1">&#39;byPlayer_sum&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">key</span><span class="o">:</span> <span class="mi">2</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">bodyTwo</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>     <span class="nx">nano</span><span class="p">.</span><span class="nx">view</span><span class="p">(</span><span class="s1">&#39;goals&#39;</span><span class="p">,</span> <span class="s1">&#39;byPlayer_sum&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">key</span><span class="o">:</span> <span class="mi">3</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">bodyThree</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>       <span class="nx">nano</span><span class="p">.</span><span class="nx">view</span><span class="p">(</span><span class="s1">&#39;goals&#39;</span><span class="p">,</span> <span class="s1">&#39;byPlayer_sum&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">key</span><span class="o">:</span> <span class="mi">4</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">bodyFour</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>         <span class="p">...</span>
</span><span class='line'>       <span class="p">});</span>
</span><span class='line'>     <span class="p">});</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>That approach leads to the famous spaghetti code/callback hell/pyramide/christmas tree/you name it. Another
huge drawback is that all the request are made one after the other. CouchDB is great in handling a lot of
concurrent requests (see <a href="http://guide.couchdb.org/draft/why.html">Why CouchDB?</a>) so let&#8217;s not waste this feature.</p>

<p>A second approach is making parallel requests and after each requests check if the others are already done.
If they are done, continue with the code. The idea works like this</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">done</span> <span class="o">=</span> <span class="p">[];</span>
</span><span class='line'><span class="nx">nano</span><span class="p">.</span><span class="nx">view</span><span class="p">(</span><span class="s1">&#39;goals&#39;</span><span class="p">,</span> <span class="s1">&#39;byPlayer_sum&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">key</span><span class="o">:</span> <span class="mi">1</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">body</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">done</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">body</span><span class="p">);</span>
</span><span class='line'>  <span class="k">if</span><span class="p">(</span><span class="nx">done</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">3</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">continue</span><span class="p">();</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">});</span>
</span><span class='line'>
</span><span class='line'><span class="nx">nano</span><span class="p">.</span><span class="nx">view</span><span class="p">(</span><span class="s1">&#39;goals&#39;</span><span class="p">,</span> <span class="s1">&#39;byPlayer_sum&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">key</span><span class="o">:</span> <span class="mi">2</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">body</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">done</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">body</span><span class="p">);</span>
</span><span class='line'>  <span class="k">if</span><span class="p">(</span><span class="nx">done</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">3</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">continue</span><span class="p">();</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">});</span>
</span><span class='line'>
</span><span class='line'><span class="nx">nano</span><span class="p">.</span><span class="nx">view</span><span class="p">(</span><span class="s1">&#39;goals&#39;</span><span class="p">,</span> <span class="s1">&#39;byPlayer_sum&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">key</span><span class="o">:</span> <span class="mi">3</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">body</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">done</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">body</span><span class="p">);</span>
</span><span class='line'>  <span class="k">if</span><span class="p">(</span><span class="nx">done</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">3</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">continue</span><span class="p">();</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">});</span>
</span><span class='line'>
</span><span class='line'><span class="kd">var</span> <span class="k">continue</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="c1">// do something with the data in done</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>That isn&#8217;t pretty either because we have to check for <code>done</code> in each request. Therefore let&#8217;s use promises.</p>

<h3>3. Wrapping query functions in promises</h3>

<p>The defacto module for using promises is <a href="https://github.com/kriskowal/q">q</a> by Kris Kowal. The documentation
is great and it is super easy to integrate as we will see now. Let&#8217;s write a promise for saving new documents
to db</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">save</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">doc</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">deferred</span> <span class="o">=</span> <span class="nx">Q</span><span class="p">.</span><span class="nx">defer</span><span class="p">();</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">nano</span><span class="p">.</span><span class="nx">insert</span><span class="p">(</span><span class="nx">doc</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">body</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">if</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">deferred</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="nx">err</span><span class="p">));</span>
</span><span class='line'>    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">deferred</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="nx">body</span><span class="p">);</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>  <span class="p">})</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">return</span> <span class="nx">deferred</span><span class="p">.</span><span class="nx">promise</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>Another promise would be retrieving the sum of goals for each player</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">getScore</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">playerId</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">deferred</span> <span class="o">=</span> <span class="nx">Q</span><span class="p">.</span><span class="nx">defer</span><span class="p">();</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">nano</span><span class="p">.</span><span class="nx">view</span><span class="p">(</span><span class="s1">&#39;goals&#39;</span><span class="p">,</span> <span class="s1">&#39;byPlayer_sum&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">key</span><span class="o">:</span> <span class="nx">playerId</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">body</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">if</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">deferred</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="nx">err</span><span class="p">));</span>
</span><span class='line'>    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>      <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">body</span><span class="p">.</span><span class="nx">rows</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">deferred</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
</span><span class='line'>      <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">deferred</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="nx">body</span><span class="p">.</span><span class="nx">rows</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">value</span><span class="p">);</span>
</span><span class='line'>      <span class="p">}</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">return</span> <span class="nx">deferred</span><span class="p">.</span><span class="nx">promise</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="p">};</span>
</span></code></pre></td></tr></table></div></figure>


<p>We can make use of these two functions as follows</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">doc</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'>   <span class="s2">&quot;playerId&quot;</span><span class="o">:</span> <span class="s2">&quot;4&quot;</span><span class="p">,</span>
</span><span class='line'>   <span class="s2">&quot;type&quot;</span><span class="o">:</span> <span class="s2">&quot;goal&quot;</span>
</span><span class='line'><span class="p">};</span>
</span><span class='line'>
</span><span class='line'><span class="nx">save</span><span class="p">(</span><span class="nx">doc</span><span class="p">)</span>
</span><span class='line'>  <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">body</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">return</span> <span class="nx">getScore</span><span class="p">(</span><span class="mi">4</span><span class="p">)</span>
</span><span class='line'>  <span class="p">}).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">score</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">score</span><span class="p">);</span>
</span><span class='line'>  <span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>The above code almost reads like plain English. Save the new document to our db, then get the new score
for player with <code>id=4</code> and then log the score. Awesome!</p>

<p>We ended the second section with the problem of making multiple asyncronuous HTTP requests at the
 same time and deal with the values they each return. We already implemented the <code>getScore</code> function
  as a promise and used it in series with <code>then</code>. Using the same function more than once in parallel is
  almost as easy.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/match&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">Q</span><span class="p">.</span><span class="nx">all</span><span class="p">([</span>
</span><span class='line'>    <span class="nx">getScore</span><span class="p">(</span><span class="s2">&quot;1&quot;</span><span class="p">),</span>
</span><span class='line'>    <span class="nx">getScore</span><span class="p">(</span><span class="s2">&quot;2&quot;</span><span class="p">),</span>
</span><span class='line'>    <span class="nx">getScore</span><span class="p">(</span><span class="s2">&quot;3&quot;</span><span class="p">),</span>
</span><span class='line'>    <span class="nx">getScore</span><span class="p">(</span><span class="s2">&quot;4&quot;</span><span class="p">)</span>
</span><span class='line'>  <span class="p">]).</span><span class="nx">spread</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">pOne</span><span class="p">,</span> <span class="nx">pTwo</span><span class="p">,</span> <span class="nx">pThree</span><span class="p">,</span> <span class="nx">pFour</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">res</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="s1">&#39;match&#39;</span><span class="p">,</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;The match&#39;</span><span class="p">,</span>
</span><span class='line'>        <span class="nx">john</span><span class="o">:</span> <span class="nx">pOne</span><span class="p">,</span>
</span><span class='line'>        <span class="nx">jack</span><span class="o">:</span> <span class="nx">pTwo</span><span class="p">,</span>
</span><span class='line'>        <span class="nx">chris</span><span class="o">:</span> <span class="nx">pThree</span><span class="p">,</span>
</span><span class='line'>        <span class="nx">nick</span><span class="o">:</span> <span class="nx">pFour</span>
</span><span class='line'>      <span class="p">})</span>
</span><span class='line'>    <span class="p">})</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p><code>Q.all</code> turns an array of promises into a single promise. <code>Spread</code> does what it&#8217;s named after
 and spreads the values over the arguments of our fulfillment handling function. That means
  <code>pOne</code> corresponds to the returned value of <code>getScore("1")</code>, <code>pTwo</code> to <code>getScore("2")</code> and so
  on. This makes it very easy to perform multiple asynchronuous HTTP request and continue as
soon as they are all done.</p>

<p>Here is a screenshot of a sample app I built to demonstrate all the principles I&#8217;ve talked about.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/couchdb-promises-nano.png" title="Express app for analyzing soccer players" ></p>

<h3>Conclusion</h3>

<p>CouchDB with Node.js, nano and q is a powerful combination. Huge web applications
 can be written while keeping a testable and maintainable structure. To learn more about promises
 I recommend watching the excellent talk by Alex McPherson <a href="http://www.youtube.com/watch?v=juRtEEsHI9E">I .promise() to show you .when() to use Deferreds</a>.
 In this post I didn&#8217;t talk about <a href="https://github.com/kriskowal/q#handling-errors">error handling</a> when using promises. That would have been too much,
 but make sure you always handle errors, as they might crash your whole application.</p>

<p>So start using promises today and
 follow the <a href="http://blog.izs.me/post/48281998870/unix-philosophy-and-node-js">unix philosophy</a>:</p>

<blockquote><p>Write programs that do one thing and do it well.</p></blockquote>

<p>As always you can find the whole code with a working Express sample application at GitHub <a href="https://github.com/zeMirco/zemirco.github.io/tree/source/code-examples/couchdb-promises">couchdb-promises</a>.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[How to pass JavaScript variables from a server to Angular.js]]></title>
    <link href="http://mircozeiss.com/how-to-pass-javascript-variables-from-a-server-to-angular/"/>
    <updated>2013-04-13T00:00:00+02:00</updated>
    <id>http://mircozeiss.com/how-to-pass-javascript-variables-from-a-server-to-angular</id>
    <content type="html"><![CDATA[<p>I came across the problem of sending JavaScript variables from my backend,
in this case an <a href="http://expressjs.com/">Express.js</a> server,
to my frontend, means an <a href="http://angularjs.org/">Angular.js</a> controller. I&#8217;m using <a href="http://jade-lang.com/">Jade</a> as my template engine but the
presented solutions should work with others, too.</p>

<p>Basically you&#8217;ve got three options for doing this:</p>

<ol>
<li>Put the variable into the view file inside a <code>script</code> tag</li>
<li>Make an HTTP request from Angular and serve the data as JSON from the
backend</li>
<li>Be smart and use <code>ng-init</code></li>
</ol>


<p>At the end of the article you find a link to a GitHub repo containing working
examples for all the presented solutions. To play with the code fork and
modify it according to your needs or start from scratch and add code while
reading on. So, let&#8217;s start.</p>

<p>First create an empty directory, use <code>express</code> command to create all necessary files and run
<code>npm install</code> to download additional modules. At the end start your server with <code>node app.js</code>.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>mkdir express-to-ngcontroller
</span><span class='line'><span class="nb">cd </span>express-to-ngcontroller
</span><span class='line'>express
</span><span class='line'>npm install
</span><span class='line'>node app.js
</span></code></pre></td></tr></table></div></figure>


<p>Afterwards you should see the message</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>Express server listening on port 3000
</span></code></pre></td></tr></table></div></figure>


<p>So far we&#8217;ve just set up our backend. Now it&#8217;s time to add some Angular code to your <code>layout.jade</code>.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>doctype 5
</span><span class='line'>html<span class="o">(</span>ng-app<span class="o">)</span>
</span><span class='line'>  head
</span><span class='line'>    <span class="nv">title</span><span class="o">=</span> title
</span><span class='line'>    link<span class="o">(</span><span class="nv">rel</span><span class="o">=</span><span class="s1">&#39;stylesheet&#39;</span>, <span class="nv">href</span><span class="o">=</span><span class="s1">&#39;/stylesheets/style.css&#39;</span><span class="o">)</span>
</span><span class='line'>    script<span class="o">(</span><span class="nv">src</span><span class="o">=</span><span class="s2">&quot;https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js&quot;</span><span class="o">)</span>
</span><span class='line'>    script<span class="o">(</span><span class="nv">src</span><span class="o">=</span><span class="s2">&quot;/javascripts/controller.js&quot;</span><span class="o">)</span>
</span><span class='line'>  body
</span><span class='line'>    a<span class="o">(</span><span class="nv">href</span><span class="o">=</span><span class="s2">&quot;/solution-one&quot;</span><span class="o">)</span> solution one
</span><span class='line'>    span -
</span><span class='line'>    a<span class="o">(</span><span class="nv">href</span><span class="o">=</span><span class="s2">&quot;/solution-two&quot;</span><span class="o">)</span> solution two
</span><span class='line'>    span -
</span><span class='line'>    a<span class="o">(</span><span class="nv">href</span><span class="o">=</span><span class="s2">&quot;/solution-three&quot;</span><span class="o">)</span> solution three
</span><span class='line'>    block content
</span></code></pre></td></tr></table></div></figure>


<p>Let&#8217;s have a look at the above code. Activate Angular for the whole page by
adding <code>ng-app</code> as an attribute to the <code>html</code> tag. Load <code>angular.min.js</code> from
 Google CDN and <code>controller.js</code> from file. Inside the body I created a basic
 menu to navigate from one
solution to the other.</p>

<p>Last but not least create some dummy data at the server. In production this
data is loaded from a database, but in this example I want to keep everything
 nice and simple. Copy the following code to your <code>app.js</code>.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">users</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'>  <span class="mi">1</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;john&#39;</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">email</span><span class="o">:</span> <span class="s1">&#39;john@email.com&#39;</span>
</span><span class='line'>  <span class="p">},</span>
</span><span class='line'>  <span class="mi">2</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;peter&#39;</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">email</span><span class="o">:</span> <span class="s1">&#39;peter@email.com&#39;</span>
</span><span class='line'>  <span class="p">},</span>
</span><span class='line'>  <span class="mi">3</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;max&#39;</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">email</span><span class="o">:</span> <span class="s1">&#39;max@email.com&#39;</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">};</span>
</span></code></pre></td></tr></table></div></figure>


<p>Now everything should be set up and we can start tinkering with the different
 solutions.</p>

<h3>1. Put variable inside view file</h3>

<p>Inside your <code>app.js</code> file create an additional route for <code>GET /solution-one</code></p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/solution-one&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">res</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="s1">&#39;solutionOne&#39;</span><span class="p">,</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;Express and Angular marriage&#39;</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">users</span><span class="o">:</span> <span class="nx">users</span>
</span><span class='line'>  <span class="p">})</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>We pass our <code>users</code> object to the view as a local variable named
<code>users</code>. Running this code would throw an error as we haven&#8217;t created the view
<code>solutionOne.jade</code> yet. Create this file inside the <code>views/</code> directory and
put the following code inside</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kr">extends</span> <span class="nx">layout</span>
</span><span class='line'>
</span><span class='line'><span class="nx">block</span> <span class="nx">content</span>
</span><span class='line'>  <span class="nx">div</span><span class="p">(</span><span class="nx">ng</span><span class="o">-</span><span class="nx">controller</span><span class="o">=</span><span class="s2">&quot;UserCtrl&quot;</span><span class="p">)</span>
</span><span class='line'>    <span class="nx">h1</span><span class="o">=</span> <span class="nx">title</span>
</span><span class='line'>    <span class="nx">p</span> <span class="nx">Welcome</span> <span class="nx">to</span> <span class="err">#</span><span class="p">{</span><span class="nx">title</span><span class="p">}</span>
</span><span class='line'>    <span class="nx">ul</span>
</span><span class='line'>      <span class="nx">li</span><span class="p">(</span><span class="nx">ng</span><span class="o">-</span><span class="nx">repeat</span><span class="o">=</span><span class="s2">&quot;user in users&quot;</span><span class="p">)</span> <span class="p">{{</span> <span class="nx">user</span><span class="p">.</span><span class="nx">name</span> <span class="p">}}</span> <span class="o">-</span> <span class="p">{{</span><span class="nx">user</span><span class="p">.</span><span class="nx">email</span><span class="p">}}</span>
</span><span class='line'>  <span class="nx">script</span>
</span><span class='line'>    <span class="kd">var</span> <span class="nx">users</span> <span class="o">=</span> <span class="o">!</span><span class="p">{</span><span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">users</span><span class="p">)}</span>
</span></code></pre></td></tr></table></div></figure>


<p>With <code>ng-controller="UserCtrl"</code> we tell Angular which controller we&#8217;d like
 to use for all the DOM children of this element. At the bottom of the file
 we&#8217;ve put some extra JavaScript with a global variable called <code>users</code> that
 loads the contents from the local variable <code>users</code> passed to the view.
 Notice that we have to use <code>!{}</code> instead of <code>#{}</code>, which is usually used in
 Jade for interpolation. However <code>#{}</code> escapes HTML code and would create
 something like this</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">users</span> <span class="o">=</span> <span class="p">{</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="mi">1</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="o">:</span><span class="p">{</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="nx">name</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="o">:&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="nx">john</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;,</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="nx">email</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="o">:&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="nx">john</span><span class="err">@</span><span class="nx">email</span><span class="p">.</span><span class="nx">com</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;},</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="mi">2</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="o">:</span><span class="p">{</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="nx">name</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="o">:&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="nx">peter</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;,</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="nx">email</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="o">:&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="nx">peter</span><span class="err">@</span><span class="nx">email</span><span class="p">.</span><span class="nx">com</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;},</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="mi">3</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="o">:</span><span class="p">{</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="nx">name</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="o">:&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="nx">max</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;,</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="nx">email</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="o">:&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="nx">max</span><span class="err">@</span><span class="nx">email</span><span class="p">.</span><span class="nx">com</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;}}</span>
</span></code></pre></td></tr></table></div></figure>


<p>That&#8217;s not what we want. We want a nicely formatted String representation of
our JSON object. That&#8217;s why we need <code>!{}</code>.</p>

<p>Then we need to load the content of this variable into our Angular scope.
This is necessary for the <code>ng-repeat</code> directive as it doesn&#8217;t work with
variables, which are outside of the Angular scope. Open <code>controller.js</code> and
 put the following code inside.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">function</span> <span class="nx">UserCtrl</span><span class="p">(</span><span class="nx">$scope</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">$scope</span><span class="p">.</span><span class="nx">users</span> <span class="o">=</span> <span class="nx">users</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>Start the server with <code>node app.js</code> and navigate to <code>/solution-one</code>. You
should see a list with our three users where each list item contains the
<code>name</code> and <code>email</code>. Nice, solution one works but let&#8217;s have a look at the
pros and cons.</p>

<h4>Pro</h4>

<p>Solution one is probably the easiest to understand and fastest to implement.
Every step is comprehensible and nothing fancy is going on.</p>

<h4>Contra</h4>

<p>Using global variables in JavaScript is a No-Go. However in this case it is
not that bad as the content of the global variable <code>users</code> is loaded into
scope at page load. Manipulating <code>users</code> afterwards doesn&#8217;t have any effects
on the scope and our frontend.</p>

<p>Still it is not the best solution. Let&#8217;s look at another one.</p>

<h3>2. HTTP request from Angular to a JSON API</h3>

<p>Inside <code>app.js</code> create another route for <code>GET /solution-two</code></p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/solution-two&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">res</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="s1">&#39;solutionTwo&#39;</span><span class="p">,</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;Express and Angular marriage&#39;</span>
</span><span class='line'>  <span class="p">})</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>and create the view <code>solutionTwo.jade</code> inside the <code>views/</code> folder with the
following content</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kr">extends</span> <span class="nx">layout</span>
</span><span class='line'>
</span><span class='line'><span class="nx">block</span> <span class="nx">content</span>
</span><span class='line'>  <span class="nx">div</span><span class="p">(</span><span class="nx">ng</span><span class="o">-</span><span class="nx">controller</span><span class="o">=</span><span class="s2">&quot;UserTwoCtrl&quot;</span><span class="p">)</span>
</span><span class='line'>    <span class="nx">h1</span><span class="o">=</span> <span class="nx">title</span>
</span><span class='line'>    <span class="nx">p</span> <span class="nx">Welcome</span> <span class="nx">to</span> <span class="err">#</span><span class="p">{</span><span class="nx">title</span><span class="p">}</span>
</span><span class='line'>    <span class="nx">ul</span>
</span><span class='line'>      <span class="nx">li</span><span class="p">(</span><span class="nx">ng</span><span class="o">-</span><span class="nx">repeat</span><span class="o">=</span><span class="s2">&quot;user in users&quot;</span><span class="p">)</span> <span class="p">{{</span><span class="nx">user</span><span class="p">.</span><span class="nx">name</span><span class="p">}}</span> <span class="o">-</span> <span class="p">{{</span><span class="nx">user</span><span class="p">.</span><span class="nx">email</span><span class="p">}}</span>
</span></code></pre></td></tr></table></div></figure>


<p>You might have noticed that we haven&#8217;t passed any data as local variables
from our Express backend to the view. When you start the server and navigate
with your browser to <code>/solution-one</code> you won&#8217;t see any users listed. We did
add another controller <code>UserTwoCtrl</code> to our view and we will add some
functionality now.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">function</span> <span class="nx">UserTwoCtrl</span><span class="p">(</span><span class="nx">$scope</span><span class="p">,</span> <span class="nx">$http</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">$http</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/solution-two/data&#39;</span><span class="p">).</span><span class="nx">success</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">$scope</span><span class="p">.</span><span class="nx">users</span> <span class="o">=</span> <span class="nx">data</span>
</span><span class='line'>  <span class="p">})</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>As soon as the controller is initiated by Angular it automatically makes a
 GET request to <code>/solution-two/data</code> and assigns the fetched data to <code>$scope.users</code>.
 Now refresh the page and see what happened. You should see an
 error saying</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">Failed</span> <span class="nx">to</span> <span class="nx">load</span> <span class="nx">resource</span><span class="o">:</span> <span class="nx">the</span> <span class="nx">server</span> <span class="nx">responded</span> <span class="kd">with</span> <span class="nx">a</span> <span class="nx">status</span> <span class="nx">of</span> <span class="mi">404</span> <span class="p">(</span><span class="nx">Not</span> <span class="nx">Found</span><span class="p">)</span>
</span></code></pre></td></tr></table></div></figure>


<p>Your terminal running the server should log</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">GET</span> <span class="o">/</span><span class="nx">solution</span><span class="o">-</span><span class="nx">two</span><span class="o">/</span><span class="nx">data</span> <span class="mi">404</span>
</span></code></pre></td></tr></table></div></figure>


<p>It simply means that we haven&#8217;t implemented the route <code>GET
/solution-two/data</code> yet. So let&#8217;s do this by adding the following code to the
 <code>app.js</code> file</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/solution-two/data&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">res</span><span class="p">.</span><span class="nx">json</span><span class="p">(</span><span class="nx">users</span><span class="p">);</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>Restart the server and with your browser go to <code>/solution-two/data</code>. You
should see our <code>users</code> object as JSON. Now go to <code>/solution-two</code> and, voila,
everything works as expected. Three list items are created each showing name
and email. The screenshot shows the extra request as the last action.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/angular-extra-http-request.png" title="Angular HTTP request fetching JSON data" ></p>

<h4>Pro</h4>

<p>Making HTTP request in order to get JSON data is common these days.
Every major web service offers some kind of API to allow third party access.
In theses cases, where you don&#8217;t have the necessary data on your own server,
it is the best solution to make an HTTP request from your frontend. You
could, of course, make the request from the server, get the data and send it
to the client as shown in solution one. This, however,
adds unnecessary overhead to our server and by calling the API from the
client we can save valuable resources.</p>

<h4>Contra</h4>

<p>The second solution needs the most additional code and also an extra route
from which the data is served as JSON. This can get a bit messy because you
basically have to serve every route twice. Once for the view and once for the
data. Therefore it is still not the perfect solution, which leads us to our last
method.</p>

<h3>3. Be smart and use ng-init</h3>

<p>The third and probably best solution makes use of the <a href="http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngInit">ngInit</a> directive.</p>

<blockquote><p>The ngInit directive specifies initialization tasks to be executed before
the template enters execution mode during bootstrap.</p></blockquote>

<p>What does that mean?</p>

<p>Short answer: The expression (variable + content) given to ngInit is loaded
into scope and made available under this name.</p>

<p>Let&#8217;s have a look at the example from the Angular docs</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="cp">&lt;!doctype html&gt;</span>
</span><span class='line'><span class="nt">&lt;html</span> <span class="na">ng-app</span><span class="nt">&gt;</span>
</span><span class='line'>  <span class="nt">&lt;head&gt;</span>
</span><span class='line'>    <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://code.angularjs.org/angular-1.0.2.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span><span class='line'>  <span class="nt">&lt;/head&gt;</span>
</span><span class='line'>  <span class="nt">&lt;body&gt;</span>
</span><span class='line'>    <span class="nt">&lt;div</span> <span class="na">ng-init=</span><span class="s">&quot;greeting=&#39;Hello&#39;; person=&#39;World&#39;&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>      {{greeting}} {{person}}!
</span><span class='line'>    <span class="nt">&lt;/div&gt;</span>
</span><span class='line'>  <span class="nt">&lt;/body&gt;</span>
</span><span class='line'><span class="nt">&lt;/html&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>The variable <code>$scope.greeting</code> holds the String <code>'Hello'</code> and <code>$scope.person='World'</code>. Both are available inside the scope although not explicitly
 specified inside a controller.</p>

<p>We could rewrite and simplify the example like this</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">function</span> <span class="nx">MyCtrl</span><span class="p">(</span><span class="nx">$scope</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">$scope</span><span class="p">.</span><span class="nx">greeting</span> <span class="o">=</span> <span class="s1">&#39;Hello&#39;</span><span class="p">;</span>
</span><span class='line'>  <span class="nx">$scope</span><span class="p">.</span><span class="nx">person</span> <span class="o">=</span> <span class="s1">&#39;World&#39;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>and</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="cp">&lt;!doctype html&gt;</span>
</span><span class='line'><span class="nt">&lt;html</span> <span class="na">ng-app</span><span class="nt">&gt;</span>
</span><span class='line'>  <span class="nt">&lt;head&gt;</span>
</span><span class='line'>    <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://code.angularjs.org/angular-1.0.2.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span><span class='line'>    <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;/javascripts/controller.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span><span class='line'>  <span class="nt">&lt;/head&gt;</span>
</span><span class='line'>  <span class="nt">&lt;body&gt;</span>
</span><span class='line'>    <span class="nt">&lt;div</span> <span class="na">ng-controller=</span><span class="s">&quot;MyCtrl&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>      {{greeting}} {{person}}!
</span><span class='line'>    <span class="nt">&lt;/div&gt;</span>
</span><span class='line'>  <span class="nt">&lt;/body&gt;</span>
</span><span class='line'><span class="nt">&lt;/html&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>So let&#8217;s combine this approach and our initial problem. First,
add a new route <code>GET /solution-three</code> to <code>app.js</code> and create the
corresponding view <code>solutionThree.jade</code>:</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/solution-three&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">res</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="s1">&#39;solutionThree&#39;</span><span class="p">,</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;Express and Angular marriage&#39;</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">users</span><span class="o">:</span> <span class="nx">users</span>
</span><span class='line'>  <span class="p">})</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>




<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kr">extends</span> <span class="nx">layout</span>
</span><span class='line'>
</span><span class='line'><span class="nx">block</span> <span class="nx">content</span>
</span><span class='line'>  <span class="nx">div</span><span class="p">(</span><span class="nx">ng</span><span class="o">-</span><span class="nx">controller</span><span class="o">=</span><span class="s2">&quot;UserThreeCtrl&quot;</span><span class="p">,</span> <span class="nx">ng</span><span class="o">-</span><span class="nx">init</span><span class="o">=</span><span class="s2">&quot;users= #{JSON.stringify(users)}&quot;</span><span class="p">)</span>
</span><span class='line'>    <span class="nx">h1</span><span class="o">=</span> <span class="nx">title</span>
</span><span class='line'>    <span class="nx">p</span> <span class="nx">Welcome</span> <span class="nx">to</span> <span class="err">#</span><span class="p">{</span><span class="nx">title</span><span class="p">}</span>
</span><span class='line'>    <span class="nx">ul</span>
</span><span class='line'>      <span class="nx">li</span><span class="p">(</span><span class="nx">ng</span><span class="o">-</span><span class="nx">repeat</span><span class="o">=</span><span class="s2">&quot;user in users&quot;</span><span class="p">)</span> <span class="p">{{</span><span class="nx">user</span><span class="p">.</span><span class="nx">name</span><span class="p">}}</span> <span class="o">-</span> <span class="p">{{</span><span class="nx">user</span><span class="p">.</span><span class="nx">email</span><span class="p">}}</span>
</span></code></pre></td></tr></table></div></figure>


<p>As you can see we pass our <code>users</code> variable to the Jade template as a local
variable. Inside the template we convert the JSON object to its String
representation and assign it to the Angular variable <code>users</code>. Later on we
have access to this variable and use a regular <code>ngRepeat</code> directive to create
 the list of users. Start the server, navigate to <code>/solution-three</code> and
 you should the expected list of users.</p>

<h4>Pro</h4>

<p>It is the cleanest solution. We don&#8217;t have to use global variables and we
don&#8217;t have to make an extra HTTP request. It is also the solution that needs
the least amount of code.</p>

<h4>Contra</h4>

<p>The concept behind <code>ngInit</code> might be a bit confusing at the beginning. For
further insights and to understand how Angular actually renders a page I
recommend reading <a href="http://docs.angularjs.org/guide/bootstrap">Bootstrap</a> (not
 related to <a href="http://twitter.github.io/bootstrap/">Twitter&#8217;s Bootstrap</a>) and
 <a href="http://docs.angularjs.org/guide/compiler">HTML Compiler</a>.</p>

<h3>Conclusion</h3>

<p>You&#8217;ve learned that several solutions exist for passing data from your backend to an Angular
controller. While solution one being the worst it depends on your architecture and your requirements
whether solution two or three fits better. I personally tend to use the last solution as I have to make
one less request to the server.</p>

<p>As promised at the beginning you can find the working example at GitHub under
 <a href="https://github.com/zeMirco/zemirco.github.io/tree/source/code-examples/server-vars-ngcontroller">server-vars-ngcontroller</a>.</p>

<p><strong>Pro Tip</strong>: Don&#8217;t mix Jade&#8217;s <code>for user in users</code> and <code>ng-repeat="user in users"</code>
 from Angular. I did that once at the beginning and was totally frustrated
 because nothing worked as expected. You can image my feelings when I found
 that mistake. Well, it was late that night!</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Blog Init]]></title>
    <link href="http://mircozeiss.com/blog-init/"/>
    <updated>2013-04-12T00:00:00+02:00</updated>
    <id>http://mircozeiss.com/blog-init</id>
    <content type="html"><![CDATA[<p>I&#8217;ve been playing with the idea for some time and today I finally start my own blog.</p>

<p>You&#8217;ll read about JavaScript, web technologies and solutions I came across developing web applications.</p>

<p> The blog is powered by <a href="http://octopress.org/">Octopress</a> and
 hosted on <a href="http://pages.github.com/">GitHub pages</a>. You can find the repo at
 <a href="https://github.com/zeMirco/zemirco.github.io">zemirco.github.io</a>. I got the domain
 <a href="http://www.mircozeiss.com">mircozeiss.com</a> from <a href="http://www.hetzner.de/en/">Hetzner</a> and, being
 a developer and not a designer, I&#8217;m very thankful for <a href="http://lucaslew.com/">Lucas Lew</a> who
 created the <a href="https://github.com/lucaslew/whitespace">whitespace</a> theme.</p>

<p>If you&#8217;ve got some ideas for improvements send me an email to
<a href="mailto:mirco.zeiss@gmail.com">mirco.zeiss@gmail.com</a> or write something below.</p>
]]></content>
  </entry>
  
</feed>