From 44be6de92ac1f9088c28251c66b16905d7c417f9 Mon Sep 17 00:00:00 2001
From: Michael Herman <hermanmu@gmail.com>
Date: Thu, 5 Jan 2017 08:08:39 -0700
Subject: [PATCH] Site updated at 2017-01-05 15:08:38 UTC

---
 404.html                                      |    2 +-
 about/index.html                              |    2 +-
 archives/index.html                           |   18 +-
 atom.xml                                      | 1542 +++-
 .../index.html                                |    2 +-
 .../index.html                                |    2 +-
 .../index.html                                |    2 +-
 .../index.html                                |    2 +-
 .../index.html                                |    2 +-
 .../scraping-web-pages-with-scrapy/index.html |    2 +-
 .../index.html                                |    2 +-
 .../09/51-new-excel-2013-functions/index.html |    2 +-
 .../index.html                                |    2 +-
 .../index.html                                |    2 +-
 .../crash-course-in-web2py-part-1/index.html  |    2 +-
 .../index.html                                |    2 +-
 .../index.html                                |    2 +-
 .../index.html                                |    2 +-
 .../index.html                                |    2 +-
 .../index.html                                |    2 +-
 blog/2012/12/30/django-basics/index.html      |    2 +-
 .../index.html                                |    2 +-
 .../index.html                                |    2 +-
 .../index.html                                |    2 +-
 .../index.html                                |    2 +-
 blog/2013/05/27/what-am-i-good-at/index.html  |    2 +-
 .../index.html                                |    2 +-
 .../index.html                                |    2 +-
 blog/2013/06/28/less-is-more/index.html       |    2 +-
 .../07/04/removing-a-django-app/index.html    |    2 +-
 .../index.html                                |    2 +-
 .../08/02/multitasking-vs-batching/index.html |    2 +-
 .../index.html                                |    2 +-
 .../index.html                                |    2 +-
 .../index.html                                |    2 +-
 .../index.html                                |    2 +-
 blog/2013/10/11/basic-git-commands/index.html |    2 +-
 .../index.html                                |    2 +-
 .../index.html                                |    2 +-
 .../index.html                                |    2 +-
 .../index.html                                |    2 +-
 .../index.html                                |    2 +-
 .../index.html                                |    2 +-
 .../so-you-want-be-an-entrepreneur/index.html |    2 +-
 .../index.html                                |    2 +-
 .../16/getting-started-with-node/index.html   |    2 +-
 .../02/19/node-twitter-sentiment/index.html   |    2 +-
 .../node-twitter-sentiment-part-2/index.html  |    2 +-
 .../index.html                                |    2 +-
 .../index.html                                |    2 +-
 .../index.html                                |    2 +-
 .../index.html                                |    2 +-
 .../kickstarting-angular-with-gulp/index.html |    2 +-
 .../index.html                                |    2 +-
 .../31/node-and-mongoose-a-primer/index.html  |    2 +-
 .../index.html                                |    2 +-
 .../index.html                                |    2 +-
 .../02/12/postgresql-and-nodejs/index.html    |    2 +-
 .../index.html                                |    2 +-
 .../index.html                                |    2 +-
 .../index.html                                |    2 +-
 .../index.html                                |    4 +-
 .../23/primer-on-swig-templating/index.html   |    2 +-
 .../node-express-swig-mongo-primer/index.html |    2 +-
 .../index.html                                |    2 +-
 .../index.html                                |    2 +-
 .../10/22/node-postgres-sequelize/index.html  |    2 +-
 .../index.html                                |    2 +-
 .../index.html                                |    2 +-
 blog/2016/05/26/swagger-and-nodejs/index.html |    2 +-
 .../08/16/atom-for-web-developers/index.html  |    2 +-
 .../09/12/testing-node-and-express/index.html |    2 +-
 .../25/node-passport-and-postgres/index.html  |    2 +-
 .../index.html                                |    6 +-
 .../index.html                                |    2 +-
 .../index.html                                |    4 +-
 .../index.html                                | 1480 ++++
 blog/archives/index.html                      |   25 +-
 blog/categories/analytics/atom.xml            |    2 +-
 blog/categories/analytics/index.html          |    2 +-
 blog/categories/angular/atom.xml              | 6979 ++++++++++++-----
 blog/categories/angular/index.html            |   19 +-
 blog/categories/atom/atom.xml                 |    2 +-
 blog/categories/atom/index.html               |    2 +-
 blog/categories/crowdfunding/atom.xml         |    2 +-
 blog/categories/crowdfunding/index.html       |    2 +-
 blog/categories/docker/atom.xml               |    2 +-
 blog/categories/docker/index.html             |    2 +-
 blog/categories/excel/atom.xml                |    2 +-
 blog/categories/excel/index.html              |    2 +-
 blog/categories/finance/atom.xml              |    2 +-
 blog/categories/finance/index.html            |    2 +-
 blog/categories/frontend/atom.xml             |    2 +-
 blog/categories/frontend/index.html           |    2 +-
 blog/categories/git/atom.xml                  |    2 +-
 blog/categories/git/index.html                |    2 +-
 blog/categories/github/atom.xml               |    2 +-
 blog/categories/github/index.html             |    2 +-
 blog/categories/meteor/atom.xml               |    2 +-
 blog/categories/meteor/index.html             |    2 +-
 blog/categories/news/atom.xml                 |    2 +-
 blog/categories/news/index.html               |    2 +-
 blog/categories/node/atom.xml                 |    4 +-
 blog/categories/node/index.html               |    2 +-
 blog/categories/python/atom.xml               |    2 +-
 blog/categories/python/index.html             |    2 +-
 blog/categories/ruby/atom.xml                 |    2 +-
 blog/categories/ruby/index.html               |    2 +-
 blog/categories/startups/atom.xml             |    2 +-
 blog/categories/startups/index.html           |    2 +-
 blog/categories/sublime/atom.xml              |    2 +-
 blog/categories/sublime/index.html            |    2 +-
 blog/index.html                               |    2 +-
 index.html                                    |   25 +-
 posts/10/index.html                           |   25 +-
 posts/11/index.html                           |   25 +-
 posts/12/index.html                           |   25 +-
 posts/13/index.html                           |   25 +-
 posts/14/index.html                           |   25 +-
 posts/15/index.html                           |   25 +-
 posts/16/index.html                           |   25 +-
 posts/17/index.html                           |   25 +-
 posts/18/index.html                           |   25 +-
 posts/19/index.html                           |   25 +-
 posts/2/index.html                            |   25 +-
 posts/20/index.html                           |   25 +-
 posts/21/index.html                           |   25 +-
 posts/22/index.html                           |   25 +-
 posts/23/index.html                           |   25 +-
 posts/24/index.html                           |   25 +-
 posts/25/index.html                           | 1214 +++
 posts/3/index.html                            |   25 +-
 posts/4/index.html                            |   25 +-
 posts/5/index.html                            |   25 +-
 posts/6/index.html                            |   25 +-
 posts/7/index.html                            |   25 +-
 posts/8/index.html                            |   25 +-
 posts/9/index.html                            |   25 +-
 sitemap.xml                                   |    4 +
 youtube-tutorials/index.html                  |    2 +-
 140 files changed, 9436 insertions(+), 2671 deletions(-)
 create mode 100644 blog/2017/01/05/token-based-authentication-with-angular/index.html
 create mode 100644 posts/25/index.html

diff --git a/404.html b/404.html
index 93350669..f7bed531 100644
--- a/404.html
+++ b/404.html
@@ -159,7 +159,7 @@ <h1 class="entry-title">Page not found</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/about/index.html b/about/index.html
index fdf44ee8..71e3506c 100644
--- a/about/index.html
+++ b/about/index.html
@@ -196,7 +196,7 @@ <h4>Articles about me</h4>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/archives/index.html b/archives/index.html
index 35f9e36c..c9c20c5e 100644
--- a/archives/index.html
+++ b/archives/index.html
@@ -9,9 +9,9 @@
   <meta name="author" content="Michael Herman">
 
   
-  <meta name="description" content="Building a RESTful API With Node, Flow, and Jest
-Dec 23 2016 Developing a RESTful API With Node and TypeScript
-Nov 05 2016 Token-Based &hellip;">
+  <meta name="description" content="Token-Based Authentication With Angular
+Jan 05 2017 Building a RESTful API With Node, Flow, and Jest
+Dec 23 2016 Developing a RESTful API With Node &hellip;">
   
 
   <!-- http://t.co/dKP3o1e -->
@@ -93,6 +93,16 @@ <h2>Software Developer</h2>
     <div id="content">
       
 	
+<h1><a href="/blog/2017/01/05/token-based-authentication-with-angular/">Token-Based Authentication With Angular</a></h1>
+<time datetime="2017-01-05T07:30:21-07:00" pubdate><span class='month'>Jan</span> <span class='day'>05</span> <span class='year'>2017</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a></span>
+</footer>
+ -->
+
+
+	
 <h1><a href="/blog/2016/12/23/building-a-restful-api-with-node-and-flow/">Building a RESTful API With Node, Flow, and Jest</a></h1>
 <time datetime="2016-12-23T07:59:54-07:00" pubdate><span class='month'>Dec</span> <span class='day'>23</span> <span class='year'>2016</span></time>
 <!-- 
@@ -815,7 +825,7 @@ <h1><a href="/blog/2012/09/01/predictive-analytics-top-5-trends-going-forward/">
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/atom.xml b/atom.xml
index ed9c343e..6e7473e4 100644
--- a/atom.xml
+++ b/atom.xml
@@ -4,7 +4,7 @@
   <title><![CDATA[Michael Herman]]></title>
   <link href="http://mherman.org/atom.xml" rel="self"/>
   <link href="http://mherman.org/"/>
-  <updated>2016-12-23T05:09:36-07:00</updated>
+  <updated>2017-01-05T08:08:25-07:00</updated>
   <id>http://mherman.org/</id>
   <author>
     <name><![CDATA[Michael Herman]]></name>
@@ -13,6 +13,1238 @@
   <generator uri="http://octopress.org/">Octopress</generator>
 
   
+  <entry>
+    <title type="html"><![CDATA[Token-Based Authentication With Angular]]></title>
+    <link href="http://mherman.org/blog/2017/01/05/token-based-authentication-with-angular/"/>
+    <updated>2017-01-05T07:30:21-07:00</updated>
+    <id>http://mherman.org/blog/2017/01/05/token-based-authentication-with-angular</id>
+    <content type="html"><![CDATA[<p>In the <a href="http://mherman.org/blog/2016/10/28/token-based-authentication-with-node">Token-Based Authentication With Node</a> tutorial, we looked at how to add token-based authentication to a Node app using JSON Web Tokens (JWTs). <em>This time, we&rsquo;ll build out the client-side by showing how to add auth to Angular using JWTs.</em></p>
+
+<h2>Contents</h2>
+
+<ol>
+<li>Objectives</li>
+<li>Review</li>
+<li>Project Setup</li>
+<li>Auth Component</li>
+<li>Service</li>
+<li>Server-side Setup</li>
+<li>Sanity Check</li>
+<li>Auth Login</li>
+<li>Auth Register</li>
+<li>LocalStorage</li>
+<li>Route Restriction</li>
+<li>What&rsquo;s Next?</li>
+</ol>
+
+
+<h2>Objectives</h2>
+
+<p>By the end of this tutorial, you will be able to&hellip;</p>
+
+<ol>
+<li>Discuss the benefits of using JWTs versus sessions and cookies</li>
+<li>Discuss the overall client/server authentication workflow</li>
+<li>Implement user authentication using JWTs with Angular</li>
+</ol>
+
+
+<h2>Review</h2>
+
+<p>Before beginning, review the <em>Introduction</em> from <a href="http://mherman.org/blog/2016/10/28/token-based-authentication-with-node">Token-Based Authentication With Node</a> so you have a solid understanding of what JWTs are and why you would want to use tokens over sessions for auth.</p>
+
+<p>Make sure you can describe what&rsquo;s happening on the server-side as well. Review the code from the <a href="https://github.com/mjhea0/node-token-auth">node-token-auth</a> repo, if necessary.</p>
+
+<p>With that, here&rsquo;s the full user auth process:</p>
+
+<ol>
+<li>Client logs in and the credentials are sent to the server</li>
+<li>Server generates a token (if the credentials are correct)</li>
+<li>Client receives and stores the token in local storage</li>
+<li>Client then sends token to server on subsequent requests within the request header</li>
+</ol>
+
+
+<h2>Project Setup</h2>
+
+<p>Start by cloning the project structure:</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='sh'><span class='line'><span class="nv">$ </span>git clone https://github.com/mjhea0/angular-token-auth --branch v1 --single-branch -b master
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Install the dependencies, and then fire up the app by running <code>gulp</code> to make sure all is well. Navigate to <a href="http://localhost:8888">http://localhost:8888</a> in your browser and you should 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>
+<span class='line-number'>2</span>
+</pre></td><td class='code'><pre><code class='sh'><span class='line'>Hello World
+</span><span class='line'>sanity check
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Kill the server when done, and then glance over the code within the project 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>
+<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='sh'><span class='line'>├── README.md
+</span><span class='line'>├── gulpfile.js
+</span><span class='line'>├── package.json
+</span><span class='line'>└── src
+</span><span class='line'>    ├── css
+</span><span class='line'>    │   └── main.css
+</span><span class='line'>    ├── index.html
+</span><span class='line'>    └── js
+</span><span class='line'>        ├── app.js
+</span><span class='line'>        ├── components
+</span><span class='line'>        │   └── main
+</span><span class='line'>        │       ├── main.controller.js
+</span><span class='line'>        │       └── main.view.html
+</span><span class='line'>        └── config.js
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>All of the client-side code lives in the &ldquo;src&rdquo; folder and the Angular app can be found in the &ldquo;js&rdquo; folder. Make sure you understand the app structure before moving on.</p>
+
+<blockquote><p><strong>NOTE:</strong> This app uses Angular version <a href="https://code.angularjs.org/1.6.1/docs/api">1.6.1</a>.</p></blockquote>
+
+<p>This is optional, but it&rsquo;s a good idea to create a new Github repository and update the remote:</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='sh'><span class='line'><span class="nv">$ </span>git remote <span class="nb">set</span>-url origin &lt;newurl&gt;
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Now, let&rsquo;s wire up a new component&hellip;</p>
+
+<h2>Auth Component</h2>
+
+<p>First, add the dependency to the setter array within <em>app.js</em>:</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='javascript'><span class='line'><span class="nx">angular</span>
+</span><span class='line'>  <span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;tokenAuthApp&#39;</span><span class="p">,</span> <span class="p">[</span>
+</span><span class='line'>    <span class="s1">&#39;ngRoute&#39;</span><span class="p">,</span>
+</span><span class='line'>    <span class="s1">&#39;tokenAuthApp.config&#39;</span><span class="p">,</span>
+</span><span class='line'>    <span class="s1">&#39;tokenAuthApp.components.main&#39;</span><span class="p">,</span>
+</span><span class='line'>    <span class="s1">&#39;tokenAuthApp.components.auth&#39;</span>
+</span><span class='line'>  <span class="p">]);</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Create a new folder within &ldquo;components&rdquo; called &ldquo;auth&rdquo;, and then add the following two files to that folder&hellip;</p>
+
+<p><em>auth.controller.js</em>:</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='javascript'><span class='line'><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="s1">&#39;use strict&#39;</span><span class="p">;</span>
+</span><span class='line'>
+</span><span class='line'>  <span class="nx">angular</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;tokenAuthApp.components.auth&#39;</span><span class="p">,</span> <span class="p">[])</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">controller</span><span class="p">(</span><span class="s1">&#39;authLoginController&#39;</span><span class="p">,</span> <span class="nx">authLoginController</span><span class="p">);</span>
+</span><span class='line'>
+</span><span class='line'>  <span class="nx">authLoginController</span><span class="p">.</span><span class="nx">$inject</span> <span class="o">=</span> <span class="p">[];</span>
+</span><span class='line'>
+</span><span class='line'>  <span class="kd">function</span> <span class="nx">authLoginController</span><span class="p">()</span> <span class="p">{</span>
+</span><span class='line'>    <span class="cm">/*jshint validthis: true */</span>
+</span><span class='line'>    <span class="kr">const</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
+</span><span class='line'>    <span class="nx">vm</span><span class="p">.</span><span class="nx">test</span> <span class="o">=</span> <span class="s1">&#39;just a test&#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><em>auth.login.view.html</em>:</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'><span class="nt">&lt;h1&gt;</span>Login<span class="nt">&lt;/h1&gt;</span>
+</span><span class='line'>
+</span><span class='line'><span class="nt">&lt;p&gt;</span>{{authLoginCtrl.test}}<span class="nt">&lt;/p&gt;</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Next, add the script tag to <em>index.html</em>, just before the closing body tag:</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='html'><span class='line'><span class="c">&lt;!-- auth component --&gt;</span>
+</span><span class='line'><span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span> <span class="na">src=</span><span class="s">&quot;js/components/auth/auth.controller.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Add a new route handler to the <em>config.js</em> 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>
+<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='javascript'><span class='line'><span class="kd">function</span> <span class="nx">appConfig</span><span class="p">(</span><span class="nx">$routeProvider</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>  <span class="nx">$routeProvider</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">when</span><span class="p">(</span><span class="s1">&#39;/&#39;</span><span class="p">,</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">templateUrl</span><span class="o">:</span> <span class="s1">&#39;js/components/main/main.view.html&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controller</span><span class="o">:</span> <span class="s1">&#39;mainController&#39;</span>
+</span><span class='line'>    <span class="p">})</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">when</span><span class="p">(</span><span class="s1">&#39;/login&#39;</span><span class="p">,</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">templateUrl</span><span class="o">:</span> <span class="s1">&#39;js/components/auth/auth.login.view.html&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controller</span><span class="o">:</span> <span class="s1">&#39;authLoginController&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controllerAs</span><span class="o">:</span> <span class="s1">&#39;authLoginCtrl&#39;</span>
+</span><span class='line'>    <span class="p">})</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">otherwise</span><span class="p">({</span>
+</span><span class='line'>      <span class="nx">redirectTo</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="p">}</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Run gulp, and then navigate to <a href="http://localhost:8888/#!/login.">http://localhost:8888/#!/login.</a> If all went well you should see the <code>just a test</code> text.</p>
+
+<h2>Service</h2>
+
+<p>Next, let&rsquo;s create a global service to handle a user logging in, logging out, and signing up. Add a new file called <em>services.js</em> to the &ldquo;js&rdquo; directory:</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='javascript'><span class='line'><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="s1">&#39;use strict&#39;</span><span class="p">;</span>
+</span><span class='line'>
+</span><span class='line'>  <span class="nx">angular</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;tokenAuthApp.services&#39;</span><span class="p">,</span> <span class="p">[])</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">service</span><span class="p">(</span><span class="s1">&#39;authService&#39;</span><span class="p">,</span> <span class="nx">authService</span><span class="p">);</span>
+</span><span class='line'>
+</span><span class='line'>  <span class="nx">authService</span><span class="p">.</span><span class="nx">$inject</span> <span class="o">=</span> <span class="p">[];</span>
+</span><span class='line'>
+</span><span class='line'>  <span class="kd">function</span> <span class="nx">authService</span><span class="p">()</span> <span class="p">{</span>
+</span><span class='line'>    <span class="cm">/*jshint validthis: true */</span>
+</span><span class='line'>    <span class="k">this</span><span class="p">.</span><span class="nx">test</span> <span class="o">=</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="s1">&#39;working&#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="p">})();</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Make sure to add it to the dependencies in <em>app.js</em>:</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='javascript'><span class='line'><span class="nx">angular</span>
+</span><span class='line'>  <span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;tokenAuthApp&#39;</span><span class="p">,</span> <span class="p">[</span>
+</span><span class='line'>    <span class="s1">&#39;ngRoute&#39;</span><span class="p">,</span>
+</span><span class='line'>    <span class="s1">&#39;tokenAuthApp.config&#39;</span><span class="p">,</span>
+</span><span class='line'>    <span class="s1">&#39;tokenAuthApp.components.main&#39;</span><span class="p">,</span>
+</span><span class='line'>    <span class="s1">&#39;tokenAuthApp.components.auth&#39;</span><span class="p">,</span>
+</span><span class='line'>    <span class="s1">&#39;tokenAuthApp.services&#39;</span>
+</span><span class='line'>  <span class="p">]);</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Add the script to the <em>index.html</em> file, below the config script:</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">type=</span><span class="s">&quot;text/javascript&quot;</span> <span class="na">src=</span><span class="s">&quot;./js/services.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<h3>Sanity Check</h3>
+
+<p>Before adding code to <code>authService()</code>, let&rsquo;s make sure the service itself is wired up correctly. To do that, within <em>auth.controller.js</em> inject the service and call the <code>test()</code> method:</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='javascript'><span class='line'><span class="nx">authLoginController</span><span class="p">.</span><span class="nx">$inject</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;authService&#39;</span><span class="p">];</span>
+</span><span class='line'>
+</span><span class='line'><span class="kd">function</span> <span class="nx">authLoginController</span><span class="p">(</span><span class="nx">authService</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>  <span class="cm">/*jshint validthis: true */</span>
+</span><span class='line'>  <span class="kr">const</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
+</span><span class='line'>  <span class="nx">vm</span><span class="p">.</span><span class="nx">test</span> <span class="o">=</span> <span class="s1">&#39;just a test&#39;</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">authService</span><span class="p">.</span><span class="nx">test</span><span class="p">());</span>
+</span><span class='line'><span class="p">}</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Run the server and then navigate to <a href="http://localhost:8888/#!/login.">http://localhost:8888/#!/login.</a> You should see <code>working</code> logged to the JS console.</p>
+
+<h3>User Login</h3>
+
+<p>To handle logging a user in, update the <code>authService()</code> like so:</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='javascript'><span class='line'><span class="nx">authService</span><span class="p">.</span><span class="nx">$inject</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;$http&#39;</span><span class="p">];</span>
+</span><span class='line'>
+</span><span class='line'><span class="kd">function</span> <span class="nx">authService</span><span class="p">(</span><span class="nx">$http</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>  <span class="cm">/*jshint validthis: true */</span>
+</span><span class='line'>  <span class="kr">const</span> <span class="nx">baseURL</span> <span class="o">=</span> <span class="s1">&#39;http://localhost:3000/auth/&#39;</span><span class="p">;</span>
+</span><span class='line'>  <span class="k">this</span><span class="p">.</span><span class="nx">login</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">user</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>    <span class="k">return</span> <span class="nx">$http</span><span class="p">({</span>
+</span><span class='line'>      <span class="nx">method</span><span class="o">:</span> <span class="s1">&#39;POST&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">url</span><span class="o">:</span> <span class="nx">baseURL</span> <span class="o">+</span> <span class="s1">&#39;login&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">data</span><span class="o">:</span> <span class="nx">user</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">headers</span><span class="o">:</span> <span class="p">{</span><span class="s1">&#39;Content-Type&#39;</span><span class="o">:</span> <span class="s1">&#39;application/json&#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 class="p">}</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Here, we are using the <code>$http</code> service to send an AJAX request to the <code>/user/login</code> endpoint. This returns a promise object.</p>
+
+<p>Make sure to remove <code>console.log(authService.test());</code> from the controller.</p>
+
+<h3>User Registration</h3>
+
+<p>Registering a user is similar to logging a user in:</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='javascript'><span class='line'><span class="k">this</span><span class="p">.</span><span class="nx">register</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">user</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>  <span class="k">return</span> <span class="nx">$http</span><span class="p">({</span>
+</span><span class='line'>    <span class="nx">method</span><span class="o">:</span> <span class="s1">&#39;POST&#39;</span><span class="p">,</span>
+</span><span class='line'>    <span class="nx">url</span><span class="o">:</span> <span class="nx">baseURL</span> <span class="o">+</span> <span class="s1">&#39;register&#39;</span><span class="p">,</span>
+</span><span class='line'>    <span class="nx">data</span><span class="o">:</span> <span class="nx">user</span><span class="p">,</span>
+</span><span class='line'>    <span class="nx">headers</span><span class="o">:</span> <span class="p">{</span><span class="s1">&#39;Content-Type&#39;</span><span class="o">:</span> <span class="s1">&#39;application/json&#39;</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>To test this we need to set up a back end&hellip;</p>
+
+<h2>Server-side Setup</h2>
+
+<p>For the server-side, we&rsquo;ll use the finished project from the previous blog post, <a href="http://mherman.org/blog/2016/10/28/token-based-authentication-with-node/">Token-Based Authentication With Node</a>. You can view the code from the <a href="https://github.com/mjhea0/node-token-auth">node-token-auth</a> repository.</p>
+
+<blockquote><p><strong>NOTE:</strong> Feel free to use your own server, just make sure to update the <code>baseURL</code> in the service.</p></blockquote>
+
+<p>Clone the project structure in a new terimal window:</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='sh'><span class='line'><span class="nv">$ </span>git clone https://github.com/mjhea0/node-token-auth --branch v2 --single-branch -b master
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Follow the directions in the <a href="https://github.com/mjhea0/node-token-auth/blob/v2/README.md">README</a> to set up the project. Once done, run the server with <code>npm start</code>, which will listen on port 3000.</p>
+
+<h2>Sanity Check</h2>
+
+<p>To test, update <code>authLoginController()</code> like so:</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>
+</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">function</span> <span class="nx">authLoginController</span><span class="p">(</span><span class="nx">authService</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>  <span class="cm">/*jshint validthis: true */</span>
+</span><span class='line'>  <span class="kr">const</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
+</span><span class='line'>  <span class="nx">vm</span><span class="p">.</span><span class="nx">test</span> <span class="o">=</span> <span class="s1">&#39;just a test&#39;</span><span class="p">;</span>
+</span><span class='line'>  <span class="kr">const</span> <span class="nx">sampleUser</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;michael&#39;</span><span class="p">,</span>
+</span><span class='line'>    <span class="nx">password</span><span class="o">:</span> <span class="s1">&#39;herman&#39;</span>
+</span><span class='line'>  <span class="p">};</span>
+</span><span class='line'>  <span class="nx">authService</span><span class="p">.</span><span class="nx">register</span><span class="p">(</span><span class="nx">sampleUser</span><span class="p">)</span>
+</span><span class='line'>  <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">user</span><span class="p">)</span> <span class="o">=&gt;</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">user</span><span class="p">.</span><span class="nx">data</span><span class="p">);</span>
+</span><span class='line'>  <span class="p">})</span>
+</span><span class='line'>  <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="o">=&gt;</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">err</span><span class="p">);</span>
+</span><span class='line'>  <span class="p">});</span>
+</span><span class='line'>  <span class="nx">authService</span><span class="p">.</span><span class="nx">login</span><span class="p">(</span><span class="nx">sampleUser</span><span class="p">)</span>
+</span><span class='line'>  <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">user</span><span class="p">)</span> <span class="o">=&gt;</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">user</span><span class="p">.</span><span class="nx">data</span><span class="p">);</span>
+</span><span class='line'>  <span class="p">})</span>
+</span><span class='line'>  <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="o">=&gt;</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">err</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>In the browser, you should see the following errors in the console at <a href="http://localhost:8888/#!/login:">http://localhost:8888/#!/login:</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='javascript'><span class='line'><span class="nx">XMLHttpRequest</span> <span class="nx">cannot</span> <span class="nx">load</span> <span class="nx">http</span><span class="o">:</span><span class="c1">//localhost:3000/auth/register. Response to preflight request doesn&#39;t pass access control check: No &#39;Access-Control-Allow-Origin&#39; header is present on the requested resource. Origin &#39;http://localhost:8888&#39; is therefore not allowed access.</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>This is a <a href="http://enable-cors.org/">CORS issue</a>. To fix, we need to <a href="http://enable-cors.org/server_expressjs.html">update</a> the server. Add the following code to <em>src/server/config/main-config.js</em>, just above <code>app.use(cookieParser());</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>
+</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="c1">// *** cross domain requests *** //</span>
+</span><span class='line'><span class="kr">const</span> <span class="nx">allowCrossDomain</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">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">header</span><span class="p">(</span><span class="s1">&#39;Access-Control-Allow-Origin&#39;</span><span class="p">,</span> <span class="s1">&#39;*&#39;</span><span class="p">);</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="s1">&#39;Access-Control-Allow-Methods&#39;</span><span class="p">,</span> <span class="s1">&#39;GET, POST, PUT, DELETE&#39;</span><span class="p">);</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="s1">&#39;Access-Control-Allow-Headers&#39;</span><span class="p">,</span> <span class="s1">&#39;Content-Type, Authorization&#39;</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><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="nx">allowCrossDomain</span><span class="p">);</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Refresh <a href="http://localhost:8888/#!/login">http://localhost:8888/#!/login</a> in the browser and you should see a success in the console with the token:</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='json'><span class='line'><span class="p">{</span>
+</span><span class='line'>    <span class="nt">&quot;status&quot;</span><span class="p">:</span> <span class="s2">&quot;success&quot;</span><span class="p">,</span>
+</span><span class='line'>    <span class="nt">&quot;token&quot;</span><span class="p">:</span> <span class="s2">&quot;eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE0ODQ2NzY4MjEsImlhdCI6MTQ4MzQ2NzIyMSwic3ViIjoyfQ.hMcrXz-63iD4jX-ves3cZMznSS3UhZD4NCPry2zLkHo&quot;</span>
+</span><span class='line'><span class="p">}</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<h2>Auth Login</h2>
+
+<p>Update <em>auth.login.view.html</em>:</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='html'><span class='line'><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;row&quot;</span><span class="nt">&gt;</span>
+</span><span class='line'>  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;col-md-4&quot;</span><span class="nt">&gt;</span>
+</span><span class='line'>    <span class="nt">&lt;h1&gt;</span>Login<span class="nt">&lt;/h1&gt;</span>
+</span><span class='line'>    <span class="nt">&lt;hr&gt;&lt;br&gt;</span>
+</span><span class='line'>    <span class="nt">&lt;form</span> <span class="na">ng-submit=</span><span class="s">&quot;authLoginCtrl.onLogin()&quot;</span> <span class="na">novalidate</span><span class="nt">&gt;</span>
+</span><span class='line'>     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;form-group&quot;</span><span class="nt">&gt;</span>
+</span><span class='line'>       <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">&quot;username&quot;</span><span class="nt">&gt;</span>Username<span class="nt">&lt;/label&gt;</span>
+</span><span class='line'>       <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">class=</span><span class="s">&quot;form-control&quot;</span> <span class="na">id=</span><span class="s">&quot;username&quot;</span> <span class="na">placeholder=</span><span class="s">&quot;enter username&quot;</span> <span class="na">ng-model=</span><span class="s">&quot;authLoginCtrl.user.username&quot;</span> <span class="na">required</span><span class="nt">&gt;</span>
+</span><span class='line'>     <span class="nt">&lt;/div&gt;</span>
+</span><span class='line'>     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;form-group&quot;</span><span class="nt">&gt;</span>
+</span><span class='line'>       <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">&quot;passwowrd&quot;</span><span class="nt">&gt;</span>Password<span class="nt">&lt;/label&gt;</span>
+</span><span class='line'>       <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;password&quot;</span> <span class="na">class=</span><span class="s">&quot;form-control&quot;</span> <span class="na">id=</span><span class="s">&quot;passwowrd&quot;</span> <span class="na">placeholder=</span><span class="s">&quot;enter password&quot;</span> <span class="na">ng-model=</span><span class="s">&quot;authLoginCtrl.user.password&quot;</span> <span class="na">required</span><span class="nt">&gt;</span>
+</span><span class='line'>     <span class="nt">&lt;/div&gt;</span>
+</span><span class='line'>     <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">&quot;submit&quot;</span> <span class="na">class=</span><span class="s">&quot;btn btn-default&quot;</span><span class="nt">&gt;</span>Submit<span class="nt">&lt;/button&gt;</span>
+</span><span class='line'>    <span class="nt">&lt;/form&gt;</span>
+</span><span class='line'>  <span class="nt">&lt;/div&gt;</span>
+</span><span class='line'><span class="nt">&lt;/div&gt;</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Take note of the form. We used the <code>ng-model</code> directive on each of the form inputs to capture those values in the controller. Also, when the form is submitted, the <code>ng-submit</code> directive handles the event by firing the <code>onLogin()</code> function.</p>
+
+<p>Now, let&rsquo;s update the 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>
+<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='javascript'><span class='line'><span class="kd">function</span> <span class="nx">authLoginController</span><span class="p">(</span><span class="nx">authService</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>  <span class="cm">/*jshint validthis: true */</span>
+</span><span class='line'>  <span class="kr">const</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
+</span><span class='line'>  <span class="nx">vm</span><span class="p">.</span><span class="nx">user</span> <span class="o">=</span> <span class="p">{};</span>
+</span><span class='line'>  <span class="nx">vm</span><span class="p">.</span><span class="nx">onLogin</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">authService</span><span class="p">.</span><span class="nx">login</span><span class="p">(</span><span class="nx">vm</span><span class="p">.</span><span class="nx">user</span><span class="p">)</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">user</span><span class="p">)</span> <span class="o">=&gt;</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">user</span><span class="p">.</span><span class="nx">data</span><span class="p">);</span>
+</span><span class='line'>    <span class="p">})</span>
+</span><span class='line'>    <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="o">=&gt;</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">err</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>
+
+
+<p>So, when the form is submitted, we capture the username and password and pass them to the <code>login()</code> method on the service.</p>
+
+<p>Test this out.</p>
+
+<h2>Auth Register</h2>
+
+<p>Just like the login, we need to add a view and controller for registering a user. Start by adding the view, <em>auth.register.view.html</em>, to the &ldquo;auth&rdquo; 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>
+<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='html'><span class='line'><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;row&quot;</span><span class="nt">&gt;</span>
+</span><span class='line'>  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;col-md-4&quot;</span><span class="nt">&gt;</span>
+</span><span class='line'>    <span class="nt">&lt;h1&gt;</span>Register<span class="nt">&lt;/h1&gt;</span>
+</span><span class='line'>    <span class="nt">&lt;hr&gt;&lt;br&gt;</span>
+</span><span class='line'>    <span class="nt">&lt;form</span> <span class="na">ng-submit=</span><span class="s">&quot;authRegisterCtrl.onRegister()&quot;</span> <span class="na">novalidate</span><span class="nt">&gt;</span>
+</span><span class='line'>     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;form-group&quot;</span><span class="nt">&gt;</span>
+</span><span class='line'>       <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">&quot;username&quot;</span><span class="nt">&gt;</span>Username<span class="nt">&lt;/label&gt;</span>
+</span><span class='line'>       <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">class=</span><span class="s">&quot;form-control&quot;</span> <span class="na">id=</span><span class="s">&quot;username&quot;</span> <span class="na">placeholder=</span><span class="s">&quot;enter username&quot;</span> <span class="na">ng-model=</span><span class="s">&quot;authRegisterCtrl.user.username&quot;</span> <span class="na">required</span><span class="nt">&gt;</span>
+</span><span class='line'>     <span class="nt">&lt;/div&gt;</span>
+</span><span class='line'>     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;form-group&quot;</span><span class="nt">&gt;</span>
+</span><span class='line'>       <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">&quot;passwowrd&quot;</span><span class="nt">&gt;</span>Password<span class="nt">&lt;/label&gt;</span>
+</span><span class='line'>       <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;password&quot;</span> <span class="na">class=</span><span class="s">&quot;form-control&quot;</span> <span class="na">id=</span><span class="s">&quot;passwowrd&quot;</span> <span class="na">placeholder=</span><span class="s">&quot;enter password&quot;</span> <span class="na">ng-model=</span><span class="s">&quot;authRegisterCtrl.user.password&quot;</span> <span class="na">required</span><span class="nt">&gt;</span>
+</span><span class='line'>     <span class="nt">&lt;/div&gt;</span>
+</span><span class='line'>     <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">&quot;submit&quot;</span> <span class="na">class=</span><span class="s">&quot;btn btn-default&quot;</span><span class="nt">&gt;</span>Submit<span class="nt">&lt;/button&gt;</span>
+</span><span class='line'>    <span class="nt">&lt;/form&gt;</span>
+</span><span class='line'>  <span class="nt">&lt;/div&gt;</span>
+</span><span class='line'><span class="nt">&lt;/div&gt;</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Add a new controller to <em>auth.controller.js</em>:</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='javascript'><span class='line'><span class="kd">function</span> <span class="nx">authRegisterController</span><span class="p">(</span><span class="nx">authService</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>  <span class="cm">/*jshint validthis: true */</span>
+</span><span class='line'>  <span class="kr">const</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
+</span><span class='line'>  <span class="nx">vm</span><span class="p">.</span><span class="nx">user</span> <span class="o">=</span> <span class="p">{};</span>
+</span><span class='line'>  <span class="nx">vm</span><span class="p">.</span><span class="nx">onRegister</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">authService</span><span class="p">.</span><span class="nx">register</span><span class="p">(</span><span class="nx">vm</span><span class="p">.</span><span class="nx">user</span><span class="p">)</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">user</span><span class="p">)</span> <span class="o">=&gt;</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">user</span><span class="p">.</span><span class="nx">data</span><span class="p">);</span>
+</span><span class='line'>    <span class="p">})</span>
+</span><span class='line'>    <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="o">=&gt;</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">err</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>
+
+
+<p>Don&rsquo;t forget:</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='javascript'><span class='line'><span class="nx">angular</span>
+</span><span class='line'>  <span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;tokenAuthApp.components.auth&#39;</span><span class="p">,</span> <span class="p">[])</span>
+</span><span class='line'>  <span class="p">.</span><span class="nx">controller</span><span class="p">(</span><span class="s1">&#39;authLoginController&#39;</span><span class="p">,</span> <span class="nx">authLoginController</span><span class="p">)</span>
+</span><span class='line'>  <span class="p">.</span><span class="nx">controller</span><span class="p">(</span><span class="s1">&#39;authRegisterController&#39;</span><span class="p">,</span> <span class="nx">authRegisterController</span><span class="p">);</span>
+</span><span class='line'>
+</span><span class='line'><span class="nx">authLoginController</span><span class="p">.</span><span class="nx">$inject</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;authService&#39;</span><span class="p">];</span>
+</span><span class='line'><span class="nx">authRegisterController</span><span class="p">.</span><span class="nx">$inject</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;authService&#39;</span><span class="p">];</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Add a new route handler to the <em>config.js</em> 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>
+<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>
+</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">function</span> <span class="nx">appConfig</span><span class="p">(</span><span class="nx">$routeProvider</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>  <span class="nx">$routeProvider</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">when</span><span class="p">(</span><span class="s1">&#39;/&#39;</span><span class="p">,</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">templateUrl</span><span class="o">:</span> <span class="s1">&#39;js/components/main/main.view.html&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controller</span><span class="o">:</span> <span class="s1">&#39;mainController&#39;</span>
+</span><span class='line'>    <span class="p">})</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">when</span><span class="p">(</span><span class="s1">&#39;/login&#39;</span><span class="p">,</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">templateUrl</span><span class="o">:</span> <span class="s1">&#39;js/components/auth/auth.login.view.html&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controller</span><span class="o">:</span> <span class="s1">&#39;authLoginController&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controllerAs</span><span class="o">:</span> <span class="s1">&#39;authLoginCtrl&#39;</span>
+</span><span class='line'>    <span class="p">})</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">when</span><span class="p">(</span><span class="s1">&#39;/register&#39;</span><span class="p">,</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">templateUrl</span><span class="o">:</span> <span class="s1">&#39;js/components/auth/auth.register.view.html&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controller</span><span class="o">:</span> <span class="s1">&#39;authRegisterController&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controllerAs</span><span class="o">:</span> <span class="s1">&#39;authRegisterCtrl&#39;</span>
+</span><span class='line'>    <span class="p">})</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">otherwise</span><span class="p">({</span>
+</span><span class='line'>      <span class="nx">redirectTo</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="p">}</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Test it out by registering a new user!</p>
+
+<h2>LocalStorage</h2>
+
+<p>Next, let&rsquo;s add the token to localStorage for persistence by replacing the <code>console.log(user.data);</code> with <code>localStorage.setItem('token', user.data.token);</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>
+</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">function</span> <span class="nx">authLoginController</span><span class="p">(</span><span class="nx">authService</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>  <span class="cm">/*jshint validthis: true */</span>
+</span><span class='line'>  <span class="kr">const</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
+</span><span class='line'>  <span class="nx">vm</span><span class="p">.</span><span class="nx">user</span> <span class="o">=</span> <span class="p">{};</span>
+</span><span class='line'>  <span class="nx">vm</span><span class="p">.</span><span class="nx">onLogin</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">authService</span><span class="p">.</span><span class="nx">login</span><span class="p">(</span><span class="nx">vm</span><span class="p">.</span><span class="nx">user</span><span class="p">)</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">user</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="s1">&#39;token&#39;</span><span class="p">,</span> <span class="nx">user</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">token</span><span class="p">);</span>
+</span><span class='line'>    <span class="p">})</span>
+</span><span class='line'>    <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="o">=&gt;</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">err</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="kd">function</span> <span class="nx">authRegisterController</span><span class="p">(</span><span class="nx">authService</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>  <span class="cm">/*jshint validthis: true */</span>
+</span><span class='line'>  <span class="kr">const</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
+</span><span class='line'>  <span class="nx">vm</span><span class="p">.</span><span class="nx">user</span> <span class="o">=</span> <span class="p">{};</span>
+</span><span class='line'>  <span class="nx">vm</span><span class="p">.</span><span class="nx">onRegister</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">authService</span><span class="p">.</span><span class="nx">register</span><span class="p">(</span><span class="nx">vm</span><span class="p">.</span><span class="nx">user</span><span class="p">)</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">user</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="s1">&#39;token&#39;</span><span class="p">,</span> <span class="nx">user</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">token</span><span class="p">);</span>
+</span><span class='line'>    <span class="p">})</span>
+</span><span class='line'>    <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="o">=&gt;</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">err</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>
+
+
+<p>As long as that token is present, the user can be considered logged in. And, when a user needs to make an AJAX request, that token can be used.</p>
+
+<blockquote><p><strong>NOTE</strong>: Besides the token, you could also add the user id and username. You would just need to update the server-side to send back that info.</p></blockquote>
+
+<p>Test this out. Ensure that the token is present in localStorage.</p>
+
+<h2>User Status</h2>
+
+<p>To test out login persistence, we can add a new view that verifies that the user is logged in and that the token is valid.</p>
+
+<p>Add the following method to <code>authService()</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>
+</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="k">this</span><span class="p">.</span><span class="nx">ensureAuthenticated</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">token</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>  <span class="k">return</span> <span class="nx">$http</span><span class="p">({</span>
+</span><span class='line'>    <span class="nx">method</span><span class="o">:</span> <span class="s1">&#39;GET&#39;</span><span class="p">,</span>
+</span><span class='line'>    <span class="nx">url</span><span class="o">:</span> <span class="nx">baseURL</span> <span class="o">+</span> <span class="s1">&#39;user&#39;</span><span class="p">,</span>
+</span><span class='line'>    <span class="nx">headers</span><span class="o">:</span> <span class="p">{</span>
+</span><span class='line'>      <span class="s1">&#39;Content-Type&#39;</span><span class="o">:</span> <span class="s1">&#39;application/json&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">Authorization</span><span class="o">:</span> <span class="s1">&#39;Bearer &#39;</span> <span class="o">+</span> <span class="nx">token</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>Take note of <code>Authorization: 'Bearer ' + token</code>. This is called a <a href="http://security.stackexchange.com/questions/108662/why-is-bearer-required-before-the-token-in-authorization-header-in-a-http-re">Bearer schema</a>, which is sent along with the request. On the server, we are simply checking for the <code>Authorization</code> header, and then whether the token is valid. Can you find this code on the server-side?</p>
+
+<p>Then add a new file called <em>auth.status.view.html</em> to the &ldquo;auth&rdquo; 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>
+</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;row&quot;</span><span class="nt">&gt;</span>
+</span><span class='line'>  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;col-md-4&quot;</span><span class="nt">&gt;</span>
+</span><span class='line'>    <span class="nt">&lt;h1&gt;</span>User Status<span class="nt">&lt;/h1&gt;</span>
+</span><span class='line'>    <span class="nt">&lt;hr&gt;&lt;br&gt;</span>
+</span><span class='line'>    <span class="nt">&lt;p&gt;</span>Logged In? {{ authStatusCtrl.isLoggedIn }}<span class="nt">&lt;/p&gt;</span>
+</span><span class='line'>  <span class="nt">&lt;/div&gt;</span>
+</span><span class='line'><span class="nt">&lt;/div&gt;</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Add a new 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>
+<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='javascript'><span class='line'><span class="kd">function</span> <span class="nx">authStatusController</span><span class="p">(</span><span class="nx">authService</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>  <span class="cm">/*jshint validthis: true */</span>
+</span><span class='line'>  <span class="kr">const</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
+</span><span class='line'>  <span class="nx">vm</span><span class="p">.</span><span class="nx">isLoggedIn</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
+</span><span class='line'>  <span class="kr">const</span> <span class="nx">token</span> <span class="o">=</span> <span class="nx">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="s1">&#39;token&#39;</span><span class="p">);</span>
+</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">token</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>    <span class="nx">authService</span><span class="p">.</span><span class="nx">ensureAuthenticated</span><span class="p">(</span><span class="nx">token</span><span class="p">)</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">user</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span>
+</span><span class='line'>      <span class="k">if</span> <span class="p">(</span><span class="nx">user</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">status</span> <span class="o">===</span> <span class="s1">&#39;success&#39;</span><span class="p">);</span>
+</span><span class='line'>      <span class="nx">vm</span><span class="p">.</span><span class="nx">isLoggedIn</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
+</span><span class='line'>    <span class="p">})</span>
+</span><span class='line'>    <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="o">=&gt;</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">err</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>
+
+
+<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>
+</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">angular</span>
+</span><span class='line'>  <span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;tokenAuthApp.components.auth&#39;</span><span class="p">,</span> <span class="p">[])</span>
+</span><span class='line'>  <span class="p">.</span><span class="nx">controller</span><span class="p">(</span><span class="s1">&#39;authLoginController&#39;</span><span class="p">,</span> <span class="nx">authLoginController</span><span class="p">)</span>
+</span><span class='line'>  <span class="p">.</span><span class="nx">controller</span><span class="p">(</span><span class="s1">&#39;authRegisterController&#39;</span><span class="p">,</span> <span class="nx">authRegisterController</span><span class="p">)</span>
+</span><span class='line'>  <span class="p">.</span><span class="nx">controller</span><span class="p">(</span><span class="s1">&#39;authStatusController&#39;</span><span class="p">,</span> <span class="nx">authStatusController</span><span class="p">);</span>
+</span><span class='line'>
+</span><span class='line'><span class="nx">authLoginController</span><span class="p">.</span><span class="nx">$inject</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;authService&#39;</span><span class="p">];</span>
+</span><span class='line'><span class="nx">authRegisterController</span><span class="p">.</span><span class="nx">$inject</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;authService&#39;</span><span class="p">];</span>
+</span><span class='line'><span class="nx">authStatusController</span><span class="p">.</span><span class="nx">$inject</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;authService&#39;</span><span class="p">];</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Finally, update <em>config.js</em>:</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='javascript'><span class='line'><span class="kd">function</span> <span class="nx">appConfig</span><span class="p">(</span><span class="nx">$routeProvider</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>  <span class="nx">$routeProvider</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">when</span><span class="p">(</span><span class="s1">&#39;/&#39;</span><span class="p">,</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">templateUrl</span><span class="o">:</span> <span class="s1">&#39;js/components/main/main.view.html&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controller</span><span class="o">:</span> <span class="s1">&#39;mainController&#39;</span>
+</span><span class='line'>    <span class="p">})</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">when</span><span class="p">(</span><span class="s1">&#39;/login&#39;</span><span class="p">,</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">templateUrl</span><span class="o">:</span> <span class="s1">&#39;js/components/auth/auth.login.view.html&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controller</span><span class="o">:</span> <span class="s1">&#39;authLoginController&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controllerAs</span><span class="o">:</span> <span class="s1">&#39;authLoginCtrl&#39;</span>
+</span><span class='line'>    <span class="p">})</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">when</span><span class="p">(</span><span class="s1">&#39;/register&#39;</span><span class="p">,</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">templateUrl</span><span class="o">:</span> <span class="s1">&#39;js/components/auth/auth.register.view.html&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controller</span><span class="o">:</span> <span class="s1">&#39;authRegisterController&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controllerAs</span><span class="o">:</span> <span class="s1">&#39;authRegisterCtrl&#39;</span>
+</span><span class='line'>    <span class="p">})</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">when</span><span class="p">(</span><span class="s1">&#39;/status&#39;</span><span class="p">,</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">templateUrl</span><span class="o">:</span> <span class="s1">&#39;js/components/auth/auth.status.view.html&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controller</span><span class="o">:</span> <span class="s1">&#39;authStatusController&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controllerAs</span><span class="o">:</span> <span class="s1">&#39;authStatusCtrl&#39;</span>
+</span><span class='line'>    <span class="p">})</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">otherwise</span><span class="p">({</span>
+</span><span class='line'>      <span class="nx">redirectTo</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="p">}</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Test this out at <a href="http://localhost:8888/#!/status:">http://localhost:8888/#!/status:</a></p>
+
+<ul>
+<li>If there is a token in localStorage, you should see - <code>Logged In? true</code></li>
+<li>Otherwise, you should see <code>Logged In? false</code></li>
+</ul>
+
+
+<p>Finally, let&rsquo;s redirect to the status page after a user successfully registers or logs in. Update the controllers like so:</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>
+</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">authLoginController</span><span class="p">.</span><span class="nx">$inject</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;$location&#39;</span><span class="p">,</span> <span class="s1">&#39;authService&#39;</span><span class="p">];</span>
+</span><span class='line'><span class="nx">authRegisterController</span><span class="p">.</span><span class="nx">$inject</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;$location&#39;</span><span class="p">,</span> <span class="s1">&#39;authService&#39;</span><span class="p">];</span>
+</span><span class='line'><span class="nx">authStatusController</span><span class="p">.</span><span class="nx">$inject</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;authService&#39;</span><span class="p">];</span>
+</span><span class='line'>
+</span><span class='line'><span class="kd">function</span> <span class="nx">authLoginController</span><span class="p">(</span><span class="nx">$location</span><span class="p">,</span> <span class="nx">authService</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>  <span class="cm">/*jshint validthis: true */</span>
+</span><span class='line'>  <span class="kr">const</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
+</span><span class='line'>  <span class="nx">vm</span><span class="p">.</span><span class="nx">user</span> <span class="o">=</span> <span class="p">{};</span>
+</span><span class='line'>  <span class="nx">vm</span><span class="p">.</span><span class="nx">onLogin</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">authService</span><span class="p">.</span><span class="nx">login</span><span class="p">(</span><span class="nx">vm</span><span class="p">.</span><span class="nx">user</span><span class="p">)</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">user</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="s1">&#39;token&#39;</span><span class="p">,</span> <span class="nx">user</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">token</span><span class="p">);</span>
+</span><span class='line'>      <span class="nx">$location</span><span class="p">.</span><span class="nx">path</span><span class="p">(</span><span class="s1">&#39;/status&#39;</span><span class="p">);</span>
+</span><span class='line'>    <span class="p">})</span>
+</span><span class='line'>    <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="o">=&gt;</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">err</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="kd">function</span> <span class="nx">authRegisterController</span><span class="p">(</span><span class="nx">$location</span><span class="p">,</span> <span class="nx">authService</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>  <span class="cm">/*jshint validthis: true */</span>
+</span><span class='line'>  <span class="kr">const</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
+</span><span class='line'>  <span class="nx">vm</span><span class="p">.</span><span class="nx">user</span> <span class="o">=</span> <span class="p">{};</span>
+</span><span class='line'>  <span class="nx">vm</span><span class="p">.</span><span class="nx">onRegister</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">authService</span><span class="p">.</span><span class="nx">register</span><span class="p">(</span><span class="nx">vm</span><span class="p">.</span><span class="nx">user</span><span class="p">)</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">user</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="s1">&#39;token&#39;</span><span class="p">,</span> <span class="nx">user</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">token</span><span class="p">);</span>
+</span><span class='line'>      <span class="nx">$location</span><span class="p">.</span><span class="nx">path</span><span class="p">(</span><span class="s1">&#39;/status&#39;</span><span class="p">);</span>
+</span><span class='line'>    <span class="p">})</span>
+</span><span class='line'>    <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="o">=&gt;</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">err</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>
+
+
+<p>Test it out!</p>
+
+<h2>Route Restriction</h2>
+
+<p>Right now, all routes are open; so, regardless of whether a user is logged in or not they, they can access each route. Certain routes should be restricted if a user is not logged in, while other routes should be restricted if a user is logged in:</p>
+
+<ol>
+<li><code>/</code> - no restrictions</li>
+<li><code>/login</code> - restricted when logged in</li>
+<li><code>/register</code> - restricted when logged in</li>
+<li><code>status</code> - restricted when not logged in</li>
+</ol>
+
+
+<p>To achieve this, add the following property to each route, replacing <code>false</code> with <code>true</code> for routes that you want to restrict:</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='javascript'><span class='line'><span class="nx">restrictions</span><span class="o">:</span> <span class="p">{</span>
+</span><span class='line'>  <span class="nx">ensureAuthenticated</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
+</span><span class='line'>  <span class="nx">loginRedirect</span><span class="o">:</span> <span class="kc">false</span>
+</span><span class='line'><span class="p">}</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>For example:</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='javascript'><span class='line'><span class="kd">function</span> <span class="nx">appConfig</span><span class="p">(</span><span class="nx">$routeProvider</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>  <span class="nx">$routeProvider</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">when</span><span class="p">(</span><span class="s1">&#39;/&#39;</span><span class="p">,</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">templateUrl</span><span class="o">:</span> <span class="s1">&#39;js/components/main/main.view.html&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controller</span><span class="o">:</span> <span class="s1">&#39;mainController&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">restrictions</span><span class="o">:</span> <span class="p">{</span>
+</span><span class='line'>        <span class="nx">ensureAuthenticated</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
+</span><span class='line'>        <span class="nx">loginRedirect</span><span class="o">:</span> <span class="kc">false</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="nx">when</span><span class="p">(</span><span class="s1">&#39;/login&#39;</span><span class="p">,</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">templateUrl</span><span class="o">:</span> <span class="s1">&#39;js/components/auth/auth.login.view.html&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controller</span><span class="o">:</span> <span class="s1">&#39;authLoginController&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controllerAs</span><span class="o">:</span> <span class="s1">&#39;authLoginCtrl&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">restrictions</span><span class="o">:</span> <span class="p">{</span>
+</span><span class='line'>        <span class="nx">ensureAuthenticated</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
+</span><span class='line'>        <span class="nx">loginRedirect</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 class="nx">when</span><span class="p">(</span><span class="s1">&#39;/register&#39;</span><span class="p">,</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">templateUrl</span><span class="o">:</span> <span class="s1">&#39;js/components/auth/auth.register.view.html&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controller</span><span class="o">:</span> <span class="s1">&#39;authRegisterController&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controllerAs</span><span class="o">:</span> <span class="s1">&#39;authRegisterCtrl&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">restrictions</span><span class="o">:</span> <span class="p">{</span>
+</span><span class='line'>        <span class="nx">ensureAuthenticated</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
+</span><span class='line'>        <span class="nx">loginRedirect</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 class="nx">when</span><span class="p">(</span><span class="s1">&#39;/status&#39;</span><span class="p">,</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">templateUrl</span><span class="o">:</span> <span class="s1">&#39;js/components/auth/auth.status.view.html&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controller</span><span class="o">:</span> <span class="s1">&#39;authStatusController&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controllerAs</span><span class="o">:</span> <span class="s1">&#39;authStatusCtrl&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">restrictions</span><span class="o">:</span> <span class="p">{</span>
+</span><span class='line'>        <span class="nx">ensureAuthenticated</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
+</span><span class='line'>        <span class="nx">loginRedirect</span><span class="o">:</span> <span class="kc">false</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="nx">otherwise</span><span class="p">({</span>
+</span><span class='line'>      <span class="nx">redirectTo</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="p">}</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Next, add the following function below the route handlers in <em>config.js</em>:</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='javascript'><span class='line'><span class="kd">function</span> <span class="nx">routeStart</span><span class="p">(</span><span class="nx">$rootScope</span><span class="p">,</span> <span class="nx">$location</span><span class="p">,</span> <span class="nx">$route</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">$on</span><span class="p">(</span><span class="s1">&#39;$routeChangeStart&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="nx">next</span><span class="p">,</span> <span class="nx">current</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span>
+</span><span class='line'>    <span class="k">if</span> <span class="p">(</span><span class="nx">next</span><span class="p">.</span><span class="nx">restrictions</span><span class="p">.</span><span class="nx">ensureAuthenticated</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">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="s1">&#39;token&#39;</span><span class="p">))</span> <span class="p">{</span>
+</span><span class='line'>        <span class="nx">$location</span><span class="p">.</span><span class="nx">path</span><span class="p">(</span><span class="s1">&#39;/login&#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 class="k">if</span> <span class="p">(</span><span class="nx">next</span><span class="p">.</span><span class="nx">restrictions</span><span class="p">.</span><span class="nx">loginRedirect</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">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="s1">&#39;token&#39;</span><span class="p">))</span> <span class="p">{</span>
+</span><span class='line'>        <span class="nx">$location</span><span class="p">.</span><span class="nx">path</span><span class="p">(</span><span class="s1">&#39;/status&#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 class="p">});</span>
+</span><span class='line'><span class="p">}</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>The <code>$routeChangeStart</code> event fires before the actual route change occurs. So, whenever a route is accessed, we check the <code>restrictions</code> property:</p>
+
+<ol>
+<li>If <code>ensureAuthenticated</code> is true and there is no token present, then we redirect them to the login page</li>
+<li>If <code>loginRedirect</code> is true and there&rsquo;s a token present, then we redirect them to the status page</li>
+</ol>
+
+
+<p>Simple, right?</p>
+
+<p>Update:</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='javascript'><span class='line'><span class="nx">angular</span>
+</span><span class='line'>  <span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;tokenAuthApp.config&#39;</span><span class="p">,</span> <span class="p">[])</span>
+</span><span class='line'>  <span class="p">.</span><span class="nx">config</span><span class="p">(</span><span class="nx">appConfig</span><span class="p">)</span>
+</span><span class='line'>  <span class="p">.</span><span class="nx">run</span><span class="p">(</span><span class="nx">routeStart</span><span class="p">);</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Then test one last time.</p>
+
+<h2>What&rsquo;s Next?</h2>
+
+<p>You&rsquo;ve reached the end. Now what?</p>
+
+<ol>
+<li>You should handle those errors in each <code>.catch</code>.</li>
+<li>Check out <a href="https://github.com/sahat/satellizer">Satellizer</a>. It&rsquo;s a nice token-based auth module for Angular. You can find sample code in the following repos - <a href="https://github.com/mjhea0/mean-token-auth">mean-token-auth</a> and <a href="https://github.com/mjhea0/mean-social-token-auth">mean-social-token-auth</a>.</li>
+<li>Try using this app with a different back-end. Since this app is just the client, you can literally use any language/framework to write a RESTful API in.</li>
+</ol>
+
+
+<p>Grab the final code from the <a href="https://github.com/mjhea0/angular-token-auth">angular-token-auth</a> repo. Comment below. Cheers!</p>
+]]></content>
+  </entry>
+  
   <entry>
     <title type="html"><![CDATA[Building a RESTful API With Node, Flow, and Jest]]></title>
     <link href="http://mherman.org/blog/2016/12/23/building-a-restful-api-with-node-and-flow/"/>
@@ -4002,6 +5234,8 @@
 
 <p>Feel free to share your comments, questions, or tips in the comments below. The full code can be found in the <a href="https://github.com/mjhea0/node-token-auth">node-token-auth</a> repository. Cheers!</p>
 
+<blockquote><p>Check out the <a href="https://news.ycombinator.com/item?id=13301105">HN Discussion</a> as well!</p></blockquote>
+
 <p>Did you enjoy this post? Please share. Sharing is caring.</p>
 ]]></content>
   </entry>
@@ -14635,7 +15869,7 @@ for our unit tests. Such data is often called a <a href="https://en.wikipedia.or
 </span></code></pre></td></tr></table></div></figure>
 
 
-<p>Navigate to <a href="http://localhost:3000/">http://localhost:3000/</a> and you should see a simple welcome message - &ldquo;Yo!&rdquo;. Once you&rsquo;re finishing admiring the page, kill the server, and glance over the code within the project folder:</p>
+<p>Navigate to <a href="http://localhost:3000/">http://localhost:3000/</a> and you should see a simple welcome message - &ldquo;Yo!&rdquo;. Once you&rsquo;re finished admiring the page, kill the server, and glance over the code within the project 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>
@@ -19185,310 +20419,6 @@ for our unit tests. Such data is often called a <a href="https://en.wikipedia.or
 
 
 <p>What else? Comment below.</p>
-]]></content>
-  </entry>
-  
-  <entry>
-    <title type="html"><![CDATA[Sublime Text for Web Developers]]></title>
-    <link href="http://mherman.org/blog/2015/02/05/sublime-text-for-web-developers/"/>
-    <updated>2015-02-05T19:07:00-07:00</updated>
-    <id>http://mherman.org/blog/2015/02/05/sublime-text-for-web-developers</id>
-    <content type="html"><![CDATA[<p><a href="http://www.sublimetext.com/3">Sublime Text 3</a> (ST3) is a powerful editor just as it is. But if you want to step up your game, you need to take advantage of all that ST3 has to offer by learning the keyboard shortcuts and customizing the editor to meet your individual needs&hellip;</p>
-
-<blockquote><p><strong>NOTE</strong>: This tutorial is meant for Mac OS X users, utilizing HTML, CSS, and JavaScript/jQuery.</p></blockquote>
-
-<p>Be sure to <a href="https://realpython.com/blog/python/setting-up-sublime-text-3-for-full-stack-python-development/#customizing-sublime-text-3">set up</a> the <code>subl</code> command line tool, which can be used to open a single file or an entire project directory of files and folders, before moving on.</p>
-
-<h2>Keyboard Shortcuts</h2>
-
-<p>Goal: Never take your hands off the keyboard!</p>
-
-<ol>
-<li><p><strong>Command Palette</strong> (<em>CMD-SHIFT-P</em>) - Accesses the all-powerful <em><a href="http://sublime-text-unofficial-documentation.readthedocs.org/en/latest/reference/command_palette.html">Command Palette</a></em>, where you can run toolbar actions - setting the code syntax, accessing package control, renaming a file, etc..</p>
-
-<p> <img src="https://raw.githubusercontent.com/mjhea0/sublime-javascript/master/img/command_palette.png" alt="Command Palette" /></p></li>
-<li><p><strong>Goto Anything</strong> (<em>CMD-P</em>) - Searches for a file within the current project or a line or definition in the current file. It&rsquo;s fuzzy so you don&rsquo;t need to match the name exactly.</p>
-
-<ul>
-<li><code>@</code> - Definition - class, method, function</li>
-<li><code>:</code> - Line #</li>
-</ul>
-</li>
-<li><p><strong>Distraction Free Mode</strong> (<em>CMD-CTRL-SHIFT-F</em>) - Eliminates distractions!</p>
-
-<p> <img src="https://raw.githubusercontent.com/mjhea0/sublime-javascript/master/img/distraction_free.png" alt="Command Palette" /></p></li>
-<li><p><strong>Hide/Show the Sidebar</strong> (<em>CMD-K</em>, <em>CMD-B</em>) - Toggles the sidebar.</p></li>
-<li><strong>Comment Your Code</strong> (<em>CMD-/</em>) - Highlight the code you want to comment out, then comment it out. If you do not highlight anything, this command will comment out the current line.</li>
-<li><strong>Highlight an entire line</strong> (<em>CMD-L</em>)</li>
-<li><strong>Delete an entire line</strong> (<em>CMD-SHIFT-K</em>)</li>
-<li><strong>Multi-Edit</strong> (<em>CMD+D</em>) - Simply select the word you want to edit, and press <em>CMD-D</em> repeatedly until you have selected all the words you want to change/update/etc..</li>
-</ol>
-
-
-<p>Grab the cheat sheet in <a href="https://github.com/mjhea0/sublime-javascript/raw/master/sublime_text_keyboard_shortcuts.pdf">PDF</a>.</p>
-
-<h2>Configuration</h2>
-
-<p>You can customize <em>almost</em> anything in ST3 by updating the config settings.</p>
-
-<p>Config settings can be set at the global/default-level or by user, project, package, and/or syntax. Setting files are <a href="http://www.sublimetext.com/docs/3/settings.html">loaded</a> in the following order:</p>
-
-<ul>
-<li><code>Packages/Default/Preferences.sublime-settings</code></li>
-<li><code>Packages/User/Preferences.sublime-settings</code></li>
-<li><code>Packages/&lt;syntax&gt;/&lt;syntax&gt;.sublime-settings</code></li>
-<li><code>Packages/User/&lt;syntax&gt;.sublime-settings</code></li>
-</ul>
-
-
-<p><strong>Always apply your custom configuration settings to at the <em>User</em> level, since they will not get overridden when you update Sublime and/or a specific package.</strong></p>
-
-<ol>
-<li><strong>Base User Settings</strong>: <em>Sublime Text 3 > Preferences > Settings - User</em></li>
-<li><strong>Package User Specific</strong>: <em>Sublime Text 3 > Preferences > Package Settings > PACKAGE NAME > Settings - User</em></li>
-<li><strong>Syntax User Settings</strong>: <em>Sublime Text 3 > Preferences > Settings - More > Syntax Specific - User</em></li>
-</ol>
-
-
-<h3>Base User Settings</h3>
-
-<p>Don&rsquo;t know where to start?</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='json'><span class='line'><span class="p">{</span>
-</span><span class='line'>  <span class="nt">&quot;draw_white_space&quot;</span><span class="p">:</span> <span class="s2">&quot;all&quot;</span><span class="p">,</span>
-</span><span class='line'>  <span class="nt">&quot;rulers&quot;</span><span class="p">:</span> <span class="p">[</span><span class="mi">80</span><span class="p">],</span>
-</span><span class='line'>  <span class="nt">&quot;tab_size&quot;</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span>
-</span><span class='line'>  <span class="nt">&quot;translate_tabs_to_spaces&quot;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
-</span><span class='line'>  <span class="nt">&quot;trim_trailing_white_space_on_save&quot;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
-</span><span class='line'>  <span class="nt">&quot;word_wrap&quot;</span><span class="p">:</span> <span class="kc">true</span>
-</span><span class='line'><span class="p">}</span>
-</span></code></pre></td></tr></table></div></figure>
-
-
-<p>Add this to <em>Sublime Text 3 > Preferences > Settings - User</em>.</p>
-
-<p><strong>What&rsquo;s happening?</strong></p>
-
-<ol>
-<li>We convert tabs to two spaces. Now when you press tab, it actually indents two spaces. This is perfect for HTML, CSS, and JavaScript. This creates cleaner, easier to read code.</li>
-<li>The ruler is a simple reminder to keep your code concise (for readability).</li>
-<li>We added white space markers and trimmed any trailing (err, unnecessary) white space on save.</li>
-<li>Finally, word wrapping is automatically applied</li>
-</ol>
-
-
-<p>What else can you update? Start with the <strong>theme</strong>.</p>
-
-<p>For example -</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='javascript'><span class='line'><span class="s2">&quot;color_scheme&quot;</span><span class="o">:</span> <span class="s2">&quot;Packages/User/Flatland Dark (SL).tmTheme&quot;</span><span class="p">,</span>
-</span></code></pre></td></tr></table></div></figure>
-
-
-<p>Simply add this to that same file.</p>
-
-<p>You can find and test themes online before applying them <a href="http://colorsublime.com/">here</a>.</p>
-
-<blockquote><p>Advanced users should look into customizing <a href="http://sublime-text-unofficial-documentation.readthedocs.org/en/latest/reference/key_bindings.html">key bindings</a>, <a href="http://sublime-text-unofficial-documentation.readthedocs.org/en/latest/extensibility/macros.html">macros</a>, and <a href="http://sublime-text-unofficial-documentation.readthedocs.org/en/latest/extensibility/snippets.html">code snippets</a>.</p></blockquote>
-
-<h2>Packages</h2>
-
-<p>Want more features? There&rsquo;s a ton of extensions used to, well, extend ST3&rsquo;s functionality written by the community. <em>&ldquo;There&rsquo;s a package for that&rdquo;.</em></p>
-
-<h3>Package Control</h3>
-
-<p><a href="https://packagecontrol.io/">Package Control</a> <em>must</em> be installed manually, then, once installed, you can use it to install other ST3 packages. To install, copy the Python code for found <a href="https://packagecontrol.io/installation">here</a>. Then open your console (<em>CTRL-`</em>), paste the code, press ENTER. Then Reboot ST3.</p>
-
-<p><img src="https://raw.githubusercontent.com/mjhea0/sublime-javascript/master/img/package_control.png" alt="Command Palette" /></p>
-
-<p>Now you can easily install packages by entering the <em>Command Palette</em> (remember the keyboard shortcut?).</p>
-
-<ol>
-<li>Type &ldquo;install&rdquo;. Press ENTER when <em>Package Control: Install Package</em> is highlighted</li>
-<li>Search for a package. Boom!</li>
-</ol>
-
-
-<p>Let&rsquo;s look at some packages&hellip;</p>
-
-<h3>Sublime Linter</h3>
-
-<p><a href="http://www.sublimelinter.com/en/latest/">SublimeLinter</a> is a framework for Sublime Text linters.</p>
-
-<p>After you install the base package, you need to install linters separately via Package Control, which are easily searchable as they adhere to the following naming syntax - <em>SublimeLinter-[linter_name]</em>. You can view all the official linters <a href="https://github.com/SublimeLinter">here</a>.</p>
-
-<p>Start with the following linters:</p>
-
-<ol>
-<li><a href="https://packagecontrol.io/packages/SublimeLinter-jshint">SublimeLinter-jshint</a></li>
-<li><a href="https://packagecontrol.io/packages/SublimeLinter-csslint">SublimeLinter-csslint</a></li>
-<li><a href="https://packagecontrol.io/packages/SublimeLinter-html-tidy">SublimeLinter-html-tidy</a></li>
-<li><a href="https://packagecontrol.io/packages/SublimeLinter-json">SublimeLinter-json</a></li>
-</ol>
-
-
-<h3>Sidebar Enhancements</h3>
-
-<p><a href="https://sublime.wbond.net/packages/SideBarEnhancements">Sidebar Enhancements</a> extends the number of menu options in the sidebar, adding file explorer actions - i.e., Copy, Cut, Paste, Delete, Rename. This package also adds the same commands/actions to the Command Palette.</p>
-
-<p><img src="https://raw.githubusercontent.com/mjhea0/sublime-javascript/master/img/sidebar_enhancements.png" alt="Command Palette" /></p>
-
-<h3>JsFormat</h3>
-
-<p><a href="https://packagecontrol.io/packages/JsFormat">JsFormat</a> beautifies your JavaScript/jQuery Code!</p>
-
-<p>Press <em>CTRL-ALT-F</em> to turn this mess&hellip;</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='javascript'><span class='line'><span class="kd">function</span> <span class="nx">peopleFromBoulder</span><span class="p">(</span><span class="nx">arr</span><span class="p">)</span> <span class="p">{</span><span class="k">return</span> <span class="nx">arr</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">val</span><span class="p">)</span> <span class="p">{</span><span class="k">return</span> <span class="nx">val</span><span class="p">.</span><span class="nx">city</span> <span class="o">==</span> <span class="s1">&#39;Boulder&#39;</span><span class="p">;})</span>
-</span><span class='line'>    <span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">val</span><span class="p">)</span> <span class="p">{</span><span class="k">return</span> <span class="nx">val</span><span class="p">.</span><span class="nx">name</span> <span class="o">+</span> <span class="s1">&#39; is from Boulder&#39;</span><span class="p">;});}</span>
-</span></code></pre></td></tr></table></div></figure>
-
-
-<p>&hellip;into&hellip;</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='javascript'><span class='line'><span class="kd">function</span> <span class="nx">peopleFromBoulder</span><span class="p">(</span><span class="nx">arr</span><span class="p">)</span> <span class="p">{</span>
-</span><span class='line'>    <span class="k">return</span> <span class="nx">arr</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">val</span><span class="p">)</span> <span class="p">{</span>
-</span><span class='line'>            <span class="k">return</span> <span class="nx">val</span><span class="p">.</span><span class="nx">city</span> <span class="o">==</span> <span class="s1">&#39;Boulder&#39;</span><span class="p">;</span>
-</span><span class='line'>        <span class="p">})</span>
-</span><span class='line'>        <span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">val</span><span class="p">)</span> <span class="p">{</span>
-</span><span class='line'>            <span class="k">return</span> <span class="nx">val</span><span class="p">.</span><span class="nx">name</span> <span class="o">+</span> <span class="s1">&#39; is from Boulder&#39;</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>
-
-
-<h3>DocBlockr</h3>
-
-<p><a href="https://packagecontrol.io/packages/DocBlockr">DocBlockr</a> creates comment blocks based on the context.</p>
-
-<p>Try it!</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='javascript'><span class='line'><span class="kd">function</span> <span class="nx">refactorU</span> <span class="p">(</span><span class="nx">student</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">student</span> <span class="o">===</span> <span class="s2">&quot;Zach&quot;</span><span class="p">)</span> <span class="p">{</span>
-</span><span class='line'>        <span class="kd">var</span> <span class="nx">str</span> <span class="o">=</span> <span class="nx">student</span> <span class="o">+</span> <span class="s2">&quot; is awesome!&quot;</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="kd">var</span> <span class="nx">str</span> <span class="o">=</span> <span class="nx">student</span> <span class="o">+</span> <span class="s2">&quot; is NOT awesome!&quot;</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">str</span><span class="p">;</span>
-</span><span class='line'><span class="p">}</span>
-</span></code></pre></td></tr></table></div></figure>
-
-
-<p>Now add an opening comment block - <code>/**</code> - and as soon as you press tab, it will create a dummy-documentation-comment automatically.</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='javascript'><span class='line'><span class="cm">/**</span>
-</span><span class='line'><span class="cm"> * [refactorU description]</span>
-</span><span class='line'><span class="cm"> * @param  {[type]}</span>
-</span><span class='line'><span class="cm"> * @return {[type]}</span>
-</span><span class='line'><span class="cm"> */</span>
-</span><span class='line'><span class="kd">function</span> <span class="nx">refactorU</span> <span class="p">(</span><span class="nx">student</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">student</span> <span class="o">===</span> <span class="s2">&quot;Zach&quot;</span><span class="p">)</span> <span class="p">{</span>
-</span><span class='line'>        <span class="k">return</span> <span class="nx">student</span> <span class="o">+</span> <span class="s2">&quot; is awesome!&quot;</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">student</span> <span class="o">+</span> <span class="s2">&quot; is NOT awesome!&quot;</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>Yay!</p>
-
-<h3>GitGutter</h3>
-
-<p><a href="https://packagecontrol.io/packages/GitGutter">GitGutter</a> displays icons in the &ldquo;gutter&rdquo; area (next to the line numbers) indicating whether an individual line has been modified since your last commit.</p>
-
-<p><img src="https://raw.githubusercontent.com/mjhea0/sublime-javascript/master/img/gitgutter.png" alt="GitGutter" /></p>
-
-<h3>Emmet</h3>
-
-<p>With <a href="https://packagecontrol.io/packages/Emmet">Emmet</a> you can turn a symbol or code abbreviation into a HTML or CSS code snippet. It&rsquo;s by <em>far</em> the best plugin for increasing your productivity and efficiency as a web developer.</p>
-
-<p>Try this out: Once installed, start a new HTML file, type a bang, <code>!</code>, and then press tab.</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='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">lang=</span><span class="s">&quot;en&quot;</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;meta</span> <span class="na">charset=</span><span class="s">&quot;UTF-8&quot;</span><span class="nt">&gt;</span>
-</span><span class='line'>  <span class="nt">&lt;title&gt;</span>Document<span class="nt">&lt;/title&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><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>Boom!</p>
-
-<p>Check the official <a href="http://docs.emmet.io/abbreviations/">docs</a> to see all the expressions/symbols/abbreviations that can be used for generating snippets.</p>
-
-<h2>Conclusion</h2>
-
-<p><em>Go pimp your editor.</em></p>
-
-<blockquote><p>Want a package? It&rsquo;s just Python. Hire <a href="http://mherman.org">me</a>!</p></blockquote>
-
-<p>Comment below. Check out the <a href="https://github.com/mjhea0/sublime-javascript">repo</a> for my Sublime dotfiles. Cheers!</p>
-
-<h2>Additional Resources</h2>
-
-<ol>
-<li><a href="http://sublimetexttips.com/">Sublime Text Tips Newsletter</a> - awesome tips, tricks</li>
-<li><a href="http://docs.sublimetext.info/en/latest/index.html">Community-maintained documentation</a></li>
-<li><a href="https://packagecontrol.io/docs">Package Manager documentation</a></li>
-<li><a href="http://sublime-text-unofficial-documentation.readthedocs.org/en/latest/reference/reference.html">Unofficial documentation reference</a></li>
-<li><a href="https://realpython.com/blog/python/setting-up-sublime-text-3-for-full-stack-python-development/">Setting Up Sublime Text 3 for Full Stack Python Development</a> - my other ST3 post</li>
-</ol>
-
 ]]></content>
   </entry>
   
diff --git a/blog/2012/09/01/predictive-analytics-top-5-trends-going-forward/index.html b/blog/2012/09/01/predictive-analytics-top-5-trends-going-forward/index.html
index fd82a299..3cb13448 100644
--- a/blog/2012/09/01/predictive-analytics-top-5-trends-going-forward/index.html
+++ b/blog/2012/09/01/predictive-analytics-top-5-trends-going-forward/index.html
@@ -221,7 +221,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2012/09/30/import-data-from-excel-into-mysql-using-python/index.html b/blog/2012/09/30/import-data-from-excel-into-mysql-using-python/index.html
index adc512d2..720611e3 100644
--- a/blog/2012/09/30/import-data-from-excel-into-mysql-using-python/index.html
+++ b/blog/2012/09/30/import-data-from-excel-into-mysql-using-python/index.html
@@ -326,7 +326,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2012/10/05/web-scraping-with-regular-expressions/index.html b/blog/2012/10/05/web-scraping-with-regular-expressions/index.html
index 61ec4ee3..7e3a2e04 100644
--- a/blog/2012/10/05/web-scraping-with-regular-expressions/index.html
+++ b/blog/2012/10/05/web-scraping-with-regular-expressions/index.html
@@ -325,7 +325,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2012/10/06/differentiating-between-bounce-rates/index.html b/blog/2012/10/06/differentiating-between-bounce-rates/index.html
index a027e9be..f4bc09ab 100644
--- a/blog/2012/10/06/differentiating-between-bounce-rates/index.html
+++ b/blog/2012/10/06/differentiating-between-bounce-rates/index.html
@@ -229,7 +229,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2012/10/19/sentiment-analysis-feelings-not-facts/index.html b/blog/2012/10/19/sentiment-analysis-feelings-not-facts/index.html
index 3113d904..b3f62e9c 100644
--- a/blog/2012/10/19/sentiment-analysis-feelings-not-facts/index.html
+++ b/blog/2012/10/19/sentiment-analysis-feelings-not-facts/index.html
@@ -211,7 +211,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2012/11/05/scraping-web-pages-with-scrapy/index.html b/blog/2012/11/05/scraping-web-pages-with-scrapy/index.html
index 98b178e1..12a3f748 100644
--- a/blog/2012/11/05/scraping-web-pages-with-scrapy/index.html
+++ b/blog/2012/11/05/scraping-web-pages-with-scrapy/index.html
@@ -368,7 +368,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2012/11/08/recursively-scraping-web-pages-with-scrapy/index.html b/blog/2012/11/08/recursively-scraping-web-pages-with-scrapy/index.html
index 2da47337..db151ff3 100644
--- a/blog/2012/11/08/recursively-scraping-web-pages-with-scrapy/index.html
+++ b/blog/2012/11/08/recursively-scraping-web-pages-with-scrapy/index.html
@@ -293,7 +293,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2012/11/09/51-new-excel-2013-functions/index.html b/blog/2012/11/09/51-new-excel-2013-functions/index.html
index 95ecbca9..a4099036 100644
--- a/blog/2012/11/09/51-new-excel-2013-functions/index.html
+++ b/blog/2012/11/09/51-new-excel-2013-functions/index.html
@@ -321,7 +321,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2012/11/16/the-benefits-of-performing-a-cohort-analysis-in-determining-engagement-over-time/index.html b/blog/2012/11/16/the-benefits-of-performing-a-cohort-analysis-in-determining-engagement-over-time/index.html
index c5272e3b..6f50945c 100644
--- a/blog/2012/11/16/the-benefits-of-performing-a-cohort-analysis-in-determining-engagement-over-time/index.html
+++ b/blog/2012/11/16/the-benefits-of-performing-a-cohort-analysis-in-determining-engagement-over-time/index.html
@@ -259,7 +259,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2012/11/18/integration-of-content-creation-leads-google-towards-the-slippery-slope-of-monopolies/index.html b/blog/2012/11/18/integration-of-content-creation-leads-google-towards-the-slippery-slope-of-monopolies/index.html
index 03ae23db..f47b43ef 100644
--- a/blog/2012/11/18/integration-of-content-creation-leads-google-towards-the-slippery-slope-of-monopolies/index.html
+++ b/blog/2012/11/18/integration-of-content-creation-leads-google-towards-the-slippery-slope-of-monopolies/index.html
@@ -215,7 +215,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2012/11/27/crash-course-in-web2py-part-1/index.html b/blog/2012/11/27/crash-course-in-web2py-part-1/index.html
index 03550dce..9102ff98 100644
--- a/blog/2012/11/27/crash-course-in-web2py-part-1/index.html
+++ b/blog/2012/11/27/crash-course-in-web2py-part-1/index.html
@@ -253,7 +253,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2012/12/01/crash-course-in-web2py-part-2-web-forms/index.html b/blog/2012/12/01/crash-course-in-web2py-part-2-web-forms/index.html
index 98a4a409..ccdc2bf1 100644
--- a/blog/2012/12/01/crash-course-in-web2py-part-2-web-forms/index.html
+++ b/blog/2012/12/01/crash-course-in-web2py-part-2-web-forms/index.html
@@ -308,7 +308,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2012/12/06/crash-course-in-web2py-part-3-form-validation/index.html b/blog/2012/12/06/crash-course-in-web2py-part-3-form-validation/index.html
index 6fef77b5..a4b3906b 100644
--- a/blog/2012/12/06/crash-course-in-web2py-part-3-form-validation/index.html
+++ b/blog/2012/12/06/crash-course-in-web2py-part-3-form-validation/index.html
@@ -350,7 +350,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2012/12/09/crash-course-in-web2py-part-4-managing-form-records/index.html b/blog/2012/12/09/crash-course-in-web2py-part-4-managing-form-records/index.html
index c8c4ccf1..5acf5aae 100644
--- a/blog/2012/12/09/crash-course-in-web2py-part-4-managing-form-records/index.html
+++ b/blog/2012/12/09/crash-course-in-web2py-part-4-managing-form-records/index.html
@@ -305,7 +305,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2012/12/10/crash-course-in-web2py-part-5-modifying-the-appearance-and-deploying-the-web-form/index.html b/blog/2012/12/10/crash-course-in-web2py-part-5-modifying-the-appearance-and-deploying-the-web-form/index.html
index 5ca6fb7a..11886c93 100644
--- a/blog/2012/12/10/crash-course-in-web2py-part-5-modifying-the-appearance-and-deploying-the-web-form/index.html
+++ b/blog/2012/12/10/crash-course-in-web2py-part-5-modifying-the-appearance-and-deploying-the-web-form/index.html
@@ -362,7 +362,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2012/12/12/excel-tips-how-to-cut-down-on-calculations-using-sumif-and-sumifs/index.html b/blog/2012/12/12/excel-tips-how-to-cut-down-on-calculations-using-sumif-and-sumifs/index.html
index ef95bf3c..62d6b4b8 100644
--- a/blog/2012/12/12/excel-tips-how-to-cut-down-on-calculations-using-sumif-and-sumifs/index.html
+++ b/blog/2012/12/12/excel-tips-how-to-cut-down-on-calculations-using-sumif-and-sumifs/index.html
@@ -278,7 +278,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2012/12/30/django-basics/index.html b/blog/2012/12/30/django-basics/index.html
index 18502f2d..27d5cb06 100644
--- a/blog/2012/12/30/django-basics/index.html
+++ b/blog/2012/12/30/django-basics/index.html
@@ -600,7 +600,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2013/01/09/understand-your-support-system-better-with-sentiment-analysis/index.html b/blog/2013/01/09/understand-your-support-system-better-with-sentiment-analysis/index.html
index bb170260..4c795f54 100644
--- a/blog/2013/01/09/understand-your-support-system-better-with-sentiment-analysis/index.html
+++ b/blog/2013/01/09/understand-your-support-system-better-with-sentiment-analysis/index.html
@@ -214,7 +214,7 @@ <h2>Zapier</h2>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2013/01/10/how-to-build-a-financial-model-for-your-startup/index.html b/blog/2013/01/10/how-to-build-a-financial-model-for-your-startup/index.html
index 48bb6bc0..35facaba 100644
--- a/blog/2013/01/10/how-to-build-a-financial-model-for-your-startup/index.html
+++ b/blog/2013/01/10/how-to-build-a-financial-model-for-your-startup/index.html
@@ -225,7 +225,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2013/01/28/startup-tips-for-forecasting-revenues-and-growth/index.html b/blog/2013/01/28/startup-tips-for-forecasting-revenues-and-growth/index.html
index a3ac334f..c8214fed 100644
--- a/blog/2013/01/28/startup-tips-for-forecasting-revenues-and-growth/index.html
+++ b/blog/2013/01/28/startup-tips-for-forecasting-revenues-and-growth/index.html
@@ -240,7 +240,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2013/04/28/charting-best-practices-proper-data-visualization/index.html b/blog/2013/04/28/charting-best-practices-proper-data-visualization/index.html
index 430b56d5..b1a1a74e 100644
--- a/blog/2013/04/28/charting-best-practices-proper-data-visualization/index.html
+++ b/blog/2013/04/28/charting-best-practices-proper-data-visualization/index.html
@@ -217,7 +217,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2013/05/27/what-am-i-good-at/index.html b/blog/2013/05/27/what-am-i-good-at/index.html
index 5b0e3c5a..d70eac20 100644
--- a/blog/2013/05/27/what-am-i-good-at/index.html
+++ b/blog/2013/05/27/what-am-i-good-at/index.html
@@ -227,7 +227,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2013/06/08/designing-with-class-sinatra-plus-postgresql-plus-heroku/index.html b/blog/2013/06/08/designing-with-class-sinatra-plus-postgresql-plus-heroku/index.html
index dea19b9d..5fe3ee67 100644
--- a/blog/2013/06/08/designing-with-class-sinatra-plus-postgresql-plus-heroku/index.html
+++ b/blog/2013/06/08/designing-with-class-sinatra-plus-postgresql-plus-heroku/index.html
@@ -1360,7 +1360,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2013/06/13/up-and-running-with-espresso-rapid-web-development-in-the-browser/index.html b/blog/2013/06/13/up-and-running-with-espresso-rapid-web-development-in-the-browser/index.html
index 0b90a549..96de8e5f 100644
--- a/blog/2013/06/13/up-and-running-with-espresso-rapid-web-development-in-the-browser/index.html
+++ b/blog/2013/06/13/up-and-running-with-espresso-rapid-web-development-in-the-browser/index.html
@@ -404,7 +404,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2013/06/28/less-is-more/index.html b/blog/2013/06/28/less-is-more/index.html
index c64ccb76..04a9654c 100644
--- a/blog/2013/06/28/less-is-more/index.html
+++ b/blog/2013/06/28/less-is-more/index.html
@@ -211,7 +211,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2013/07/04/removing-a-django-app/index.html b/blog/2013/07/04/removing-a-django-app/index.html
index dfc97780..4dfc643f 100644
--- a/blog/2013/07/04/removing-a-django-app/index.html
+++ b/blog/2013/07/04/removing-a-django-app/index.html
@@ -350,7 +350,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2013/07/19/cohort-analysis-data-sourcing-with-sql/index.html b/blog/2013/07/19/cohort-analysis-data-sourcing-with-sql/index.html
index ab542301..21a112c0 100644
--- a/blog/2013/07/19/cohort-analysis-data-sourcing-with-sql/index.html
+++ b/blog/2013/07/19/cohort-analysis-data-sourcing-with-sql/index.html
@@ -674,7 +674,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2013/08/02/multitasking-vs-batching/index.html b/blog/2013/08/02/multitasking-vs-batching/index.html
index 5c2bcab1..90ec426b 100644
--- a/blog/2013/08/02/multitasking-vs-batching/index.html
+++ b/blog/2013/08/02/multitasking-vs-batching/index.html
@@ -213,7 +213,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2013/08/06/kickstarting-at-the-local-level/index.html b/blog/2013/08/06/kickstarting-at-the-local-level/index.html
index 6cdf4f62..141abb4b 100644
--- a/blog/2013/08/06/kickstarting-at-the-local-level/index.html
+++ b/blog/2013/08/06/kickstarting-at-the-local-level/index.html
@@ -254,7 +254,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2013/08/25/custom-apache-config-for-php-and-web2py/index.html b/blog/2013/08/25/custom-apache-config-for-php-and-web2py/index.html
index f6bb2e5e..b3e4210f 100644
--- a/blog/2013/08/25/custom-apache-config-for-php-and-web2py/index.html
+++ b/blog/2013/08/25/custom-apache-config-for-php-and-web2py/index.html
@@ -287,7 +287,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2013/09/07/whats-the-difference-between-a-pre-order-and-an-mvp/index.html b/blog/2013/09/07/whats-the-difference-between-a-pre-order-and-an-mvp/index.html
index b835c8a8..c9e9bf33 100644
--- a/blog/2013/09/07/whats-the-difference-between-a-pre-order-and-an-mvp/index.html
+++ b/blog/2013/09/07/whats-the-difference-between-a-pre-order-and-an-mvp/index.html
@@ -221,7 +221,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2013/09/16/managing-multiple-github-accounts/index.html b/blog/2013/09/16/managing-multiple-github-accounts/index.html
index 61c2a6a0..8a37b9a3 100644
--- a/blog/2013/09/16/managing-multiple-github-accounts/index.html
+++ b/blog/2013/09/16/managing-multiple-github-accounts/index.html
@@ -376,7 +376,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2013/10/11/basic-git-commands/index.html b/blog/2013/10/11/basic-git-commands/index.html
index 58565aba..29cd9dbc 100644
--- a/blog/2013/10/11/basic-git-commands/index.html
+++ b/blog/2013/10/11/basic-git-commands/index.html
@@ -635,7 +635,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2013/10/20/handling-ajax-calls-with-node-dot-js-and-express-scraping-craigslist/index.html b/blog/2013/10/20/handling-ajax-calls-with-node-dot-js-and-express-scraping-craigslist/index.html
index 6d0c302f..760be927 100644
--- a/blog/2013/10/20/handling-ajax-calls-with-node-dot-js-and-express-scraping-craigslist/index.html
+++ b/blog/2013/10/20/handling-ajax-calls-with-node-dot-js-and-express-scraping-craigslist/index.html
@@ -755,7 +755,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2013/11/01/handling-ajax-calls-with-node-dot-js-and-express-part-2/index.html b/blog/2013/11/01/handling-ajax-calls-with-node-dot-js-and-express-part-2/index.html
index 8cd367ff..05233443 100644
--- a/blog/2013/11/01/handling-ajax-calls-with-node-dot-js-and-express-part-2/index.html
+++ b/blog/2013/11/01/handling-ajax-calls-with-node-dot-js-and-express-part-2/index.html
@@ -581,7 +581,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2013/11/10/social-authentication-with-passport-dot-js/index.html b/blog/2013/11/10/social-authentication-with-passport-dot-js/index.html
index debd4611..7307fbb6 100644
--- a/blog/2013/11/10/social-authentication-with-passport-dot-js/index.html
+++ b/blog/2013/11/10/social-authentication-with-passport-dot-js/index.html
@@ -2620,7 +2620,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2013/11/11/user-authentication-with-passport-dot-js/index.html b/blog/2013/11/11/user-authentication-with-passport-dot-js/index.html
index 592b0715..4546e7c5 100644
--- a/blog/2013/11/11/user-authentication-with-passport-dot-js/index.html
+++ b/blog/2013/11/11/user-authentication-with-passport-dot-js/index.html
@@ -873,7 +873,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2013/12/21/handling-ajax-calls-with-node-dot-js-and-express-part-3/index.html b/blog/2013/12/21/handling-ajax-calls-with-node-dot-js-and-express-part-3/index.html
index bb3e656c..5bedc05b 100644
--- a/blog/2013/12/21/handling-ajax-calls-with-node-dot-js-and-express-part-3/index.html
+++ b/blog/2013/12/21/handling-ajax-calls-with-node-dot-js-and-express-part-3/index.html
@@ -629,7 +629,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2014/01/15/mad-libs-with-jquery-a-gentle-introduction-to-jquery/index.html b/blog/2014/01/15/mad-libs-with-jquery-a-gentle-introduction-to-jquery/index.html
index 6e3ece4e..1dea66a4 100644
--- a/blog/2014/01/15/mad-libs-with-jquery-a-gentle-introduction-to-jquery/index.html
+++ b/blog/2014/01/15/mad-libs-with-jquery-a-gentle-introduction-to-jquery/index.html
@@ -1064,7 +1064,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2014/01/23/so-you-want-be-an-entrepreneur/index.html b/blog/2014/01/23/so-you-want-be-an-entrepreneur/index.html
index 604b0c76..fea51a81 100644
--- a/blog/2014/01/23/so-you-want-be-an-entrepreneur/index.html
+++ b/blog/2014/01/23/so-you-want-be-an-entrepreneur/index.html
@@ -296,7 +296,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2014/01/29/meteor-dot-js-in-action-create-an-app-test-with-laika/index.html b/blog/2014/01/29/meteor-dot-js-in-action-create-an-app-test-with-laika/index.html
index cb8bac65..25f99fee 100644
--- a/blog/2014/01/29/meteor-dot-js-in-action-create-an-app-test-with-laika/index.html
+++ b/blog/2014/01/29/meteor-dot-js-in-action-create-an-app-test-with-laika/index.html
@@ -1614,7 +1614,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2014/02/16/getting-started-with-node/index.html b/blog/2014/02/16/getting-started-with-node/index.html
index f764a99f..4ddddf48 100644
--- a/blog/2014/02/16/getting-started-with-node/index.html
+++ b/blog/2014/02/16/getting-started-with-node/index.html
@@ -578,7 +578,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2014/02/19/node-twitter-sentiment/index.html b/blog/2014/02/19/node-twitter-sentiment/index.html
index 97a23d22..a5df83c1 100644
--- a/blog/2014/02/19/node-twitter-sentiment/index.html
+++ b/blog/2014/02/19/node-twitter-sentiment/index.html
@@ -997,7 +997,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2014/03/18/node-twitter-sentiment-part-2/index.html b/blog/2014/03/18/node-twitter-sentiment-part-2/index.html
index 6c5592dd..523bd426 100644
--- a/blog/2014/03/18/node-twitter-sentiment-part-2/index.html
+++ b/blog/2014/03/18/node-twitter-sentiment-part-2/index.html
@@ -1222,7 +1222,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2014/04/15/handling-ajax-calls-with-node-dot-js-and-express-part-4/index.html b/blog/2014/04/15/handling-ajax-calls-with-node-dot-js-and-express-part-4/index.html
index b51f3573..403e0952 100644
--- a/blog/2014/04/15/handling-ajax-calls-with-node-dot-js-and-express-part-4/index.html
+++ b/blog/2014/04/15/handling-ajax-calls-with-node-dot-js-and-express-part-4/index.html
@@ -761,7 +761,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2014/04/15/handling-ajax-calls-with-node-dot-js-and-express-part-5/index.html b/blog/2014/04/15/handling-ajax-calls-with-node-dot-js-and-express-part-5/index.html
index 720d3f3d..2257ec09 100644
--- a/blog/2014/04/15/handling-ajax-calls-with-node-dot-js-and-express-part-5/index.html
+++ b/blog/2014/04/15/handling-ajax-calls-with-node-dot-js-and-express-part-5/index.html
@@ -787,7 +787,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2014/05/04/adding-a-captcha-to-sinatra-to-minimize-spam/index.html b/blog/2014/05/04/adding-a-captcha-to-sinatra-to-minimize-spam/index.html
index 9226b554..aaa47cc5 100644
--- a/blog/2014/05/04/adding-a-captcha-to-sinatra-to-minimize-spam/index.html
+++ b/blog/2014/05/04/adding-a-captcha-to-sinatra-to-minimize-spam/index.html
@@ -325,7 +325,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2014/06/12/primer-on-angularjs-service-types/index.html b/blog/2014/06/12/primer-on-angularjs-service-types/index.html
index a8e7871c..54938ae8 100644
--- a/blog/2014/06/12/primer-on-angularjs-service-types/index.html
+++ b/blog/2014/06/12/primer-on-angularjs-service-types/index.html
@@ -371,7 +371,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2014/08/14/kickstarting-angular-with-gulp/index.html b/blog/2014/08/14/kickstarting-angular-with-gulp/index.html
index cc62eb55..3a1de791 100644
--- a/blog/2014/08/14/kickstarting-angular-with-gulp/index.html
+++ b/blog/2014/08/14/kickstarting-angular-with-gulp/index.html
@@ -720,7 +720,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2014/08/15/kickstarting-angular-with-gulp-and-browserify-part-2/index.html b/blog/2014/08/15/kickstarting-angular-with-gulp-and-browserify-part-2/index.html
index 48f0ee3a..a00f14a6 100644
--- a/blog/2014/08/15/kickstarting-angular-with-gulp-and-browserify-part-2/index.html
+++ b/blog/2014/08/15/kickstarting-angular-with-gulp-and-browserify-part-2/index.html
@@ -670,7 +670,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2014/12/31/node-and-mongoose-a-primer/index.html b/blog/2014/12/31/node-and-mongoose-a-primer/index.html
index 60315651..3cf54271 100644
--- a/blog/2014/12/31/node-and-mongoose-a-primer/index.html
+++ b/blog/2014/12/31/node-and-mongoose-a-primer/index.html
@@ -738,7 +738,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2015/01/31/local-authentication-with-passport-and-express-4/index.html b/blog/2015/01/31/local-authentication-with-passport-and-express-4/index.html
index 52ea5a4c..a9481e21 100644
--- a/blog/2015/01/31/local-authentication-with-passport-and-express-4/index.html
+++ b/blog/2015/01/31/local-authentication-with-passport-and-express-4/index.html
@@ -1067,7 +1067,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2015/02/05/sublime-text-for-web-developers/index.html b/blog/2015/02/05/sublime-text-for-web-developers/index.html
index 2abf63bd..83786a68 100644
--- a/blog/2015/02/05/sublime-text-for-web-developers/index.html
+++ b/blog/2015/02/05/sublime-text-for-web-developers/index.html
@@ -492,7 +492,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2015/02/12/postgresql-and-nodejs/index.html b/blog/2015/02/12/postgresql-and-nodejs/index.html
index bc34ed33..dc71583c 100644
--- a/blog/2015/02/12/postgresql-and-nodejs/index.html
+++ b/blog/2015/02/12/postgresql-and-nodejs/index.html
@@ -1379,7 +1379,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2015/03/06/node-with-docker-continuous-integration-and-delivery/index.html b/blog/2015/03/06/node-with-docker-continuous-integration-and-delivery/index.html
index 6da747cf..9732b8fd 100644
--- a/blog/2015/03/06/node-with-docker-continuous-integration-and-delivery/index.html
+++ b/blog/2015/03/06/node-with-docker-continuous-integration-and-delivery/index.html
@@ -725,7 +725,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2015/04/09/testing-angularjs-with-protractor-and-karma-part-1/index.html b/blog/2015/04/09/testing-angularjs-with-protractor-and-karma-part-1/index.html
index be7c6e5f..89ccfa10 100644
--- a/blog/2015/04/09/testing-angularjs-with-protractor-and-karma-part-1/index.html
+++ b/blog/2015/04/09/testing-angularjs-with-protractor-and-karma-part-1/index.html
@@ -1254,7 +1254,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2015/04/26/testing-angularjs-with-protractor-and-karma-part-2/index.html b/blog/2015/04/26/testing-angularjs-with-protractor-and-karma-part-2/index.html
index 3c674189..7be0da1b 100644
--- a/blog/2015/04/26/testing-angularjs-with-protractor-and-karma-part-2/index.html
+++ b/blog/2015/04/26/testing-angularjs-with-protractor-and-karma-part-2/index.html
@@ -818,7 +818,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2015/07/02/handling-user-authentication-with-the-mean-stack/index.html b/blog/2015/07/02/handling-user-authentication-with-the-mean-stack/index.html
index b6db545e..b2e75a52 100644
--- a/blog/2015/07/02/handling-user-authentication-with-the-mean-stack/index.html
+++ b/blog/2015/07/02/handling-user-authentication-with-the-mean-stack/index.html
@@ -150,7 +150,7 @@ <h2>Getting Started</h2>
 </span></code></pre></td></tr></table></div></figure>
 
 
-<p>Navigate to <a href="http://localhost:3000/">http://localhost:3000/</a> and you should see a simple welcome message - &ldquo;Yo!&rdquo;. Once you&rsquo;re finishing admiring the page, kill the server, and glance over the code within the project folder:</p>
+<p>Navigate to <a href="http://localhost:3000/">http://localhost:3000/</a> and you should see a simple welcome message - &ldquo;Yo!&rdquo;. Once you&rsquo;re finished admiring the page, kill the server, and glance over the code within the project 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>
@@ -1359,7 +1359,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2015/08/23/primer-on-swig-templating/index.html b/blog/2015/08/23/primer-on-swig-templating/index.html
index ffe52eb7..71c290b9 100644
--- a/blog/2015/08/23/primer-on-swig-templating/index.html
+++ b/blog/2015/08/23/primer-on-swig-templating/index.html
@@ -669,7 +669,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2015/08/24/node-express-swig-mongo-primer/index.html b/blog/2015/08/24/node-express-swig-mongo-primer/index.html
index 244c783f..93fa5efe 100644
--- a/blog/2015/08/24/node-express-swig-mongo-primer/index.html
+++ b/blog/2015/08/24/node-express-swig-mongo-primer/index.html
@@ -1117,7 +1117,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2015/09/10/testing-node-js-with-mocha-and-chai/index.html b/blog/2015/09/10/testing-node-js-with-mocha-and-chai/index.html
index 5834433d..3f6c7614 100644
--- a/blog/2015/09/10/testing-node-js-with-mocha-and-chai/index.html
+++ b/blog/2015/09/10/testing-node-js-with-mocha-and-chai/index.html
@@ -807,7 +807,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2015/09/26/social-authentication-in-node-dot-js-with-passport/index.html b/blog/2015/09/26/social-authentication-in-node-dot-js-with-passport/index.html
index 0d3df2ba..59bb299f 100644
--- a/blog/2015/09/26/social-authentication-in-node-dot-js-with-passport/index.html
+++ b/blog/2015/09/26/social-authentication-in-node-dot-js-with-passport/index.html
@@ -987,7 +987,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2015/10/22/node-postgres-sequelize/index.html b/blog/2015/10/22/node-postgres-sequelize/index.html
index 68681613..14daef96 100644
--- a/blog/2015/10/22/node-postgres-sequelize/index.html
+++ b/blog/2015/10/22/node-postgres-sequelize/index.html
@@ -882,7 +882,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2016/03/13/designing-a-restful-api-with-node-and-postgres/index.html b/blog/2016/03/13/designing-a-restful-api-with-node-and-postgres/index.html
index caa43862..df9e8c33 100644
--- a/blog/2016/03/13/designing-a-restful-api-with-node-and-postgres/index.html
+++ b/blog/2016/03/13/designing-a-restful-api-with-node-and-postgres/index.html
@@ -796,7 +796,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2016/04/28/test-driven-development-with-node/index.html b/blog/2016/04/28/test-driven-development-with-node/index.html
index 57039505..501fb093 100644
--- a/blog/2016/04/28/test-driven-development-with-node/index.html
+++ b/blog/2016/04/28/test-driven-development-with-node/index.html
@@ -2063,7 +2063,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2016/05/26/swagger-and-nodejs/index.html b/blog/2016/05/26/swagger-and-nodejs/index.html
index ce584a7e..eccc77c0 100644
--- a/blog/2016/05/26/swagger-and-nodejs/index.html
+++ b/blog/2016/05/26/swagger-and-nodejs/index.html
@@ -732,7 +732,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2016/08/16/atom-for-web-developers/index.html b/blog/2016/08/16/atom-for-web-developers/index.html
index 861df5f4..023ac99b 100644
--- a/blog/2016/08/16/atom-for-web-developers/index.html
+++ b/blog/2016/08/16/atom-for-web-developers/index.html
@@ -383,7 +383,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2016/09/12/testing-node-and-express/index.html b/blog/2016/09/12/testing-node-and-express/index.html
index f1f3662c..6413f460 100644
--- a/blog/2016/09/12/testing-node-and-express/index.html
+++ b/blog/2016/09/12/testing-node-and-express/index.html
@@ -2209,7 +2209,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2016/09/25/node-passport-and-postgres/index.html b/blog/2016/09/25/node-passport-and-postgres/index.html
index f901a1af..43e2f48f 100644
--- a/blog/2016/09/25/node-passport-and-postgres/index.html
+++ b/blog/2016/09/25/node-passport-and-postgres/index.html
@@ -2010,7 +2010,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2016/10/28/token-based-authentication-with-node/index.html b/blog/2016/10/28/token-based-authentication-with-node/index.html
index d9f491f6..7ad4a36d 100644
--- a/blog/2016/10/28/token-based-authentication-with-node/index.html
+++ b/blog/2016/10/28/token-based-authentication-with-node/index.html
@@ -10,7 +10,7 @@
 
   
   <meta name="description" content="This tutorial takes a test-first approach to implementing token-based authentication in a NodeJS app using JSON Web Tokens (JWTs).">
-  <meta name="keywords" content="node, express, authentication, postgres">
+  <meta name="keywords" content="node, express, authentication, postgres, jwts, tokens">
 
   <!-- http://t.co/dKP3o1e -->
   <meta name="HandheldFriendly" content="True">
@@ -1181,6 +1181,8 @@ <h2>Conclusion</h2>
 
 <p>Feel free to share your comments, questions, or tips in the comments below. The full code can be found in the <a href="https://github.com/mjhea0/node-token-auth">node-token-auth</a> repository. Cheers!</p>
 
+<blockquote><p>Check out the <a href="https://news.ycombinator.com/item?id=13301105">HN Discussion</a> as well!</p></blockquote>
+
 <p>Did you enjoy this post? Please share. Sharing is caring.</p>
 </div>
 
@@ -1265,7 +1267,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2016/11/05/developing-a-restful-api-with-node-and-typescript/index.html b/blog/2016/11/05/developing-a-restful-api-with-node-and-typescript/index.html
index e8782d75..eaf578a9 100644
--- a/blog/2016/11/05/developing-a-restful-api-with-node-and-typescript/index.html
+++ b/blog/2016/11/05/developing-a-restful-api-with-node-and-typescript/index.html
@@ -1206,7 +1206,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2016/12/23/building-a-restful-api-with-node-and-flow/index.html b/blog/2016/12/23/building-a-restful-api-with-node-and-flow/index.html
index fd3456a7..12bc21c1 100644
--- a/blog/2016/12/23/building-a-restful-api-with-node-and-flow/index.html
+++ b/blog/2016/12/23/building-a-restful-api-with-node-and-flow/index.html
@@ -2068,6 +2068,8 @@ <h2>Conclusion</h2>
         <a class="basic-alignment left" href="/blog/2016/11/05/developing-a-restful-api-with-node-and-typescript/" title="Previous Post: Developing a RESTful API with Node and TypeScript">&laquo; Developing a RESTful API with Node and TypeScript</a>
       
       
+        <a class="basic-alignment right" href="/blog/2017/01/05/token-based-authentication-with-angular/" title="Next Post: Token-Based Authentication with Angular">Token-Based Authentication with Angular &raquo;</a>
+      
     </p>
   </footer>
 </article>
@@ -2084,7 +2086,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/2017/01/05/token-based-authentication-with-angular/index.html b/blog/2017/01/05/token-based-authentication-with-angular/index.html
new file mode 100644
index 00000000..04047307
--- /dev/null
+++ b/blog/2017/01/05/token-based-authentication-with-angular/index.html
@@ -0,0 +1,1480 @@
+
+<!DOCTYPE html>
+<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
+<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
+<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
+<head>
+  <meta charset="utf-8">
+  <title>Token-Based Authentication With Angular - Michael Herman</title>
+  <meta name="author" content="Michael Herman">
+
+  
+  <meta name="description" content="Here we look at how to add user authentication to Angular using JSON Web Tokens (JWTs).">
+  <meta name="keywords" content="angular, angularjs, authentication, jwts, tokens">
+
+  <!-- http://t.co/dKP3o1e -->
+  <meta name="HandheldFriendly" content="True">
+  <meta name="MobileOptimized" content="320">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  
+  <link rel="canonical" href="http://mherman.org/blog/2017/01/05/token-based-authentication-with-angular">
+  <link href="/favicon.png" rel="icon">
+  <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
+  <link href="/atom.xml" rel="alternate" title="Michael Herman" type="application/atom+xml">
+  <script src="/javascripts/modernizr-2.0.js"></script>
+  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+  <script>!window.jQuery && document.write(unescape('%3Cscript src="/javascripts/libs/jquery.min.js"%3E%3C/script%3E'))</script>
+  <script src="/javascripts/octopress.js" type="text/javascript"></script>
+  <!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
+<link href="//fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
+<link href="//fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
+<link href="//fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" type="text/css">
+<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
+<!--- MathJax Configuration -->
+<script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
+  
+  <script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+    ga('create', 'UA-37074204-1', 'auto');
+    ga('send', 'pageview');
+
+  </script>
+
+
+
+</head>
+
+<body   class="collapse-sidebar sidebar-footer" >
+  <header role="banner"><hgroup>
+  <h1><a href="/">Michael Herman</a></h1>
+  
+    <h2>Software Developer</h2>
+  
+</hgroup>
+
+</header>
+  <nav role="navigation"><ul class="subscribe" data-subscription="rss">
+  <li><a href="/atom.xml" rel="subscribe-rss" title="subscribe via RSS" target="_blank"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="25" height="25" viewbox="0 0 100 100"><path class="social" d="M 13.310204,73.332654 C 5.967347,73.332654 0,79.322448 0,86.621428 c 0,7.338776 5.967347,13.262246 13.310204,13.262246 7.370408,0 13.328572,-5.92245 13.328572,-13.262246 0,-7.29898 -5.958164,-13.288774 -13.328572,-13.288774 z M 0.01530612,33.978572 V 53.143878 C 12.493878,53.143878 24.229592,58.02347 33.068368,66.865306 41.894898,75.685714 46.767346,87.47449 46.767346,100 h 19.25 C 66.017346,63.592858 36.4,33.979592 0.01530612,33.978572 l 0,0 z M 0.03877552,0 V 19.17449 C 44.54796,19.17551 80.77551,55.437756 80.77551,100 H 100 C 100,44.87653 55.15102,0 0.03877552,0 z"></path></svg></a></li>
+  
+</ul>
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+    
+      <form action="http://google.com/search" method="get">
+        <fieldset role="search">
+          <input type="hidden" name="sitesearch" value="mherman.org" />
+    
+          <input class="search" type="text" name="q" results="0" placeholder="Search"/>
+        </fieldset>
+      </form>
+  
+<ul class="main-navigation">
+  <li><a href="/">Blog</a></li>
+  <li><a href="/about">About</a></li>
+</ul>
+
+</nav>
+  <div id="main">
+    <div id="content">
+      <div>
+<article class="hentry" role="article">
+  
+  <header>
+    
+      
+        <h1 class="entry-title">Token-Based Authentication With Angular</h1>
+      
+    
+    
+      <p class="meta">
+        
+
+
+
+
+<time class='entry-date' datetime='2017-01-05T07:30:21-07:00'><span class='date'><span class='date-month'>Jan</span> <span class='date-day'>5</span><span class='date-suffix'>th</span>, <span class='date-year'>2017</span></span> <span class='time'>7:30 am</span></time>
+        
+        
+      </p>
+    
+  </header>
+
+
+<div class="entry-content"><p>In the <a href="http://mherman.org/blog/2016/10/28/token-based-authentication-with-node">Token-Based Authentication With Node</a> tutorial, we looked at how to add token-based authentication to a Node app using JSON Web Tokens (JWTs). <em>This time, we&rsquo;ll build out the client-side by showing how to add auth to Angular using JWTs.</em></p>
+
+<h2>Contents</h2>
+
+<ol>
+<li>Objectives</li>
+<li>Review</li>
+<li>Project Setup</li>
+<li>Auth Component</li>
+<li>Service</li>
+<li>Server-side Setup</li>
+<li>Sanity Check</li>
+<li>Auth Login</li>
+<li>Auth Register</li>
+<li>LocalStorage</li>
+<li>Route Restriction</li>
+<li>What&rsquo;s Next?</li>
+</ol>
+
+
+<h2>Objectives</h2>
+
+<p>By the end of this tutorial, you will be able to&hellip;</p>
+
+<ol>
+<li>Discuss the benefits of using JWTs versus sessions and cookies</li>
+<li>Discuss the overall client/server authentication workflow</li>
+<li>Implement user authentication using JWTs with Angular</li>
+</ol>
+
+
+<h2>Review</h2>
+
+<p>Before beginning, review the <em>Introduction</em> from <a href="http://mherman.org/blog/2016/10/28/token-based-authentication-with-node">Token-Based Authentication With Node</a> so you have a solid understanding of what JWTs are and why you would want to use tokens over sessions for auth.</p>
+
+<p>Make sure you can describe what&rsquo;s happening on the server-side as well. Review the code from the <a href="https://github.com/mjhea0/node-token-auth">node-token-auth</a> repo, if necessary.</p>
+
+<p>With that, here&rsquo;s the full user auth process:</p>
+
+<ol>
+<li>Client logs in and the credentials are sent to the server</li>
+<li>Server generates a token (if the credentials are correct)</li>
+<li>Client receives and stores the token in local storage</li>
+<li>Client then sends token to server on subsequent requests within the request header</li>
+</ol>
+
+
+<h2>Project Setup</h2>
+
+<p>Start by cloning the project structure:</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='sh'><span class='line'><span class="nv">$ </span>git clone https://github.com/mjhea0/angular-token-auth --branch v1 --single-branch -b master
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Install the dependencies, and then fire up the app by running <code>gulp</code> to make sure all is well. Navigate to <a href="http://localhost:8888">http://localhost:8888</a> in your browser and you should 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>
+<span class='line-number'>2</span>
+</pre></td><td class='code'><pre><code class='sh'><span class='line'>Hello World
+</span><span class='line'>sanity check
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Kill the server when done, and then glance over the code within the project 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>
+<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='sh'><span class='line'>├── README.md
+</span><span class='line'>├── gulpfile.js
+</span><span class='line'>├── package.json
+</span><span class='line'>└── src
+</span><span class='line'>    ├── css
+</span><span class='line'>    │   └── main.css
+</span><span class='line'>    ├── index.html
+</span><span class='line'>    └── js
+</span><span class='line'>        ├── app.js
+</span><span class='line'>        ├── components
+</span><span class='line'>        │   └── main
+</span><span class='line'>        │       ├── main.controller.js
+</span><span class='line'>        │       └── main.view.html
+</span><span class='line'>        └── config.js
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>All of the client-side code lives in the &ldquo;src&rdquo; folder and the Angular app can be found in the &ldquo;js&rdquo; folder. Make sure you understand the app structure before moving on.</p>
+
+<blockquote><p><strong>NOTE:</strong> This app uses Angular version <a href="https://code.angularjs.org/1.6.1/docs/api">1.6.1</a>.</p></blockquote>
+
+<p>This is optional, but it&rsquo;s a good idea to create a new Github repository and update the remote:</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='sh'><span class='line'><span class="nv">$ </span>git remote <span class="nb">set</span>-url origin &lt;newurl&gt;
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Now, let&rsquo;s wire up a new component&hellip;</p>
+
+<h2>Auth Component</h2>
+
+<p>First, add the dependency to the setter array within <em>app.js</em>:</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='javascript'><span class='line'><span class="nx">angular</span>
+</span><span class='line'>  <span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;tokenAuthApp&#39;</span><span class="p">,</span> <span class="p">[</span>
+</span><span class='line'>    <span class="s1">&#39;ngRoute&#39;</span><span class="p">,</span>
+</span><span class='line'>    <span class="s1">&#39;tokenAuthApp.config&#39;</span><span class="p">,</span>
+</span><span class='line'>    <span class="s1">&#39;tokenAuthApp.components.main&#39;</span><span class="p">,</span>
+</span><span class='line'>    <span class="s1">&#39;tokenAuthApp.components.auth&#39;</span>
+</span><span class='line'>  <span class="p">]);</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Create a new folder within &ldquo;components&rdquo; called &ldquo;auth&rdquo;, and then add the following two files to that folder&hellip;</p>
+
+<p><em>auth.controller.js</em>:</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='javascript'><span class='line'><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="s1">&#39;use strict&#39;</span><span class="p">;</span>
+</span><span class='line'>
+</span><span class='line'>  <span class="nx">angular</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;tokenAuthApp.components.auth&#39;</span><span class="p">,</span> <span class="p">[])</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">controller</span><span class="p">(</span><span class="s1">&#39;authLoginController&#39;</span><span class="p">,</span> <span class="nx">authLoginController</span><span class="p">);</span>
+</span><span class='line'>
+</span><span class='line'>  <span class="nx">authLoginController</span><span class="p">.</span><span class="nx">$inject</span> <span class="o">=</span> <span class="p">[];</span>
+</span><span class='line'>
+</span><span class='line'>  <span class="kd">function</span> <span class="nx">authLoginController</span><span class="p">()</span> <span class="p">{</span>
+</span><span class='line'>    <span class="cm">/*jshint validthis: true */</span>
+</span><span class='line'>    <span class="kr">const</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
+</span><span class='line'>    <span class="nx">vm</span><span class="p">.</span><span class="nx">test</span> <span class="o">=</span> <span class="s1">&#39;just a test&#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><em>auth.login.view.html</em>:</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'><span class="nt">&lt;h1&gt;</span>Login<span class="nt">&lt;/h1&gt;</span>
+</span><span class='line'>
+</span><span class='line'><span class="nt">&lt;p&gt;</span>{{authLoginCtrl.test}}<span class="nt">&lt;/p&gt;</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Next, add the script tag to <em>index.html</em>, just before the closing body tag:</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='html'><span class='line'><span class="c">&lt;!-- auth component --&gt;</span>
+</span><span class='line'><span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span> <span class="na">src=</span><span class="s">&quot;js/components/auth/auth.controller.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Add a new route handler to the <em>config.js</em> 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>
+<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='javascript'><span class='line'><span class="kd">function</span> <span class="nx">appConfig</span><span class="p">(</span><span class="nx">$routeProvider</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>  <span class="nx">$routeProvider</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">when</span><span class="p">(</span><span class="s1">&#39;/&#39;</span><span class="p">,</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">templateUrl</span><span class="o">:</span> <span class="s1">&#39;js/components/main/main.view.html&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controller</span><span class="o">:</span> <span class="s1">&#39;mainController&#39;</span>
+</span><span class='line'>    <span class="p">})</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">when</span><span class="p">(</span><span class="s1">&#39;/login&#39;</span><span class="p">,</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">templateUrl</span><span class="o">:</span> <span class="s1">&#39;js/components/auth/auth.login.view.html&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controller</span><span class="o">:</span> <span class="s1">&#39;authLoginController&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controllerAs</span><span class="o">:</span> <span class="s1">&#39;authLoginCtrl&#39;</span>
+</span><span class='line'>    <span class="p">})</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">otherwise</span><span class="p">({</span>
+</span><span class='line'>      <span class="nx">redirectTo</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="p">}</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Run gulp, and then navigate to <a href="http://localhost:8888/#!/login.">http://localhost:8888/#!/login.</a> If all went well you should see the <code>just a test</code> text.</p>
+
+<h2>Service</h2>
+
+<p>Next, let&rsquo;s create a global service to handle a user logging in, logging out, and signing up. Add a new file called <em>services.js</em> to the &ldquo;js&rdquo; directory:</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='javascript'><span class='line'><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="s1">&#39;use strict&#39;</span><span class="p">;</span>
+</span><span class='line'>
+</span><span class='line'>  <span class="nx">angular</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;tokenAuthApp.services&#39;</span><span class="p">,</span> <span class="p">[])</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">service</span><span class="p">(</span><span class="s1">&#39;authService&#39;</span><span class="p">,</span> <span class="nx">authService</span><span class="p">);</span>
+</span><span class='line'>
+</span><span class='line'>  <span class="nx">authService</span><span class="p">.</span><span class="nx">$inject</span> <span class="o">=</span> <span class="p">[];</span>
+</span><span class='line'>
+</span><span class='line'>  <span class="kd">function</span> <span class="nx">authService</span><span class="p">()</span> <span class="p">{</span>
+</span><span class='line'>    <span class="cm">/*jshint validthis: true */</span>
+</span><span class='line'>    <span class="k">this</span><span class="p">.</span><span class="nx">test</span> <span class="o">=</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="s1">&#39;working&#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="p">})();</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Make sure to add it to the dependencies in <em>app.js</em>:</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='javascript'><span class='line'><span class="nx">angular</span>
+</span><span class='line'>  <span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;tokenAuthApp&#39;</span><span class="p">,</span> <span class="p">[</span>
+</span><span class='line'>    <span class="s1">&#39;ngRoute&#39;</span><span class="p">,</span>
+</span><span class='line'>    <span class="s1">&#39;tokenAuthApp.config&#39;</span><span class="p">,</span>
+</span><span class='line'>    <span class="s1">&#39;tokenAuthApp.components.main&#39;</span><span class="p">,</span>
+</span><span class='line'>    <span class="s1">&#39;tokenAuthApp.components.auth&#39;</span><span class="p">,</span>
+</span><span class='line'>    <span class="s1">&#39;tokenAuthApp.services&#39;</span>
+</span><span class='line'>  <span class="p">]);</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Add the script to the <em>index.html</em> file, below the config script:</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">type=</span><span class="s">&quot;text/javascript&quot;</span> <span class="na">src=</span><span class="s">&quot;./js/services.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<h3>Sanity Check</h3>
+
+<p>Before adding code to <code>authService()</code>, let&rsquo;s make sure the service itself is wired up correctly. To do that, within <em>auth.controller.js</em> inject the service and call the <code>test()</code> method:</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='javascript'><span class='line'><span class="nx">authLoginController</span><span class="p">.</span><span class="nx">$inject</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;authService&#39;</span><span class="p">];</span>
+</span><span class='line'>
+</span><span class='line'><span class="kd">function</span> <span class="nx">authLoginController</span><span class="p">(</span><span class="nx">authService</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>  <span class="cm">/*jshint validthis: true */</span>
+</span><span class='line'>  <span class="kr">const</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
+</span><span class='line'>  <span class="nx">vm</span><span class="p">.</span><span class="nx">test</span> <span class="o">=</span> <span class="s1">&#39;just a test&#39;</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">authService</span><span class="p">.</span><span class="nx">test</span><span class="p">());</span>
+</span><span class='line'><span class="p">}</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Run the server and then navigate to <a href="http://localhost:8888/#!/login.">http://localhost:8888/#!/login.</a> You should see <code>working</code> logged to the JS console.</p>
+
+<h3>User Login</h3>
+
+<p>To handle logging a user in, update the <code>authService()</code> like so:</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='javascript'><span class='line'><span class="nx">authService</span><span class="p">.</span><span class="nx">$inject</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;$http&#39;</span><span class="p">];</span>
+</span><span class='line'>
+</span><span class='line'><span class="kd">function</span> <span class="nx">authService</span><span class="p">(</span><span class="nx">$http</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>  <span class="cm">/*jshint validthis: true */</span>
+</span><span class='line'>  <span class="kr">const</span> <span class="nx">baseURL</span> <span class="o">=</span> <span class="s1">&#39;http://localhost:3000/auth/&#39;</span><span class="p">;</span>
+</span><span class='line'>  <span class="k">this</span><span class="p">.</span><span class="nx">login</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">user</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>    <span class="k">return</span> <span class="nx">$http</span><span class="p">({</span>
+</span><span class='line'>      <span class="nx">method</span><span class="o">:</span> <span class="s1">&#39;POST&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">url</span><span class="o">:</span> <span class="nx">baseURL</span> <span class="o">+</span> <span class="s1">&#39;login&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">data</span><span class="o">:</span> <span class="nx">user</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">headers</span><span class="o">:</span> <span class="p">{</span><span class="s1">&#39;Content-Type&#39;</span><span class="o">:</span> <span class="s1">&#39;application/json&#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 class="p">}</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Here, we are using the <code>$http</code> service to send an AJAX request to the <code>/user/login</code> endpoint. This returns a promise object.</p>
+
+<p>Make sure to remove <code>console.log(authService.test());</code> from the controller.</p>
+
+<h3>User Registration</h3>
+
+<p>Registering a user is similar to logging a user in:</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='javascript'><span class='line'><span class="k">this</span><span class="p">.</span><span class="nx">register</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">user</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>  <span class="k">return</span> <span class="nx">$http</span><span class="p">({</span>
+</span><span class='line'>    <span class="nx">method</span><span class="o">:</span> <span class="s1">&#39;POST&#39;</span><span class="p">,</span>
+</span><span class='line'>    <span class="nx">url</span><span class="o">:</span> <span class="nx">baseURL</span> <span class="o">+</span> <span class="s1">&#39;register&#39;</span><span class="p">,</span>
+</span><span class='line'>    <span class="nx">data</span><span class="o">:</span> <span class="nx">user</span><span class="p">,</span>
+</span><span class='line'>    <span class="nx">headers</span><span class="o">:</span> <span class="p">{</span><span class="s1">&#39;Content-Type&#39;</span><span class="o">:</span> <span class="s1">&#39;application/json&#39;</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>To test this we need to set up a back end&hellip;</p>
+
+<h2>Server-side Setup</h2>
+
+<p>For the server-side, we&rsquo;ll use the finished project from the previous blog post, <a href="http://mherman.org/blog/2016/10/28/token-based-authentication-with-node/">Token-Based Authentication With Node</a>. You can view the code from the <a href="https://github.com/mjhea0/node-token-auth">node-token-auth</a> repository.</p>
+
+<blockquote><p><strong>NOTE:</strong> Feel free to use your own server, just make sure to update the <code>baseURL</code> in the service.</p></blockquote>
+
+<p>Clone the project structure in a new terimal window:</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='sh'><span class='line'><span class="nv">$ </span>git clone https://github.com/mjhea0/node-token-auth --branch v2 --single-branch -b master
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Follow the directions in the <a href="https://github.com/mjhea0/node-token-auth/blob/v2/README.md">README</a> to set up the project. Once done, run the server with <code>npm start</code>, which will listen on port 3000.</p>
+
+<h2>Sanity Check</h2>
+
+<p>To test, update <code>authLoginController()</code> like so:</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>
+</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">function</span> <span class="nx">authLoginController</span><span class="p">(</span><span class="nx">authService</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>  <span class="cm">/*jshint validthis: true */</span>
+</span><span class='line'>  <span class="kr">const</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
+</span><span class='line'>  <span class="nx">vm</span><span class="p">.</span><span class="nx">test</span> <span class="o">=</span> <span class="s1">&#39;just a test&#39;</span><span class="p">;</span>
+</span><span class='line'>  <span class="kr">const</span> <span class="nx">sampleUser</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;michael&#39;</span><span class="p">,</span>
+</span><span class='line'>    <span class="nx">password</span><span class="o">:</span> <span class="s1">&#39;herman&#39;</span>
+</span><span class='line'>  <span class="p">};</span>
+</span><span class='line'>  <span class="nx">authService</span><span class="p">.</span><span class="nx">register</span><span class="p">(</span><span class="nx">sampleUser</span><span class="p">)</span>
+</span><span class='line'>  <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">user</span><span class="p">)</span> <span class="o">=&gt;</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">user</span><span class="p">.</span><span class="nx">data</span><span class="p">);</span>
+</span><span class='line'>  <span class="p">})</span>
+</span><span class='line'>  <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="o">=&gt;</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">err</span><span class="p">);</span>
+</span><span class='line'>  <span class="p">});</span>
+</span><span class='line'>  <span class="nx">authService</span><span class="p">.</span><span class="nx">login</span><span class="p">(</span><span class="nx">sampleUser</span><span class="p">)</span>
+</span><span class='line'>  <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">user</span><span class="p">)</span> <span class="o">=&gt;</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">user</span><span class="p">.</span><span class="nx">data</span><span class="p">);</span>
+</span><span class='line'>  <span class="p">})</span>
+</span><span class='line'>  <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="o">=&gt;</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">err</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>In the browser, you should see the following errors in the console at <a href="http://localhost:8888/#!/login:">http://localhost:8888/#!/login:</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='javascript'><span class='line'><span class="nx">XMLHttpRequest</span> <span class="nx">cannot</span> <span class="nx">load</span> <span class="nx">http</span><span class="o">:</span><span class="c1">//localhost:3000/auth/register. Response to preflight request doesn&#39;t pass access control check: No &#39;Access-Control-Allow-Origin&#39; header is present on the requested resource. Origin &#39;http://localhost:8888&#39; is therefore not allowed access.</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>This is a <a href="http://enable-cors.org/">CORS issue</a>. To fix, we need to <a href="http://enable-cors.org/server_expressjs.html">update</a> the server. Add the following code to <em>src/server/config/main-config.js</em>, just above <code>app.use(cookieParser());</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>
+</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="c1">// *** cross domain requests *** //</span>
+</span><span class='line'><span class="kr">const</span> <span class="nx">allowCrossDomain</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">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">header</span><span class="p">(</span><span class="s1">&#39;Access-Control-Allow-Origin&#39;</span><span class="p">,</span> <span class="s1">&#39;*&#39;</span><span class="p">);</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="s1">&#39;Access-Control-Allow-Methods&#39;</span><span class="p">,</span> <span class="s1">&#39;GET, POST, PUT, DELETE&#39;</span><span class="p">);</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="s1">&#39;Access-Control-Allow-Headers&#39;</span><span class="p">,</span> <span class="s1">&#39;Content-Type, Authorization&#39;</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><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="nx">allowCrossDomain</span><span class="p">);</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Refresh <a href="http://localhost:8888/#!/login">http://localhost:8888/#!/login</a> in the browser and you should see a success in the console with the token:</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='json'><span class='line'><span class="p">{</span>
+</span><span class='line'>    <span class="nt">&quot;status&quot;</span><span class="p">:</span> <span class="s2">&quot;success&quot;</span><span class="p">,</span>
+</span><span class='line'>    <span class="nt">&quot;token&quot;</span><span class="p">:</span> <span class="s2">&quot;eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE0ODQ2NzY4MjEsImlhdCI6MTQ4MzQ2NzIyMSwic3ViIjoyfQ.hMcrXz-63iD4jX-ves3cZMznSS3UhZD4NCPry2zLkHo&quot;</span>
+</span><span class='line'><span class="p">}</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<h2>Auth Login</h2>
+
+<p>Update <em>auth.login.view.html</em>:</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='html'><span class='line'><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;row&quot;</span><span class="nt">&gt;</span>
+</span><span class='line'>  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;col-md-4&quot;</span><span class="nt">&gt;</span>
+</span><span class='line'>    <span class="nt">&lt;h1&gt;</span>Login<span class="nt">&lt;/h1&gt;</span>
+</span><span class='line'>    <span class="nt">&lt;hr&gt;&lt;br&gt;</span>
+</span><span class='line'>    <span class="nt">&lt;form</span> <span class="na">ng-submit=</span><span class="s">&quot;authLoginCtrl.onLogin()&quot;</span> <span class="na">novalidate</span><span class="nt">&gt;</span>
+</span><span class='line'>     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;form-group&quot;</span><span class="nt">&gt;</span>
+</span><span class='line'>       <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">&quot;username&quot;</span><span class="nt">&gt;</span>Username<span class="nt">&lt;/label&gt;</span>
+</span><span class='line'>       <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">class=</span><span class="s">&quot;form-control&quot;</span> <span class="na">id=</span><span class="s">&quot;username&quot;</span> <span class="na">placeholder=</span><span class="s">&quot;enter username&quot;</span> <span class="na">ng-model=</span><span class="s">&quot;authLoginCtrl.user.username&quot;</span> <span class="na">required</span><span class="nt">&gt;</span>
+</span><span class='line'>     <span class="nt">&lt;/div&gt;</span>
+</span><span class='line'>     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;form-group&quot;</span><span class="nt">&gt;</span>
+</span><span class='line'>       <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">&quot;passwowrd&quot;</span><span class="nt">&gt;</span>Password<span class="nt">&lt;/label&gt;</span>
+</span><span class='line'>       <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;password&quot;</span> <span class="na">class=</span><span class="s">&quot;form-control&quot;</span> <span class="na">id=</span><span class="s">&quot;passwowrd&quot;</span> <span class="na">placeholder=</span><span class="s">&quot;enter password&quot;</span> <span class="na">ng-model=</span><span class="s">&quot;authLoginCtrl.user.password&quot;</span> <span class="na">required</span><span class="nt">&gt;</span>
+</span><span class='line'>     <span class="nt">&lt;/div&gt;</span>
+</span><span class='line'>     <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">&quot;submit&quot;</span> <span class="na">class=</span><span class="s">&quot;btn btn-default&quot;</span><span class="nt">&gt;</span>Submit<span class="nt">&lt;/button&gt;</span>
+</span><span class='line'>    <span class="nt">&lt;/form&gt;</span>
+</span><span class='line'>  <span class="nt">&lt;/div&gt;</span>
+</span><span class='line'><span class="nt">&lt;/div&gt;</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Take note of the form. We used the <code>ng-model</code> directive on each of the form inputs to capture those values in the controller. Also, when the form is submitted, the <code>ng-submit</code> directive handles the event by firing the <code>onLogin()</code> function.</p>
+
+<p>Now, let&rsquo;s update the 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>
+<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='javascript'><span class='line'><span class="kd">function</span> <span class="nx">authLoginController</span><span class="p">(</span><span class="nx">authService</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>  <span class="cm">/*jshint validthis: true */</span>
+</span><span class='line'>  <span class="kr">const</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
+</span><span class='line'>  <span class="nx">vm</span><span class="p">.</span><span class="nx">user</span> <span class="o">=</span> <span class="p">{};</span>
+</span><span class='line'>  <span class="nx">vm</span><span class="p">.</span><span class="nx">onLogin</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">authService</span><span class="p">.</span><span class="nx">login</span><span class="p">(</span><span class="nx">vm</span><span class="p">.</span><span class="nx">user</span><span class="p">)</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">user</span><span class="p">)</span> <span class="o">=&gt;</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">user</span><span class="p">.</span><span class="nx">data</span><span class="p">);</span>
+</span><span class='line'>    <span class="p">})</span>
+</span><span class='line'>    <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="o">=&gt;</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">err</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>
+
+
+<p>So, when the form is submitted, we capture the username and password and pass them to the <code>login()</code> method on the service.</p>
+
+<p>Test this out.</p>
+
+<h2>Auth Register</h2>
+
+<p>Just like the login, we need to add a view and controller for registering a user. Start by adding the view, <em>auth.register.view.html</em>, to the &ldquo;auth&rdquo; 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>
+<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='html'><span class='line'><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;row&quot;</span><span class="nt">&gt;</span>
+</span><span class='line'>  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;col-md-4&quot;</span><span class="nt">&gt;</span>
+</span><span class='line'>    <span class="nt">&lt;h1&gt;</span>Register<span class="nt">&lt;/h1&gt;</span>
+</span><span class='line'>    <span class="nt">&lt;hr&gt;&lt;br&gt;</span>
+</span><span class='line'>    <span class="nt">&lt;form</span> <span class="na">ng-submit=</span><span class="s">&quot;authRegisterCtrl.onRegister()&quot;</span> <span class="na">novalidate</span><span class="nt">&gt;</span>
+</span><span class='line'>     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;form-group&quot;</span><span class="nt">&gt;</span>
+</span><span class='line'>       <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">&quot;username&quot;</span><span class="nt">&gt;</span>Username<span class="nt">&lt;/label&gt;</span>
+</span><span class='line'>       <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">class=</span><span class="s">&quot;form-control&quot;</span> <span class="na">id=</span><span class="s">&quot;username&quot;</span> <span class="na">placeholder=</span><span class="s">&quot;enter username&quot;</span> <span class="na">ng-model=</span><span class="s">&quot;authRegisterCtrl.user.username&quot;</span> <span class="na">required</span><span class="nt">&gt;</span>
+</span><span class='line'>     <span class="nt">&lt;/div&gt;</span>
+</span><span class='line'>     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;form-group&quot;</span><span class="nt">&gt;</span>
+</span><span class='line'>       <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">&quot;passwowrd&quot;</span><span class="nt">&gt;</span>Password<span class="nt">&lt;/label&gt;</span>
+</span><span class='line'>       <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;password&quot;</span> <span class="na">class=</span><span class="s">&quot;form-control&quot;</span> <span class="na">id=</span><span class="s">&quot;passwowrd&quot;</span> <span class="na">placeholder=</span><span class="s">&quot;enter password&quot;</span> <span class="na">ng-model=</span><span class="s">&quot;authRegisterCtrl.user.password&quot;</span> <span class="na">required</span><span class="nt">&gt;</span>
+</span><span class='line'>     <span class="nt">&lt;/div&gt;</span>
+</span><span class='line'>     <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">&quot;submit&quot;</span> <span class="na">class=</span><span class="s">&quot;btn btn-default&quot;</span><span class="nt">&gt;</span>Submit<span class="nt">&lt;/button&gt;</span>
+</span><span class='line'>    <span class="nt">&lt;/form&gt;</span>
+</span><span class='line'>  <span class="nt">&lt;/div&gt;</span>
+</span><span class='line'><span class="nt">&lt;/div&gt;</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Add a new controller to <em>auth.controller.js</em>:</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='javascript'><span class='line'><span class="kd">function</span> <span class="nx">authRegisterController</span><span class="p">(</span><span class="nx">authService</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>  <span class="cm">/*jshint validthis: true */</span>
+</span><span class='line'>  <span class="kr">const</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
+</span><span class='line'>  <span class="nx">vm</span><span class="p">.</span><span class="nx">user</span> <span class="o">=</span> <span class="p">{};</span>
+</span><span class='line'>  <span class="nx">vm</span><span class="p">.</span><span class="nx">onRegister</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">authService</span><span class="p">.</span><span class="nx">register</span><span class="p">(</span><span class="nx">vm</span><span class="p">.</span><span class="nx">user</span><span class="p">)</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">user</span><span class="p">)</span> <span class="o">=&gt;</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">user</span><span class="p">.</span><span class="nx">data</span><span class="p">);</span>
+</span><span class='line'>    <span class="p">})</span>
+</span><span class='line'>    <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="o">=&gt;</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">err</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>
+
+
+<p>Don&rsquo;t forget:</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='javascript'><span class='line'><span class="nx">angular</span>
+</span><span class='line'>  <span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;tokenAuthApp.components.auth&#39;</span><span class="p">,</span> <span class="p">[])</span>
+</span><span class='line'>  <span class="p">.</span><span class="nx">controller</span><span class="p">(</span><span class="s1">&#39;authLoginController&#39;</span><span class="p">,</span> <span class="nx">authLoginController</span><span class="p">)</span>
+</span><span class='line'>  <span class="p">.</span><span class="nx">controller</span><span class="p">(</span><span class="s1">&#39;authRegisterController&#39;</span><span class="p">,</span> <span class="nx">authRegisterController</span><span class="p">);</span>
+</span><span class='line'>
+</span><span class='line'><span class="nx">authLoginController</span><span class="p">.</span><span class="nx">$inject</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;authService&#39;</span><span class="p">];</span>
+</span><span class='line'><span class="nx">authRegisterController</span><span class="p">.</span><span class="nx">$inject</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;authService&#39;</span><span class="p">];</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Add a new route handler to the <em>config.js</em> 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>
+<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>
+</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">function</span> <span class="nx">appConfig</span><span class="p">(</span><span class="nx">$routeProvider</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>  <span class="nx">$routeProvider</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">when</span><span class="p">(</span><span class="s1">&#39;/&#39;</span><span class="p">,</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">templateUrl</span><span class="o">:</span> <span class="s1">&#39;js/components/main/main.view.html&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controller</span><span class="o">:</span> <span class="s1">&#39;mainController&#39;</span>
+</span><span class='line'>    <span class="p">})</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">when</span><span class="p">(</span><span class="s1">&#39;/login&#39;</span><span class="p">,</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">templateUrl</span><span class="o">:</span> <span class="s1">&#39;js/components/auth/auth.login.view.html&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controller</span><span class="o">:</span> <span class="s1">&#39;authLoginController&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controllerAs</span><span class="o">:</span> <span class="s1">&#39;authLoginCtrl&#39;</span>
+</span><span class='line'>    <span class="p">})</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">when</span><span class="p">(</span><span class="s1">&#39;/register&#39;</span><span class="p">,</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">templateUrl</span><span class="o">:</span> <span class="s1">&#39;js/components/auth/auth.register.view.html&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controller</span><span class="o">:</span> <span class="s1">&#39;authRegisterController&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controllerAs</span><span class="o">:</span> <span class="s1">&#39;authRegisterCtrl&#39;</span>
+</span><span class='line'>    <span class="p">})</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">otherwise</span><span class="p">({</span>
+</span><span class='line'>      <span class="nx">redirectTo</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="p">}</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Test it out by registering a new user!</p>
+
+<h2>LocalStorage</h2>
+
+<p>Next, let&rsquo;s add the token to localStorage for persistence by replacing the <code>console.log(user.data);</code> with <code>localStorage.setItem('token', user.data.token);</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>
+</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">function</span> <span class="nx">authLoginController</span><span class="p">(</span><span class="nx">authService</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>  <span class="cm">/*jshint validthis: true */</span>
+</span><span class='line'>  <span class="kr">const</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
+</span><span class='line'>  <span class="nx">vm</span><span class="p">.</span><span class="nx">user</span> <span class="o">=</span> <span class="p">{};</span>
+</span><span class='line'>  <span class="nx">vm</span><span class="p">.</span><span class="nx">onLogin</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">authService</span><span class="p">.</span><span class="nx">login</span><span class="p">(</span><span class="nx">vm</span><span class="p">.</span><span class="nx">user</span><span class="p">)</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">user</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="s1">&#39;token&#39;</span><span class="p">,</span> <span class="nx">user</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">token</span><span class="p">);</span>
+</span><span class='line'>    <span class="p">})</span>
+</span><span class='line'>    <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="o">=&gt;</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">err</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="kd">function</span> <span class="nx">authRegisterController</span><span class="p">(</span><span class="nx">authService</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>  <span class="cm">/*jshint validthis: true */</span>
+</span><span class='line'>  <span class="kr">const</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
+</span><span class='line'>  <span class="nx">vm</span><span class="p">.</span><span class="nx">user</span> <span class="o">=</span> <span class="p">{};</span>
+</span><span class='line'>  <span class="nx">vm</span><span class="p">.</span><span class="nx">onRegister</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">authService</span><span class="p">.</span><span class="nx">register</span><span class="p">(</span><span class="nx">vm</span><span class="p">.</span><span class="nx">user</span><span class="p">)</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">user</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="s1">&#39;token&#39;</span><span class="p">,</span> <span class="nx">user</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">token</span><span class="p">);</span>
+</span><span class='line'>    <span class="p">})</span>
+</span><span class='line'>    <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="o">=&gt;</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">err</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>
+
+
+<p>As long as that token is present, the user can be considered logged in. And, when a user needs to make an AJAX request, that token can be used.</p>
+
+<blockquote><p><strong>NOTE</strong>: Besides the token, you could also add the user id and username. You would just need to update the server-side to send back that info.</p></blockquote>
+
+<p>Test this out. Ensure that the token is present in localStorage.</p>
+
+<h2>User Status</h2>
+
+<p>To test out login persistence, we can add a new view that verifies that the user is logged in and that the token is valid.</p>
+
+<p>Add the following method to <code>authService()</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>
+</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="k">this</span><span class="p">.</span><span class="nx">ensureAuthenticated</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">token</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>  <span class="k">return</span> <span class="nx">$http</span><span class="p">({</span>
+</span><span class='line'>    <span class="nx">method</span><span class="o">:</span> <span class="s1">&#39;GET&#39;</span><span class="p">,</span>
+</span><span class='line'>    <span class="nx">url</span><span class="o">:</span> <span class="nx">baseURL</span> <span class="o">+</span> <span class="s1">&#39;user&#39;</span><span class="p">,</span>
+</span><span class='line'>    <span class="nx">headers</span><span class="o">:</span> <span class="p">{</span>
+</span><span class='line'>      <span class="s1">&#39;Content-Type&#39;</span><span class="o">:</span> <span class="s1">&#39;application/json&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">Authorization</span><span class="o">:</span> <span class="s1">&#39;Bearer &#39;</span> <span class="o">+</span> <span class="nx">token</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>Take note of <code>Authorization: 'Bearer ' + token</code>. This is called a <a href="http://security.stackexchange.com/questions/108662/why-is-bearer-required-before-the-token-in-authorization-header-in-a-http-re">Bearer schema</a>, which is sent along with the request. On the server, we are simply checking for the <code>Authorization</code> header, and then whether the token is valid. Can you find this code on the server-side?</p>
+
+<p>Then add a new file called <em>auth.status.view.html</em> to the &ldquo;auth&rdquo; 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>
+</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;row&quot;</span><span class="nt">&gt;</span>
+</span><span class='line'>  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;col-md-4&quot;</span><span class="nt">&gt;</span>
+</span><span class='line'>    <span class="nt">&lt;h1&gt;</span>User Status<span class="nt">&lt;/h1&gt;</span>
+</span><span class='line'>    <span class="nt">&lt;hr&gt;&lt;br&gt;</span>
+</span><span class='line'>    <span class="nt">&lt;p&gt;</span>Logged In? {{ authStatusCtrl.isLoggedIn }}<span class="nt">&lt;/p&gt;</span>
+</span><span class='line'>  <span class="nt">&lt;/div&gt;</span>
+</span><span class='line'><span class="nt">&lt;/div&gt;</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Add a new 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>
+<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='javascript'><span class='line'><span class="kd">function</span> <span class="nx">authStatusController</span><span class="p">(</span><span class="nx">authService</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>  <span class="cm">/*jshint validthis: true */</span>
+</span><span class='line'>  <span class="kr">const</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
+</span><span class='line'>  <span class="nx">vm</span><span class="p">.</span><span class="nx">isLoggedIn</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
+</span><span class='line'>  <span class="kr">const</span> <span class="nx">token</span> <span class="o">=</span> <span class="nx">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="s1">&#39;token&#39;</span><span class="p">);</span>
+</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">token</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>    <span class="nx">authService</span><span class="p">.</span><span class="nx">ensureAuthenticated</span><span class="p">(</span><span class="nx">token</span><span class="p">)</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">user</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span>
+</span><span class='line'>      <span class="k">if</span> <span class="p">(</span><span class="nx">user</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">status</span> <span class="o">===</span> <span class="s1">&#39;success&#39;</span><span class="p">);</span>
+</span><span class='line'>      <span class="nx">vm</span><span class="p">.</span><span class="nx">isLoggedIn</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
+</span><span class='line'>    <span class="p">})</span>
+</span><span class='line'>    <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="o">=&gt;</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">err</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>
+
+
+<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>
+</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">angular</span>
+</span><span class='line'>  <span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;tokenAuthApp.components.auth&#39;</span><span class="p">,</span> <span class="p">[])</span>
+</span><span class='line'>  <span class="p">.</span><span class="nx">controller</span><span class="p">(</span><span class="s1">&#39;authLoginController&#39;</span><span class="p">,</span> <span class="nx">authLoginController</span><span class="p">)</span>
+</span><span class='line'>  <span class="p">.</span><span class="nx">controller</span><span class="p">(</span><span class="s1">&#39;authRegisterController&#39;</span><span class="p">,</span> <span class="nx">authRegisterController</span><span class="p">)</span>
+</span><span class='line'>  <span class="p">.</span><span class="nx">controller</span><span class="p">(</span><span class="s1">&#39;authStatusController&#39;</span><span class="p">,</span> <span class="nx">authStatusController</span><span class="p">);</span>
+</span><span class='line'>
+</span><span class='line'><span class="nx">authLoginController</span><span class="p">.</span><span class="nx">$inject</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;authService&#39;</span><span class="p">];</span>
+</span><span class='line'><span class="nx">authRegisterController</span><span class="p">.</span><span class="nx">$inject</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;authService&#39;</span><span class="p">];</span>
+</span><span class='line'><span class="nx">authStatusController</span><span class="p">.</span><span class="nx">$inject</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;authService&#39;</span><span class="p">];</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Finally, update <em>config.js</em>:</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='javascript'><span class='line'><span class="kd">function</span> <span class="nx">appConfig</span><span class="p">(</span><span class="nx">$routeProvider</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>  <span class="nx">$routeProvider</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">when</span><span class="p">(</span><span class="s1">&#39;/&#39;</span><span class="p">,</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">templateUrl</span><span class="o">:</span> <span class="s1">&#39;js/components/main/main.view.html&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controller</span><span class="o">:</span> <span class="s1">&#39;mainController&#39;</span>
+</span><span class='line'>    <span class="p">})</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">when</span><span class="p">(</span><span class="s1">&#39;/login&#39;</span><span class="p">,</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">templateUrl</span><span class="o">:</span> <span class="s1">&#39;js/components/auth/auth.login.view.html&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controller</span><span class="o">:</span> <span class="s1">&#39;authLoginController&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controllerAs</span><span class="o">:</span> <span class="s1">&#39;authLoginCtrl&#39;</span>
+</span><span class='line'>    <span class="p">})</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">when</span><span class="p">(</span><span class="s1">&#39;/register&#39;</span><span class="p">,</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">templateUrl</span><span class="o">:</span> <span class="s1">&#39;js/components/auth/auth.register.view.html&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controller</span><span class="o">:</span> <span class="s1">&#39;authRegisterController&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controllerAs</span><span class="o">:</span> <span class="s1">&#39;authRegisterCtrl&#39;</span>
+</span><span class='line'>    <span class="p">})</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">when</span><span class="p">(</span><span class="s1">&#39;/status&#39;</span><span class="p">,</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">templateUrl</span><span class="o">:</span> <span class="s1">&#39;js/components/auth/auth.status.view.html&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controller</span><span class="o">:</span> <span class="s1">&#39;authStatusController&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controllerAs</span><span class="o">:</span> <span class="s1">&#39;authStatusCtrl&#39;</span>
+</span><span class='line'>    <span class="p">})</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">otherwise</span><span class="p">({</span>
+</span><span class='line'>      <span class="nx">redirectTo</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="p">}</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Test this out at <a href="http://localhost:8888/#!/status:">http://localhost:8888/#!/status:</a></p>
+
+<ul>
+<li>If there is a token in localStorage, you should see - <code>Logged In? true</code></li>
+<li>Otherwise, you should see <code>Logged In? false</code></li>
+</ul>
+
+
+<p>Finally, let&rsquo;s redirect to the status page after a user successfully registers or logs in. Update the controllers like so:</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>
+</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">authLoginController</span><span class="p">.</span><span class="nx">$inject</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;$location&#39;</span><span class="p">,</span> <span class="s1">&#39;authService&#39;</span><span class="p">];</span>
+</span><span class='line'><span class="nx">authRegisterController</span><span class="p">.</span><span class="nx">$inject</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;$location&#39;</span><span class="p">,</span> <span class="s1">&#39;authService&#39;</span><span class="p">];</span>
+</span><span class='line'><span class="nx">authStatusController</span><span class="p">.</span><span class="nx">$inject</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;authService&#39;</span><span class="p">];</span>
+</span><span class='line'>
+</span><span class='line'><span class="kd">function</span> <span class="nx">authLoginController</span><span class="p">(</span><span class="nx">$location</span><span class="p">,</span> <span class="nx">authService</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>  <span class="cm">/*jshint validthis: true */</span>
+</span><span class='line'>  <span class="kr">const</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
+</span><span class='line'>  <span class="nx">vm</span><span class="p">.</span><span class="nx">user</span> <span class="o">=</span> <span class="p">{};</span>
+</span><span class='line'>  <span class="nx">vm</span><span class="p">.</span><span class="nx">onLogin</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">authService</span><span class="p">.</span><span class="nx">login</span><span class="p">(</span><span class="nx">vm</span><span class="p">.</span><span class="nx">user</span><span class="p">)</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">user</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="s1">&#39;token&#39;</span><span class="p">,</span> <span class="nx">user</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">token</span><span class="p">);</span>
+</span><span class='line'>      <span class="nx">$location</span><span class="p">.</span><span class="nx">path</span><span class="p">(</span><span class="s1">&#39;/status&#39;</span><span class="p">);</span>
+</span><span class='line'>    <span class="p">})</span>
+</span><span class='line'>    <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="o">=&gt;</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">err</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="kd">function</span> <span class="nx">authRegisterController</span><span class="p">(</span><span class="nx">$location</span><span class="p">,</span> <span class="nx">authService</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>  <span class="cm">/*jshint validthis: true */</span>
+</span><span class='line'>  <span class="kr">const</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
+</span><span class='line'>  <span class="nx">vm</span><span class="p">.</span><span class="nx">user</span> <span class="o">=</span> <span class="p">{};</span>
+</span><span class='line'>  <span class="nx">vm</span><span class="p">.</span><span class="nx">onRegister</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">authService</span><span class="p">.</span><span class="nx">register</span><span class="p">(</span><span class="nx">vm</span><span class="p">.</span><span class="nx">user</span><span class="p">)</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">user</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="s1">&#39;token&#39;</span><span class="p">,</span> <span class="nx">user</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">token</span><span class="p">);</span>
+</span><span class='line'>      <span class="nx">$location</span><span class="p">.</span><span class="nx">path</span><span class="p">(</span><span class="s1">&#39;/status&#39;</span><span class="p">);</span>
+</span><span class='line'>    <span class="p">})</span>
+</span><span class='line'>    <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="o">=&gt;</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">err</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>
+
+
+<p>Test it out!</p>
+
+<h2>Route Restriction</h2>
+
+<p>Right now, all routes are open; so, regardless of whether a user is logged in or not they, they can access each route. Certain routes should be restricted if a user is not logged in, while other routes should be restricted if a user is logged in:</p>
+
+<ol>
+<li><code>/</code> - no restrictions</li>
+<li><code>/login</code> - restricted when logged in</li>
+<li><code>/register</code> - restricted when logged in</li>
+<li><code>status</code> - restricted when not logged in</li>
+</ol>
+
+
+<p>To achieve this, add the following property to each route, replacing <code>false</code> with <code>true</code> for routes that you want to restrict:</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='javascript'><span class='line'><span class="nx">restrictions</span><span class="o">:</span> <span class="p">{</span>
+</span><span class='line'>  <span class="nx">ensureAuthenticated</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
+</span><span class='line'>  <span class="nx">loginRedirect</span><span class="o">:</span> <span class="kc">false</span>
+</span><span class='line'><span class="p">}</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>For example:</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='javascript'><span class='line'><span class="kd">function</span> <span class="nx">appConfig</span><span class="p">(</span><span class="nx">$routeProvider</span><span class="p">)</span> <span class="p">{</span>
+</span><span class='line'>  <span class="nx">$routeProvider</span>
+</span><span class='line'>    <span class="p">.</span><span class="nx">when</span><span class="p">(</span><span class="s1">&#39;/&#39;</span><span class="p">,</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">templateUrl</span><span class="o">:</span> <span class="s1">&#39;js/components/main/main.view.html&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controller</span><span class="o">:</span> <span class="s1">&#39;mainController&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">restrictions</span><span class="o">:</span> <span class="p">{</span>
+</span><span class='line'>        <span class="nx">ensureAuthenticated</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
+</span><span class='line'>        <span class="nx">loginRedirect</span><span class="o">:</span> <span class="kc">false</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="nx">when</span><span class="p">(</span><span class="s1">&#39;/login&#39;</span><span class="p">,</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">templateUrl</span><span class="o">:</span> <span class="s1">&#39;js/components/auth/auth.login.view.html&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controller</span><span class="o">:</span> <span class="s1">&#39;authLoginController&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controllerAs</span><span class="o">:</span> <span class="s1">&#39;authLoginCtrl&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">restrictions</span><span class="o">:</span> <span class="p">{</span>
+</span><span class='line'>        <span class="nx">ensureAuthenticated</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
+</span><span class='line'>        <span class="nx">loginRedirect</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 class="nx">when</span><span class="p">(</span><span class="s1">&#39;/register&#39;</span><span class="p">,</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">templateUrl</span><span class="o">:</span> <span class="s1">&#39;js/components/auth/auth.register.view.html&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controller</span><span class="o">:</span> <span class="s1">&#39;authRegisterController&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controllerAs</span><span class="o">:</span> <span class="s1">&#39;authRegisterCtrl&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">restrictions</span><span class="o">:</span> <span class="p">{</span>
+</span><span class='line'>        <span class="nx">ensureAuthenticated</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
+</span><span class='line'>        <span class="nx">loginRedirect</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 class="nx">when</span><span class="p">(</span><span class="s1">&#39;/status&#39;</span><span class="p">,</span> <span class="p">{</span>
+</span><span class='line'>      <span class="nx">templateUrl</span><span class="o">:</span> <span class="s1">&#39;js/components/auth/auth.status.view.html&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controller</span><span class="o">:</span> <span class="s1">&#39;authStatusController&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">controllerAs</span><span class="o">:</span> <span class="s1">&#39;authStatusCtrl&#39;</span><span class="p">,</span>
+</span><span class='line'>      <span class="nx">restrictions</span><span class="o">:</span> <span class="p">{</span>
+</span><span class='line'>        <span class="nx">ensureAuthenticated</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
+</span><span class='line'>        <span class="nx">loginRedirect</span><span class="o">:</span> <span class="kc">false</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="nx">otherwise</span><span class="p">({</span>
+</span><span class='line'>      <span class="nx">redirectTo</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="p">}</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Next, add the following function below the route handlers in <em>config.js</em>:</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='javascript'><span class='line'><span class="kd">function</span> <span class="nx">routeStart</span><span class="p">(</span><span class="nx">$rootScope</span><span class="p">,</span> <span class="nx">$location</span><span class="p">,</span> <span class="nx">$route</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">$on</span><span class="p">(</span><span class="s1">&#39;$routeChangeStart&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="nx">next</span><span class="p">,</span> <span class="nx">current</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span>
+</span><span class='line'>    <span class="k">if</span> <span class="p">(</span><span class="nx">next</span><span class="p">.</span><span class="nx">restrictions</span><span class="p">.</span><span class="nx">ensureAuthenticated</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">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="s1">&#39;token&#39;</span><span class="p">))</span> <span class="p">{</span>
+</span><span class='line'>        <span class="nx">$location</span><span class="p">.</span><span class="nx">path</span><span class="p">(</span><span class="s1">&#39;/login&#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 class="k">if</span> <span class="p">(</span><span class="nx">next</span><span class="p">.</span><span class="nx">restrictions</span><span class="p">.</span><span class="nx">loginRedirect</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">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="s1">&#39;token&#39;</span><span class="p">))</span> <span class="p">{</span>
+</span><span class='line'>        <span class="nx">$location</span><span class="p">.</span><span class="nx">path</span><span class="p">(</span><span class="s1">&#39;/status&#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 class="p">});</span>
+</span><span class='line'><span class="p">}</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>The <code>$routeChangeStart</code> event fires before the actual route change occurs. So, whenever a route is accessed, we check the <code>restrictions</code> property:</p>
+
+<ol>
+<li>If <code>ensureAuthenticated</code> is true and there is no token present, then we redirect them to the login page</li>
+<li>If <code>loginRedirect</code> is true and there&rsquo;s a token present, then we redirect them to the status page</li>
+</ol>
+
+
+<p>Simple, right?</p>
+
+<p>Update:</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='javascript'><span class='line'><span class="nx">angular</span>
+</span><span class='line'>  <span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;tokenAuthApp.config&#39;</span><span class="p">,</span> <span class="p">[])</span>
+</span><span class='line'>  <span class="p">.</span><span class="nx">config</span><span class="p">(</span><span class="nx">appConfig</span><span class="p">)</span>
+</span><span class='line'>  <span class="p">.</span><span class="nx">run</span><span class="p">(</span><span class="nx">routeStart</span><span class="p">);</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Then test one last time.</p>
+
+<h2>What&rsquo;s Next?</h2>
+
+<p>You&rsquo;ve reached the end. Now what?</p>
+
+<ol>
+<li>You should handle those errors in each <code>.catch</code>.</li>
+<li>Check out <a href="https://github.com/sahat/satellizer">Satellizer</a>. It&rsquo;s a nice token-based auth module for Angular. You can find sample code in the following repos - <a href="https://github.com/mjhea0/mean-token-auth">mean-token-auth</a> and <a href="https://github.com/mjhea0/mean-social-token-auth">mean-social-token-auth</a>.</li>
+<li>Try using this app with a different back-end. Since this app is just the client, you can literally use any language/framework to write a RESTful API in.</li>
+</ol>
+
+
+<p>Grab the final code from the <a href="https://github.com/mjhea0/angular-token-auth">angular-token-auth</a> repo. Comment below. Cheers!</p>
+</div>
+
+
+  <footer>
+    <p class="meta">
+      
+  
+
+
+
+  <span class="byline author vcard">Authored by <span class="fn">
+  
+    Michael Herman
+  
+  </span></span>
+
+
+      
+
+
+
+
+<time class='entry-date' datetime='2017-01-05T07:30:21-07:00'><span class='date'><span class='date-month'>Jan</span> <span class='date-day'>5</span><span class='date-suffix'>th</span>, <span class='date-year'>2017</span></span> <span class='time'>7:30 am</span></time>
+      
+      
+
+<span class="categories">
+  
+    <a class='category' href='/blog/categories/angular/'>angular</a>
+  
+</span>
+
+
+    </p>
+    
+      <div class="sharing">
+<!--   
+  <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://mherman.org/blog/2017/01/05/token-based-authentication-with-angular/" data-via="" data-counturl="http://mherman.org/blog/2017/01/05/token-based-authentication-with-angular/" >Tweet</a>
+  
+  
+  
+    <div class="fb-like" data-send="true" data-width="450" data-show-faces="false"></div>
+   -->
+  <br>
+  <!-- AddThis Button BEGIN -->
+  <div class="addthis_toolbox addthis_default_style addthis_32x32_style">
+  <a class="addthis_button_preferred_1"></a>
+  <a class="addthis_button_preferred_2"></a>
+  <a class="addthis_button_preferred_3"></a>
+  <a class="addthis_button_preferred_4"></a>
+  <a class="addthis_button_compact"></a>
+  <a class="addthis_counter addthis_bubble_style"></a>
+  </div>
+  <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
+  <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-50e5f1cc35ad077d"></script>
+  <!-- AddThis Button END -->
+  <br>
+</div>
+
+    
+    <p class="meta">
+      
+        <a class="basic-alignment left" href="/blog/2016/12/23/building-a-restful-api-with-node-and-flow/" title="Previous Post: Building a RESTful API with Node, Flow, and Jest">&laquo; Building a RESTful API with Node, Flow, and Jest</a>
+      
+      
+    </p>
+  </footer>
+</article>
+
+  <section>
+    <h1>Comments</h1>
+    <div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+</div>
+  </section>
+
+
+</div>
+
+    </div>
+  </div>
+  <footer role="contentinfo"><div>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
+  <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
+  <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
+  <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
+  <a href="http://www.youtube.com/hermanmu"><i class="fa fa-youtube-square" style="font-size:2em" aria-hidden="true"></i></a>
+</div>
+
+</footer>
+  
+
+<script type="text/javascript">
+      var disqus_shortname = 'michaelherman';
+      
+        
+        // var disqus_developer = 1;
+        var disqus_identifier = 'http://mherman.org/blog/2017/01/05/token-based-authentication-with-angular/';
+        var disqus_url = 'http://mherman.org/blog/2017/01/05/token-based-authentication-with-angular/';
+        var disqus_script = 'embed.js';
+      
+    (function () {
+      var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+      dsq.src = '//' + disqus_shortname + '.disqus.com/' + disqus_script;
+      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+    }());
+</script>
+
+
+
+
+
+
+<div id="fb-root"></div>
+<script>(function(d, s, id) {
+  var js, fjs = d.getElementsByTagName(s)[0];
+  if (d.getElementById(id)) {return;}
+  js = d.createElement(s); js.id = id; js.async = true;
+  js.src = "//connect.facebook.net/en_US/all.js#appId=212934732101925&xfbml=1";
+  fjs.parentNode.insertBefore(js, fjs);
+}(document, 'script', 'facebook-jssdk'));</script>
+
+
+
+
+
+  <script type="text/javascript">
+    (function(){
+      var twitterWidgets = document.createElement('script');
+      twitterWidgets.type = 'text/javascript';
+      twitterWidgets.async = true;
+      twitterWidgets.src = '//platform.twitter.com/widgets.js';
+      document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
+    })();
+  </script>
+
+
+
+
+
+</body>
+</html>
diff --git a/blog/archives/index.html b/blog/archives/index.html
index 6a2b1df5..220edd45 100644
--- a/blog/archives/index.html
+++ b/blog/archives/index.html
@@ -9,9 +9,9 @@
   <meta name="author" content="Michael Herman">
 
   
-  <meta name="description" content="Blog Archive 2016 Building a RESTful API With Node, Flow, and Jest
-Dec 23 2016 Developing a RESTful API With Node and TypeScript
-Nov 05 2016 Token- &hellip;">
+  <meta name="description" content="Blog Archive 2017 Token-Based Authentication With Angular
+Jan 05 2017 2016 Building a RESTful API With Node, Flow, and Jest
+Dec 23 2016 Developing a &hellip;">
   
 
   <!-- http://t.co/dKP3o1e -->
@@ -104,6 +104,23 @@ <h1 class="entry-title">Blog Archive</h1>
 
 
   
+  <h2>2017</h2>
+
+<article>
+  
+<h1><a href="/blog/2017/01/05/token-based-authentication-with-angular/">Token-Based Authentication With Angular</a></h1>
+<time datetime="2017-01-05T07:30:21-07:00" pubdate><span class='month'>Jan</span> <span class='day'>05</span> <span class='year'>2017</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+  
   <h2>2016</h2>
 
 <article>
@@ -1142,7 +1159,7 @@ <h1><a href="/blog/2012/09/01/predictive-analytics-top-5-trends-going-forward/">
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/categories/analytics/atom.xml b/blog/categories/analytics/atom.xml
index 8202f6ca..a7608f88 100644
--- a/blog/categories/analytics/atom.xml
+++ b/blog/categories/analytics/atom.xml
@@ -4,7 +4,7 @@
   <title><![CDATA[Category: Analytics | Michael Herman]]></title>
   <link href="http://mherman.org/blog/categories/analytics/atom.xml" rel="self"/>
   <link href="http://mherman.org/"/>
-  <updated>2016-12-23T05:09:36-07:00</updated>
+  <updated>2017-01-05T08:08:25-07:00</updated>
   <id>http://mherman.org/</id>
   <author>
     <name><![CDATA[Michael Herman]]></name>
diff --git a/blog/categories/analytics/index.html b/blog/categories/analytics/index.html
index 3fbc4df5..b5781119 100644
--- a/blog/categories/analytics/index.html
+++ b/blog/categories/analytics/index.html
@@ -235,7 +235,7 @@ <h1><a href="/blog/2012/09/01/predictive-analytics-top-5-trends-going-forward/">
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/categories/angular/atom.xml b/blog/categories/angular/atom.xml
index db8513a2..65a9e27a 100644
--- a/blog/categories/angular/atom.xml
+++ b/blog/categories/angular/atom.xml
@@ -4,7 +4,7 @@
   <title><![CDATA[Category: Angular | Michael Herman]]></title>
   <link href="http://mherman.org/blog/categories/angular/atom.xml" rel="self"/>
   <link href="http://mherman.org/"/>
-  <updated>2016-12-23T05:09:36-07:00</updated>
+  <updated>2017-01-05T08:08:25-07:00</updated>
   <id>http://mherman.org/</id>
   <author>
     <name><![CDATA[Michael Herman]]></name>
@@ -14,421 +14,459 @@
 
   
   <entry>
-    <title type="html"><![CDATA[Handling User Authentication With the MEAN Stack]]></title>
-    <link href="http://mherman.org/blog/2015/07/02/handling-user-authentication-with-the-mean-stack/"/>
-    <updated>2015-07-02T07:04:00-06:00</updated>
-    <id>http://mherman.org/blog/2015/07/02/handling-user-authentication-with-the-mean-stack</id>
-    <content type="html"><![CDATA[<div style="text-align:center;">
-  <img src="http://mherman.org/images/mean-auth.png" style="max-width: 100%; border:0;" alt="mean stack authentication">
-</div>
-
+    <title type="html"><![CDATA[Token-Based Authentication With Angular]]></title>
+    <link href="http://mherman.org/blog/2017/01/05/token-based-authentication-with-angular/"/>
+    <updated>2017-01-05T07:30:21-07:00</updated>
+    <id>http://mherman.org/blog/2017/01/05/token-based-authentication-with-angular</id>
+    <content type="html"><![CDATA[<p>In the <a href="http://mherman.org/blog/2016/10/28/token-based-authentication-with-node">Token-Based Authentication With Node</a> tutorial, we looked at how to add token-based authentication to a Node app using JSON Web Tokens (JWTs). <em>This time, we&rsquo;ll build out the client-side by showing how to add auth to Angular using JWTs.</em></p>
 
-<p><br></p>
+<h2>Contents</h2>
 
-<p><strong>This post provides a solution to the question, &ldquo;How do I handle user authentication with the MEAN Stack - MongoDB, ExpressJS, AngularJS, and NodeJS?&rdquo;.</strong></p>
-
-<blockquote><p>Much of this post is ported from <a href="https://realpython.com/blog/python/handling-user-authentication-with-angular-and-flask/">Handling User Authentication with Angular and Flask</a> from <a href="https://realpython.com">Real Python</a>.</p></blockquote>
+<ol>
+<li>Objectives</li>
+<li>Review</li>
+<li>Project Setup</li>
+<li>Auth Component</li>
+<li>Service</li>
+<li>Server-side Setup</li>
+<li>Sanity Check</li>
+<li>Auth Login</li>
+<li>Auth Register</li>
+<li>LocalStorage</li>
+<li>Route Restriction</li>
+<li>What&rsquo;s Next?</li>
+</ol>
 
-<p><em>Updates:</em>
-- 02/28/2016: Updated to the latest versions of NodeJS, ExpressJS, MongoDB, and AngularJS; added a section on persistant logins.</p>
 
-<p>Keep in mind that this solution posed in this tutorial is not the <em>only</em> solution to the question at hand, and it may not even be the <em>right</em> solution for your situation. Regardless of the solution you implement, it is important to note that since end users have full control of the browser as well as access to the front-end code, sensitive data living in your server-side API must be secure. <em>In other words, make certain that you implement an authentication strategy on the server-side to protect sensitive API endpoints.</em></p>
+<h2>Objectives</h2>
 
-<p>That said, we need to enable the following workflow:</p>
+<p>By the end of this tutorial, you will be able to&hellip;</p>
 
 <ol>
-<li>When the client accesses the main route, an index page is served, at which point Angular takes over.</li>
-<li>The Angular app immediately &ldquo;asks&rdquo; the server if a user is logged in.</li>
-<li>Assuming the server indicates that a user is not logged in, the client is immediately asked to log in.</li>
-<li>Once logged in, the Angular app then tracks the user&rsquo;s login status.</li>
+<li>Discuss the benefits of using JWTs versus sessions and cookies</li>
+<li>Discuss the overall client/server authentication workflow</li>
+<li>Implement user authentication using JWTs with Angular</li>
 </ol>
 
 
-<blockquote><p>This tutorial uses <a href="https://nodejs.org/">NodeJS</a> v4.3.1, <a href="http://expressjs.com/4x/api.html">ExpressJS</a> v4.13.4, <a href="https://docs.mongodb.org/v3.2/">MongoDB</a> v3.2.3, and <a href="https://code.angularjs.org/1.4.9/docs/guide">AngularJS</a> v1.4.9. For a full list of dependencies, please view the <em><a href="https://github.com/mjhea0/mean-auth/blob/master/package.json">package.json</a></em> file.</p></blockquote>
-
-<h2>Getting Started</h2>
-
-<p>First, grab the boilerplate code from the <a href="https://github.com/mjhea0/mean-auth/releases/tag/v1">project repo</a>, install the requirements, and then test out the app:</p>
-
-<pre><code class="sh">$ npm start
-</code></pre>
+<h2>Review</h2>
 
-<p>Navigate to <a href="http://localhost:3000/">http://localhost:3000/</a> and you should see a simple welcome message - &ldquo;Yo!&rdquo;. Once you&rsquo;re finishing admiring the page, kill the server, and glance over the code within the project folder:</p>
+<p>Before beginning, review the <em>Introduction</em> from <a href="http://mherman.org/blog/2016/10/28/token-based-authentication-with-node">Token-Based Authentication With Node</a> so you have a solid understanding of what JWTs are and why you would want to use tokens over sessions for auth.</p>
 
-<pre><code class="sh">├── client
-│   ├── index.html
-│   ├── main.js
-│   └── partials
-│       └── home.html
-├── package.json
-└── server
-    ├── app.js
-    ├── models
-    │   └── user.js
-    ├── routes
-    │   └── api.js
-    └── server.js
-</code></pre>
+<p>Make sure you can describe what&rsquo;s happening on the server-side as well. Review the code from the <a href="https://github.com/mjhea0/node-token-auth">node-token-auth</a> repo, if necessary.</p>
 
-<p>Nothing too spectacular. You can see that the back-end code resides in the &ldquo;server&rdquo; folder, while the front-end code lives in the &ldquo;client&rdquo; folder. Explore the files and folders within each.</p>
+<p>With that, here&rsquo;s the full user auth process:</p>
 
-<h2>Login API</h2>
+<ol>
+<li>Client logs in and the credentials are sent to the server</li>
+<li>Server generates a token (if the credentials are correct)</li>
+<li>Client receives and stores the token in local storage</li>
+<li>Client then sends token to server on subsequent requests within the request header</li>
+</ol>
 
-<p>Let&rsquo;s start with the back-end API. This is already built out, for your convenience. Why? The focus of this tutorial is mainly on the client-side. If you&rsquo;re looking for a back-end tutorial for setting up Passport with NodeJS, ExpressJS, and MongoDB take a look at this <a href="http://mherman.org/blog/2015/01/31/local-authentication-with-passport-and-express-4/#.VZCK9xNViko">tutorial</a>.</p>
 
-<h3>User Registration</h3>
+<h2>Project Setup</h2>
 
-<p>Open the &ldquo;routes&rdquo; folder and locate the following code:</p>
+<p>Start by cloning the project structure:</p>
 
-<pre><code class="javascript">router.post('/register', function(req, res) {
-  User.register(new User({ username: req.body.username }),
-    req.body.password, function(err, account) {
-    if (err) {
-      return res.status(500).json({
-        err: err
-      });
-    }
-    passport.authenticate('local')(req, res, function () {
-      return res.status(200).json({
-        status: 'Registration successful!'
-      });
-    });
-  });
-});
+<pre><code class="sh">$ git clone https://github.com/mjhea0/angular-token-auth --branch v1 --single-branch -b master
 </code></pre>
 
-<p>Here, we grab the values from the payload sent with the POST request (from the client-side), create a new <code>User</code> instance, and then attempt to add the instance to the database. If this succeeds a user is added, of course, and then we return a JSON response with a <code>status</code> of &ldquo;success&rdquo;. If it fails, an &ldquo;error&rdquo; response is sent.</p>
-
-<p>Let&rsquo;s test this via curl. Fire up the server, and then run the following command:</p>
+<p>Install the dependencies, and then fire up the app by running <code>gulp</code> to make sure all is well. Navigate to <a href="http://localhost:8888">http://localhost:8888</a> in your browser and you should see:</p>
 
-<pre><code class="sh">$ curl -H "Accept: application/json" -H \
-"Content-type: application/json" -X POST \
--d '{"username": "test@test.com", "password": "test"}' \
-http://localhost:3000/user/register
+<pre><code>Hello World
+sanity check
 </code></pre>
 
-<p>You should see a success message:</p>
+<p>Kill the server when done, and then glance over the code within the project folder:</p>
 
-<pre><code class="sh">{
-  "status": "Registration successful!"
-}
+<pre><code class="sh">├── README.md
+├── gulpfile.js
+├── package.json
+└── src
+    ├── css
+    │   └── main.css
+    ├── index.html
+    └── js
+        ├── app.js
+        ├── components
+        │   └── main
+        │       ├── main.controller.js
+        │       └── main.view.html
+        └── config.js
 </code></pre>
 
-<p>Try it again, with the exact same username and password, and you should see an error:</p>
-
-<pre><code class="sh">{
-  "err": {
-    "name": "UserExistsError",
-    "message": "A user with the given username is already registered"
-  }
-}
-</code></pre>
+<p>All of the client-side code lives in the &ldquo;src&rdquo; folder and the Angular app can be found in the &ldquo;js&rdquo; folder. Make sure you understand the app structure before moving on.</p>
 
-<p>On to the login&hellip;</p>
+<blockquote><p><strong>NOTE:</strong> This app uses Angular version <a href="https://code.angularjs.org/1.6.1/docs/api">1.6.1</a>.</p></blockquote>
 
-<h3>User Login</h3>
+<p>This is optional, but it&rsquo;s a good idea to create a new Github repository and update the remote:</p>
 
-<pre><code class="javascript">router.post('/login', function(req, res, next) {
-  passport.authenticate('local', function(err, user, info) {
-    if (err) {
-      return next(err);
-    }
-    if (!user) {
-      return res.status(401).json({
-        err: info
-      });
-    }
-    req.logIn(user, function(err) {
-      if (err) {
-        return res.status(500).json({
-          err: 'Could not log in user'
-        });
-      }
-      res.status(200).json({
-        status: 'Login successful!'
-      });
-    });
-  })(req, res, next);
-});
+<pre><code class="sh">$ git remote set-url origin &lt;newurl&gt;
 </code></pre>
 
-<p>This utilizes Passport&rsquo;s <a href="https://github.com/jaredhanson/passport-local">local strategy</a> to verify the username/email as well as the password. The appropriate response is then returned.</p>
-
-<p>With the server running, test again with curl-</p>
+<p>Now, let&rsquo;s wire up a new component&hellip;</p>
 
-<pre><code class="sh">curl -H "Accept: application/json" -H \
-"Content-type: application/json" -X POST \
--d '{"username": "test@test.com", "password": "test"}' \
-http://localhost:3000/user/login
-</code></pre>
+<h2>Auth Component</h2>
 
-<p>-and you should see:</p>
+<p>First, add the dependency to the setter array within <em>app.js</em>:</p>
 
-<pre><code class="sh">{
-  "message": "Login successful!"
-}
+<pre><code class="javascript">angular
+  .module('tokenAuthApp', [
+    'ngRoute',
+    'tokenAuthApp.config',
+    'tokenAuthApp.components.main',
+    'tokenAuthApp.components.auth'
+  ]);
 </code></pre>
 
-<p>Test again with curl, sending the wrong password, and you should see:</p>
+<p>Create a new folder within &ldquo;components&rdquo; called &ldquo;auth&rdquo;, and then add the following two files to that folder&hellip;</p>
 
-<pre><code class="sh">{
-  "err": {
-    "name": "IncorrectPasswordError",
-    "message": "Password or username are incorrect"
-  }
-}
-</code></pre>
+<p><em>auth.controller.js</em>:</p>
 
-<p>Perfect!</p>
+<pre><code class="javascript">(function() {
 
-<h3>User Logout</h3>
+  'use strict';
 
-<p>Finally, take a look at the logout:</p>
+  angular
+    .module('tokenAuthApp.components.auth', [])
+    .controller('authLoginController', authLoginController);
 
-<pre><code class="javascript">router.get('/logout', function(req, res) {
-  req.logout();
-  res.status(200).json({
-    status: 'Bye!'
-  });
-});
-</code></pre>
+  authLoginController.$inject = [];
 
-<p>This should be straightforward, and you can probably guess what the response will look like - but let&rsquo;s test it again to be sure:</p>
+  function authLoginController() {
+    /*jshint validthis: true */
+    const vm = this;
+    vm.test = 'just a test';
+  }
 
-<pre><code class="sh">$ curl -H "Accept: application/json" -H \
-"Content-type: application/json" -X GET \
-http://localhost:3000/user/logout
+})();
 </code></pre>
 
-<p>You should see:</p>
+<p><em>auth.login.view.html</em>:</p>
 
-<pre><code class="sh">{
-  "status": "Bye!"
-}
-</code></pre>
+<p>```html</p>
 
-<p>On to the client-side!</p>
+<h1>Login</h1>
 
-<h2>Angular App</h2>
 
-<p>Before diving in, remember that since end users have full access to the power of the browser as well as <a href="https://developer.chrome.com/devtools">DevTools</a> and the client-side code, it&rsquo;s vital that you not only restrict access to sensitive endpoints on the server-side - but that you also do not store sensitive data on the client-side. Keep this in mind as you add auth functionality to your own MEAN application stack.</p>
 
-<h3>Client-side Routing</h3>
 
-<p>Let&rsquo;s add the remainder of the client-side routes to the <em>main.js</em> file:</p>
+<p>{{authLoginCtrl.test}}</p>
 
-<pre><code class="javascript">myApp.config(function ($routeProvider) {
-  $routeProvider
-    .when('/', {
-      templateUrl: 'partials/home.html'
-    })
-    .when('/login', {
-      templateUrl: 'partials/login.html',
-      controller: 'loginController'
-    })
-    .when('/logout', {
-      controller: 'logoutController'
-    })
-    .when('/register', {
-      templateUrl: 'partials/register.html',
-      controller: 'registerController'
-    })
-    .when('/one', {
-      template: '&lt;h1&gt;This is page one!&lt;/h1&gt;'
-    })
-    .when('/two', {
-      template: '&lt;h1&gt;This is page two!&lt;/h1&gt;'
-    })
-    .otherwise({
-      redirectTo: '/'
-    });
-});
+
+<pre><code>
+Next, add the script tag to *index.html*, just before the closing body tag:
 </code></pre>
 
-<p>Here, we created five new routes. Before we add the subsequent templates and controllers, let&rsquo;s create a <a href="https://code.angularjs.org/1.4.9/docs/guide/services">service</a> to handle authentication.</p>
+<!-- auth component -->
 
-<h3>Authentication Service</h3>
 
-<p>Start by adding the basic structure of the service to a new file called <em>services.js</em> in the &ldquo;client&rdquo; directory:</p>
+<script type="text/javascript" src="js/components/auth/auth.controller.js"></script>
 
-<pre><code class="javascript">angular.module('myApp').factory('AuthService',
-  ['$q', '$timeout', '$http',
-  function ($q, $timeout, $http) {
 
-    // create user variable
-    var user = null;
+<pre><code>
+Add a new route handler to the *config.js* file:
 
-    // return available functions for use in the controllers
-    return ({
-      isLoggedIn: isLoggedIn,
-      getUserStatus: getUserStatus,
-      login: login,
-      logout: logout,
-      register: register
-    });
 
-}]);
 </code></pre>
 
-<p>Here, we simply defined the service name, <code>AuthService</code>, and then injected the dependencies that we will be using - <code>$q</code>, <code>$timeout</code>, <code>$http</code> - and then returned the functions, which we still need to write, for use outside the service.</p>
-
-<p>Make sure to add the script to the <em>index.html</em> file:</p>
-
-<p><figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<p>function appConfig($routeProvider) {
+  $routeProvider
+    .when(&lsquo;/&rsquo;, {
+      templateUrl: &lsquo;js/components/main/main.view.html&rsquo;,
+      controller: &lsquo;mainController&rsquo;
+    })
+    .when(&lsquo;/login&rsquo;, {
+      templateUrl: &lsquo;js/components/auth/auth.login.view.html&rsquo;,
+      controller: &lsquo;authLoginController&rsquo;,
+      controllerAs: &lsquo;authLoginCtrl&rsquo;
+    })
+    .otherwise({
+      redirectTo: &lsquo;/&rsquo;
+    });
+}
+<figure class='code'><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="nt">&lt;/p&gt;</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>
+<span class='line-number'>45</span>
+<span class='line-number'>46</span>
+<span class='line-number'>47</span>
+<span class='line-number'>48</span>
+<span class='line-number'>49</span>
+<span class='line-number'>50</span>
+<span class='line-number'>51</span>
+<span class='line-number'>52</span>
+<span class='line-number'>53</span>
+<span class='line-number'>54</span>
+<span class='line-number'>55</span>
+<span class='line-number'>56</span>
+<span class='line-number'>57</span>
+<span class='line-number'>58</span>
+<span class='line-number'>59</span>
+<span class='line-number'>60</span>
+<span class='line-number'>61</span>
+</pre></td><td class='code'><pre><code class=''><span class='line'>&lt;/p&gt;
 </span><span class='line'>
-</span><span class='line'><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;./services.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
+</span><span class='line'>&lt;p&gt;Run gulp, and then navigate to &lt;a href="http://localhost:8888/#!/login."&gt;http://localhost:8888/#!/login.&lt;/a&gt; If all went well you should see the &lt;code&gt;just a test&lt;/code&gt; text.&lt;/p&gt;
 </span><span class='line'>
+</span><span class='line'>&lt;h2&gt;Service&lt;/h2&gt;
 </span><span class='line'>
-</span><span class='line'><span class="nt">&lt;p&gt;</span>
-</span></code></pre></td></tr></table></div></figure></p>
-
-<p>Let&rsquo;s create each function&hellip;</p>
+</span><span class='line'>&lt;p&gt;Next, let&rsquo;s create a global service to handle a user logging in, logging out, and signing up. Add a new file called &lt;em&gt;services.js&lt;/em&gt; to the &ldquo;js&rdquo; directory:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;(function() {
+</span><span class='line'>
+</span><span class='line'>  'use strict';
+</span><span class='line'>
+</span><span class='line'>  angular
+</span><span class='line'>    .module('tokenAuthApp.services', [])
+</span><span class='line'>    .service('authService', authService);
+</span><span class='line'>
+</span><span class='line'>  authService.$inject = [];
+</span><span class='line'>
+</span><span class='line'>  function authService() {
+</span><span class='line'>    /*jshint validthis: true */
+</span><span class='line'>    this.test = function() {
+</span><span class='line'>      return 'working';
+</span><span class='line'>    };
+</span><span class='line'>  }
+</span><span class='line'>
+</span><span class='line'>})();
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Make sure to add it to the dependencies in &lt;em&gt;app.js&lt;/em&gt;:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;angular
+</span><span class='line'>  .module('tokenAuthApp', [
+</span><span class='line'>    'ngRoute',
+</span><span class='line'>    'tokenAuthApp.config',
+</span><span class='line'>    'tokenAuthApp.components.main',
+</span><span class='line'>    'tokenAuthApp.components.auth',
+</span><span class='line'>    'tokenAuthApp.services'
+</span><span class='line'>  ]);
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Add the script to the &lt;em&gt;index.html&lt;/em&gt; file, below the config script:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;```html&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;script type="text/javascript" src="./js/services.js"&gt;&lt;/script&gt;
+</span><span class='line'>
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code&gt;
+</span><span class='line'>### Sanity Check
+</span><span class='line'>
+</span><span class='line'>Before adding code to `authService()`, let's make sure the service itself is wired up correctly. To do that, within *auth.controller.js* inject the service and call the `test()` method:
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;authLoginController.$inject = [&lsquo;authService&rsquo;];&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;function authLoginController(authService) {
+</span><span class='line'>  /&lt;em&gt;jshint validthis: true &lt;/em&gt;/
+</span><span class='line'>  const vm = this;
+</span><span class='line'>  vm.test = &lsquo;just a test&rsquo;;
+</span><span class='line'>  console.log(authService.test());
+</span><span class='line'>}</span></code></pre></td></tr></table></div></figure></p>
 
-<p><strong><code>isLoggedIn()</code></strong></p>
+<p>Run the server and then navigate to <a href="http://localhost:8888/#!/login.">http://localhost:8888/#!/login.</a> You should see <code>working</code> logged to the JS console.</p>
 
-<pre><code class="javascript">function isLoggedIn() {
-  if(user) {
-    return true;
-  } else {
-    return false;
-  }
-}
-</code></pre>
+<h3>User Login</h3>
 
-<p>This function returns <code>true</code> if <code>user</code> evaluates to <code>true</code> - a user is logged in - otherwise it returns false.</p>
+<p>To handle logging a user in, update the <code>authService()</code> like so:</p>
 
-<p><strong><code>getUserStatus()</code></strong></p>
+<pre><code class="javascript">authService.$inject = ['$http'];
 
-<pre><code class="javascript">function getUserStatus() {
-  return user;
+function authService($http) {
+  /*jshint validthis: true */
+  const baseURL = 'http://localhost:3000/auth/';
+  this.login = function(user) {
+    return $http({
+      method: 'POST',
+      url: baseURL + 'login',
+      data: user,
+      headers: {'Content-Type': 'application/json'}
+    });
+  };
 }
 </code></pre>
 
-<p><strong><code>login()</code></strong></p>
-
-<pre><code class="javascript">function login(username, password) {
-
-  // create a new instance of deferred
-  var deferred = $q.defer();
-
-  // send a post request to the server
-  $http.post('/user/login',
-    {username: username, password: password})
-    // handle success
-    .success(function (data, status) {
-      if(status === 200 &amp;&amp; data.status){
-        user = true;
-        deferred.resolve();
-      } else {
-        user = false;
-        deferred.reject();
-      }
-    })
-    // handle error
-    .error(function (data) {
-      user = false;
-      deferred.reject();
-    });
+<p>Here, we are using the <code>$http</code> service to send an AJAX request to the <code>/user/login</code> endpoint. This returns a promise object.</p>
 
-  // return promise object
-  return deferred.promise;
+<p>Make sure to remove <code>console.log(authService.test());</code> from the controller.</p>
 
-}
+<h3>User Registration</h3>
+
+<p>Registering a user is similar to logging a user in:</p>
+
+<pre><code class="javascript">this.register = function(user) {
+  return $http({
+    method: 'POST',
+    url: baseURL + 'register',
+    data: user,
+    headers: {'Content-Type': 'application/json'}
+  });
+};
 </code></pre>
 
-<p>Here, we used the <a href="https://code.angularjs.org/1.4.9/docs/api/ng/service/$q">$q</a> service to set up a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promise</a>, which we&rsquo;ll access in a future controller. We also utilized the <a href="https://code.angularjs.org/1.4.9/docs/api/ng/service/$http">$http</a> service to send an AJAX request to the <code>/user/login</code> endpoint that we already set up in our back-end Node/Express app.</p>
+<p>To test this we need to set up a back end&hellip;</p>
 
-<p>Based on the returned response, we either <a href="https://code.angularjs.org/1.4.9/docs/api/ng/service/$q#usage">resolve</a> or <a href="https://code.angularjs.org/1.4.9/docs/api/ng/service/$q#usage">reject</a> and set the value of <code>user</code> to <code>true</code> or <code>false</code>, respectively.</p>
+<h2>Server-side Setup</h2>
 
-<p><strong><code>logout()</code></strong></p>
+<p>For the server-side, we&rsquo;ll use the finished project from the previous blog post, <a href="http://mherman.org/blog/2016/10/28/token-based-authentication-with-node/">Token-Based Authentication With Node</a>. You can view the code from the <a href="https://github.com/mjhea0/node-token-auth">node-token-auth</a> repository.</p>
 
-<pre><code class="javascript">function logout() {
+<blockquote><p><strong>NOTE:</strong> Feel free to use your own server, just make sure to update the <code>baseURL</code> in the service.</p></blockquote>
 
-  // create a new instance of deferred
-  var deferred = $q.defer();
+<p>Clone the project structure in a new terimal window:</p>
 
-  // send a get request to the server
-  $http.get('/user/logout')
-    // handle success
-    .success(function (data) {
-      user = false;
-      deferred.resolve();
-    })
-    // handle error
-    .error(function (data) {
-      user = false;
-      deferred.reject();
-    });
+<pre><code class="sh">$ git clone https://github.com/mjhea0/node-token-auth --branch v2 --single-branch -b master
+</code></pre>
+
+<p>Follow the directions in the <a href="https://github.com/mjhea0/node-token-auth/blob/v2/README.md">README</a> to set up the project. Once done, run the server with <code>npm start</code>, which will listen on port 3000.</p>
 
-  // return promise object
-  return deferred.promise;
+<h2>Sanity Check</h2>
 
+<p>To test, update <code>authLoginController()</code> like so:</p>
+
+<pre><code class="javascript">function authLoginController(authService) {
+  /*jshint validthis: true */
+  const vm = this;
+  vm.test = 'just a test';
+  const sampleUser = {
+    username: 'michael',
+    password: 'herman'
+  };
+  authService.register(sampleUser)
+  .then((user) =&gt; {
+    console.log(user.data);
+  })
+  .catch((err) =&gt; {
+    console.log(err);
+  });
+  authService.login(sampleUser)
+  .then((user) =&gt; {
+    console.log(user.data);
+  })
+  .catch((err) =&gt; {
+    console.log(err);
+  });
 }
 </code></pre>
 
-<p>Here, we followed the same formula as the <code>login()</code> function, except we sent a GET request rather than a POST and to be safe we just went ahead and handled the error the same as the success.</p>
+<p>In the browser, you should see the following errors in the console at <a href="http://localhost:8888/#!/login:">http://localhost:8888/#!/login:</a></p>
 
-<p><strong><code>register()</code></strong></p>
+<pre><code>XMLHttpRequest cannot load http://localhost:3000/auth/register. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8888' is therefore not allowed access.
+</code></pre>
 
-<pre><code class="javascript">function register(username, password) {
+<p>This is a <a href="http://enable-cors.org/">CORS issue</a>. To fix, we need to <a href="http://enable-cors.org/server_expressjs.html">update</a> the server. Add the following code to <em>src/server/config/main-config.js</em>, just above <code>app.use(cookieParser());</code>:</p>
 
-  // create a new instance of deferred
-  var deferred = $q.defer();
+<pre><code class="javascript">// *** cross domain requests *** //
+const allowCrossDomain = function(req, res, next) {
+  res.header('Access-Control-Allow-Origin', '*');
+  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
+  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
+  next();
+};
 
-  // send a post request to the server
-  $http.post('/user/register',
-    {username: username, password: password})
-    // handle success
-    .success(function (data, status) {
-      if(status === 200 &amp;&amp; data.status){
-        deferred.resolve();
-      } else {
-        deferred.reject();
-      }
-    })
-    // handle error
-    .error(function (data) {
-      deferred.reject();
-    });
+app.use(allowCrossDomain);
+</code></pre>
 
-  // return promise object
-  return deferred.promise;
+<p>Refresh <a href="http://localhost:8888/#!/login">http://localhost:8888/#!/login</a> in the browser and you should see a success in the console with the token:</p>
 
+<pre><code class="json">{
+    "status": "success",
+    "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE0ODQ2NzY4MjEsImlhdCI6MTQ4MzQ2NzIyMSwic3ViIjoyfQ.hMcrXz-63iD4jX-ves3cZMznSS3UhZD4NCPry2zLkHo"
 }
 </code></pre>
 
-<p>Again, we followed a similar formula to the <code>logout()</code> function. Can you tell what&rsquo;s happening?</p>
-
-<p>That&rsquo;s it for the service. Keep in mind that we still have not &ldquo;used&rdquo; this service. In order to do that we just need to inject it into the necessary components in the Angular app. In our case, that will be the controllers, which we&rsquo;ll build next.</p>
+<h2>Auth Login</h2>
+
+<p>Update <em>auth.login.view.html</em>:</p>
+
+<p>```html</p>
+
+<div class="row">
+  <div class="col-md-4">
+    <h1>Login</h1>
+    <hr><br>
+    <form ng-submit="authLoginCtrl.onLogin()" novalidate>
+     <div class="form-group">
+       <label for="username">Username</label>
+       <input type="text" class="form-control" id="username" placeholder="enter username" ng-model="authLoginCtrl.user.username" required>
+     </div>
+     <div class="form-group">
+       <label for="passwowrd">Password</label>
+       <input type="password" class="form-control" id="passwowrd" placeholder="enter password" ng-model="authLoginCtrl.user.password" required>
+     </div>
+     <button type="submit" class="btn btn-default">Submit</button>
+    </form>
+  </div>
+</div>
 
-<h3>Templates and Controllers</h3>
 
-<p>Looking back at our routes, we need to setup two partials/templates and three controllers:</p>
+<pre><code>
+Take note of the form. We used the `ng-model` directive on each of the form inputs to capture those values in the controller. Also, when the form is submitted, the `ng-submit` directive handles the event by firing the `onLogin()` function.
 
-<pre><code class="javascript">.when('/login', {
-  templateUrl: 'partials/login.html',
-  controller: 'loginController'
-})
-.when('/logout', {
-  controller: 'logoutController'
-})
-.when('/register', {
-  templateUrl: 'partials/register.html',
-  controller: 'registerController'
-})
-</code></pre>
+Now, let's update the controller:
 
-<p><strong>Login</strong></p>
 
-<p>First, add the following HTML to a new file called <em>login.html</em>:</p>
+</code></pre>
 
-<p><figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<p>function authLoginController(authService) {
+  /<em>jshint validthis: true </em>/
+  const vm = this;
+  vm.user = {};
+  vm.onLogin = function() {
+    authService.login(vm.user)
+    .then((user) => {
+      console.log(user.data);
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+  };
+}
+<figure class='code'><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>
@@ -450,139 +488,218 @@ http://localhost:3000/user/logout
 <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='html'><span class='line'><span class="nt">&lt;/p&gt;</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>
+<span class='line-number'>45</span>
+<span class='line-number'>46</span>
+<span class='line-number'>47</span>
+<span class='line-number'>48</span>
+<span class='line-number'>49</span>
+</pre></td><td class='code'><pre><code class=''><span class='line'>&lt;/p&gt;
 </span><span class='line'>
-</span><span class='line'><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;col-md-4&quot;</span><span class="nt">&gt;</span>
-</span><span class='line'>  <span class="nt">&lt;h1&gt;</span>Login<span class="nt">&lt;/h1&gt;</span>
-</span><span class='line'>  <span class="nt">&lt;div</span> <span class="na">ng-show=</span><span class="s">&quot;error&quot;</span> <span class="na">class=</span><span class="s">&quot;alert alert-danger&quot;</span><span class="nt">&gt;</span>{{errorMessage}}<span class="nt">&lt;/div&gt;</span>
-</span><span class='line'>  <span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">&quot;form&quot;</span> <span class="na">ng-submit=</span><span class="s">&quot;login()&quot;</span><span class="nt">&gt;</span>
-</span><span class='line'>    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;form-group&quot;</span><span class="nt">&gt;</span>
-</span><span class='line'>      <span class="nt">&lt;label&gt;</span>Username<span class="nt">&lt;/label&gt;</span>
-</span><span class='line'>      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">class=</span><span class="s">&quot;form-control&quot;</span> <span class="na">name=</span><span class="s">&quot;username&quot;</span> <span class="na">ng-model=</span><span class="s">&quot;loginForm.username&quot;</span> <span class="na">required</span><span class="nt">&gt;</span>
-</span><span class='line'>    <span class="nt">&lt;/div&gt;</span>
-</span><span class='line'>    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;form-group&quot;</span><span class="nt">&gt;</span>
-</span><span class='line'>      <span class="nt">&lt;label&gt;</span>Password<span class="nt">&lt;/label&gt;</span>
-</span><span class='line'>        <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;password&quot;</span> <span class="na">class=</span><span class="s">&quot;form-control&quot;</span> <span class="na">name=</span><span class="s">&quot;password&quot;</span> <span class="na">ng-model=</span><span class="s">&quot;loginForm.password&quot;</span> <span class="na">required</span><span class="nt">&gt;</span>
-</span><span class='line'>      <span class="nt">&lt;/div&gt;</span>
-</span><span class='line'>      <span class="nt">&lt;div&gt;</span>
-</span><span class='line'>        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">&quot;submit&quot;</span> <span class="na">class=</span><span class="s">&quot;btn btn-default&quot;</span> <span class="na">ng-disabled=</span><span class="s">&quot;disabled&quot;</span><span class="nt">&gt;</span>Login<span class="nt">&lt;/button&gt;</span>
-</span><span class='line'>      <span class="nt">&lt;/div&gt;</span>
-</span><span class='line'>  <span class="nt">&lt;/form&gt;</span>
-</span><span class='line'><span class="nt">&lt;/div&gt;</span>
+</span><span class='line'>&lt;p&gt;So, when the form is submitted, we capture the username and password and pass them to the &lt;code&gt;login()&lt;/code&gt; method on the service.&lt;/p&gt;
 </span><span class='line'>
+</span><span class='line'>&lt;p&gt;Test this out.&lt;/p&gt;
 </span><span class='line'>
-</span><span class='line'><span class="nt">&lt;p&gt;</span>
-</span></code></pre></td></tr></table></div></figure></p>
-
-<p>Add this file to the &ldquo;partials&rdquo; directory.</p>
-
-<p>Take note of the form. We used the <a href="https://code.angularjs.org/1.4.9/docs/api/ng/directive/ngModel">ng-model</a> directive on each of the inputs so that we can capture those values in the controller. Also, when the form is submitted, the <a href="https://code.angularjs.org/1.4.9/docs/api/ng/directive/ngSubmit">ng-submit</a> directive handles the event by firing the <code>login()</code> function.</p>
-
-<p>Next, within the &ldquo;client&rdquo; folder, add a new file called <em>controllers.js</em>. Yes, this will hold all of our Angular app&rsquo;s controllers. Don&rsquo;t forget to add the script to the <em>index.html</em> file:</p>
-
-<p><figure class='code'><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="nt">&lt;/p&gt;</span>
+</span><span class='line'>&lt;h2&gt;Auth Register&lt;/h2&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Just like the login, we need to add a view and controller for registering a user. Start by adding the view, &lt;em&gt;auth.register.view.html&lt;/em&gt;, to the &ldquo;auth&rdquo; folder:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;```html&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;div class="row"&gt;
+</span><span class='line'>  &lt;div class="col-md-4"&gt;
+</span><span class='line'>    &lt;h1&gt;Register&lt;/h1&gt;
+</span><span class='line'>    &lt;hr&gt;&lt;br&gt;
+</span><span class='line'>    &lt;form ng-submit="authRegisterCtrl.onRegister()" novalidate&gt;
+</span><span class='line'>     &lt;div class="form-group"&gt;
+</span><span class='line'>       &lt;label for="username"&gt;Username&lt;/label&gt;
+</span><span class='line'>       &lt;input type="text" class="form-control" id="username" placeholder="enter username" ng-model="authRegisterCtrl.user.username" required&gt;
+</span><span class='line'>     &lt;/div&gt;
+</span><span class='line'>     &lt;div class="form-group"&gt;
+</span><span class='line'>       &lt;label for="passwowrd"&gt;Password&lt;/label&gt;
+</span><span class='line'>       &lt;input type="password" class="form-control" id="passwowrd" placeholder="enter password" ng-model="authRegisterCtrl.user.password" required&gt;
+</span><span class='line'>     &lt;/div&gt;
+</span><span class='line'>     &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
+</span><span class='line'>    &lt;/form&gt;
+</span><span class='line'>  &lt;/div&gt;
+</span><span class='line'>&lt;/div&gt;
 </span><span class='line'>
-</span><span class='line'><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;./controllers.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
 </span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code&gt;
+</span><span class='line'>Add a new controller to *auth.controller.js*:
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
 </span><span class='line'>
-</span><span class='line'><span class="nt">&lt;p&gt;</span>
-</span></code></pre></td></tr></table></div></figure></p>
+</span><span class='line'>&lt;p&gt;function authRegisterController(authService) {
+</span><span class='line'>  /&lt;em&gt;jshint validthis: true &lt;/em&gt;/
+</span><span class='line'>  const vm = this;
+</span><span class='line'>  vm.user = {};
+</span><span class='line'>  vm.onRegister = function() {
+</span><span class='line'>    authService.register(vm.user)
+</span><span class='line'>    .then((user) =&gt; {
+</span><span class='line'>      console.log(user.data);
+</span><span class='line'>    })
+</span><span class='line'>    .catch((err) =&gt; {
+</span><span class='line'>      console.log(err);
+</span><span class='line'>    });
+</span><span class='line'>  };
+</span><span class='line'>}</span></code></pre></td></tr></table></div></figure></p>
+
+<p>Don&rsquo;t forget:</p>
+
+<pre><code class="javascript">angular
+  .module('tokenAuthApp.components.auth', [])
+  .controller('authLoginController', authLoginController)
+  .controller('authRegisterController', authRegisterController);
+
+authLoginController.$inject = ['authService'];
+authRegisterController.$inject = ['authService'];
+</code></pre>
 
-<p>Now, let&rsquo;s add the first controller:</p>
+<p>Add a new route handler to the <em>config.js</em> file:</p>
 
-<pre><code class="javascript">angular.module('myApp').controller('loginController',
-  ['$scope', '$location', 'AuthService',
-  function ($scope, $location, AuthService) {
+<pre><code class="javascript">function appConfig($routeProvider) {
+  $routeProvider
+    .when('/', {
+      templateUrl: 'js/components/main/main.view.html',
+      controller: 'mainController'
+    })
+    .when('/login', {
+      templateUrl: 'js/components/auth/auth.login.view.html',
+      controller: 'authLoginController',
+      controllerAs: 'authLoginCtrl'
+    })
+    .when('/register', {
+      templateUrl: 'js/components/auth/auth.register.view.html',
+      controller: 'authRegisterController',
+      controllerAs: 'authRegisterCtrl'
+    })
+    .otherwise({
+      redirectTo: '/'
+    });
+}
+</code></pre>
 
-    $scope.login = function () {
+<p>Test it out by registering a new user!</p>
 
-      // initial values
-      $scope.error = false;
-      $scope.disabled = true;
+<h2>LocalStorage</h2>
 
-      // call login from service
-      AuthService.login($scope.loginForm.username, $scope.loginForm.password)
-        // handle success
-        .then(function () {
-          $location.path('/');
-          $scope.disabled = false;
-          $scope.loginForm = {};
-        })
-        // handle error
-        .catch(function () {
-          $scope.error = true;
-          $scope.errorMessage = "Invalid username and/or password";
-          $scope.disabled = false;
-          $scope.loginForm = {};
-        });
+<p>Next, let&rsquo;s add the token to localStorage for persistence by replacing the <code>console.log(user.data);</code> with <code>localStorage.setItem('token', user.data.token);</code>:</p>
 
-    };
+<pre><code class="javascript">function authLoginController(authService) {
+  /*jshint validthis: true */
+  const vm = this;
+  vm.user = {};
+  vm.onLogin = function() {
+    authService.login(vm.user)
+    .then((user) =&gt; {
+      localStorage.setItem('token', user.data.token);
+    })
+    .catch((err) =&gt; {
+      console.log(err);
+    });
+  };
+}
 
-}]);
+function authRegisterController(authService) {
+  /*jshint validthis: true */
+  const vm = this;
+  vm.user = {};
+  vm.onRegister = function() {
+    authService.register(vm.user)
+    .then((user) =&gt; {
+      localStorage.setItem('token', user.data.token);
+    })
+    .catch((err) =&gt; {
+      console.log(err);
+    });
+  };
+}
 </code></pre>
 
-<p>So, when the <code>login()</code> function is fired, we set some initial values and then call <code>login()</code> from the <code>AuthService</code>, passing the user inputed email and password as arguments. The subsequent success or error is then handled and the DOM/view/template is updated appropriately.</p>
+<p>As long as that token is present, the user can be considered logged in. And, when a user needs to make an AJAX request, that token can be used.</p>
 
-<p>Ready to test the first round-trip - <strong>client => server => client</strong>?</p>
+<blockquote><p><strong>NOTE</strong>: Besides the token, you could also add the user id and username. You would just need to update the server-side to send back that info.</p></blockquote>
 
-<p>Fire up the server and navigate to <a href="http://localhost:3000/#/login">http://localhost:3000/#/login</a> in your browser. First, try logging in with the user credentials used to register earlier - e.g, <code>test@test.com</code> and <code>test</code>, respectively. If all went well, you should be redirected to the main URL. Next, try to log in using invalid credentials. You should see the error message flash, &ldquo;Invalid username and/or password&rdquo;.</p>
+<p>Test this out. Ensure that the token is present in localStorage.</p>
 
-<p><strong>Logout</strong></p>
+<h2>User Status</h2>
 
-<p>Add the controller:</p>
+<p>To test out login persistence, we can add a new view that verifies that the user is logged in and that the token is valid.</p>
 
-<pre><code class="javascript">angular.module('myApp').controller('logoutController',
-  ['$scope', '$location', 'AuthService',
-  function ($scope, $location, AuthService) {
+<p>Add the following method to <code>authService()</code>:</p>
 
-    $scope.logout = function () {
+<pre><code class="javascript">this.ensureAuthenticated = function(token) {
+  return $http({
+    method: 'GET',
+    url: baseURL + 'user',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: 'Bearer ' + token
+    }
+  });
+};
+</code></pre>
 
-      // call logout from service
-      AuthService.logout()
-        .then(function () {
-          $location.path('/login');
-        });
+<p>Take note of <code>Authorization: 'Bearer ' + token</code>. This is called a <a href="http://security.stackexchange.com/questions/108662/why-is-bearer-required-before-the-token-in-authorization-header-in-a-http-re">Bearer schema</a>, which is sent along with the request. On the server, we are simply checking for the <code>Authorization</code> header, and then whether the token is valid. Can you find this code on the server-side?</p>
 
-    };
+<p>Then add a new file called <em>auth.status.view.html</em> to the &ldquo;auth&rdquo; folder:</p>
 
-}]);
-</code></pre>
+<p>```html</p>
 
-<p>Here, we called <code>AuthService.logout()</code> and then redirected the user to the <code>/login</code> route after the promise is resolved.</p>
+<div class="row">
+  <div class="col-md-4">
+    <h1>User Status</h1>
+    <hr><br>
+    <p>Logged In? {{ authStatusCtrl.isLoggedIn }}</p>
+  </div>
+</div>
 
-<p>Add a button to <em>home.html</em>:</p>
 
-<p><figure class='code'><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='html'><span class='line'><span class="nt">&lt;/p&gt;</span>
-</span><span class='line'>
-</span><span class='line'><span class="nt">&lt;div</span> <span class="na">ng-controller=</span><span class="s">&quot;logoutController&quot;</span><span class="nt">&gt;</span>
-</span><span class='line'>  <span class="nt">&lt;a</span> <span class="na">ng-click=</span><span class="s">&#39;logout()&#39;</span> <span class="na">class=</span><span class="s">&quot;btn btn-default&quot;</span><span class="nt">&gt;</span>Logout<span class="nt">&lt;/a&gt;</span>
-</span><span class='line'><span class="nt">&lt;/div&gt;</span>
-</span><span class='line'>
-</span><span class='line'>
-</span><span class='line'><span class="nt">&lt;p&gt;</span>
-</span></code></pre></td></tr></table></div></figure></p>
+<pre><code>
 
-<p>And then test it out again.</p>
+Add a new controller:
 
-<p><strong>Register</strong></p>
 
-<p>Add a new new file called <em>register.html</em> to the &ldquo;partials&rdquo; folder and add the following HTML:</p>
+</code></pre>
 
-<p><figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<p>function authStatusController(authService) {
+  /<em>jshint validthis: true </em>/
+  const vm = this;
+  vm.isLoggedIn = false;
+  const token = localStorage.getItem(&lsquo;token&rsquo;);
+  if (token) {
+    authService.ensureAuthenticated(token)
+    .then((user) => {
+      if (user.data.status === &lsquo;success&rsquo;);
+      vm.isLoggedIn = true;
+    })
+    .catch((err) => {
+      console.log(err);
+    });    <br/>
+  }
+}
+<figure class='code'><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>
@@ -604,1116 +721,4019 @@ http://localhost:3000/user/logout
 <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='html'><span class='line'><span class="nt">&lt;/p&gt;</span>
-</span><span class='line'>
-</span><span class='line'><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;col-md-4&quot;</span><span class="nt">&gt;</span>
-</span><span class='line'>  <span class="nt">&lt;h1&gt;</span>Register<span class="nt">&lt;/h1&gt;</span>
-</span><span class='line'>  <span class="nt">&lt;div</span> <span class="na">ng-show=</span><span class="s">&quot;error&quot;</span> <span class="na">class=</span><span class="s">&quot;alert alert-danger&quot;</span><span class="nt">&gt;</span>{{errorMessage}}<span class="nt">&lt;/div&gt;</span>
-</span><span class='line'>  <span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">&quot;form&quot;</span> <span class="na">ng-submit=</span><span class="s">&quot;register()&quot;</span><span class="nt">&gt;</span>
-</span><span class='line'>    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;form-group&quot;</span><span class="nt">&gt;</span>
-</span><span class='line'>      <span class="nt">&lt;label&gt;</span>Username<span class="nt">&lt;/label&gt;</span>
-</span><span class='line'>      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">class=</span><span class="s">&quot;form-control&quot;</span> <span class="na">name=</span><span class="s">&quot;username&quot;</span> <span class="na">ng-model=</span><span class="s">&quot;registerForm.username&quot;</span> <span class="na">required</span><span class="nt">&gt;</span>
-</span><span class='line'>    <span class="nt">&lt;/div&gt;</span>
-</span><span class='line'>    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;form-group&quot;</span><span class="nt">&gt;</span>
-</span><span class='line'>      <span class="nt">&lt;label&gt;</span>Password<span class="nt">&lt;/label&gt;</span>
-</span><span class='line'>        <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;password&quot;</span> <span class="na">class=</span><span class="s">&quot;form-control&quot;</span> <span class="na">name=</span><span class="s">&quot;password&quot;</span> <span class="na">ng-model=</span><span class="s">&quot;registerForm.password&quot;</span> <span class="na">required</span><span class="nt">&gt;</span>
-</span><span class='line'>      <span class="nt">&lt;/div&gt;</span>
-</span><span class='line'>      <span class="nt">&lt;div&gt;</span>
-</span><span class='line'>        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">&quot;submit&quot;</span> <span class="na">class=</span><span class="s">&quot;btn btn-default&quot;</span> <span class="na">ng-disabled=</span><span class="s">&quot;disabled&quot;</span><span class="nt">&gt;</span>Register<span class="nt">&lt;/button&gt;</span>
-</span><span class='line'>      <span class="nt">&lt;/div&gt;</span>
-</span><span class='line'>  <span class="nt">&lt;/form&gt;</span>
-</span><span class='line'><span class="nt">&lt;/div&gt;</span>
-</span><span class='line'>
-</span><span class='line'>
-</span><span class='line'><span class="nt">&lt;p&gt;</span>
-</span></code></pre></td></tr></table></div></figure></p>
-
-<p>Next, add the controller:</p>
-
-<pre><code class="javascript">angular.module('myApp').controller('registerController',
-  ['$scope', '$location', 'AuthService',
-  function ($scope, $location, AuthService) {
-
-    $scope.register = function () {
-
-      // initial values
-      $scope.error = false;
-      $scope.disabled = true;
-
-      // call register from service
-      AuthService.register($scope.registerForm.username, $scope.registerForm.password)
-        // handle success
-        .then(function () {
-          $location.path('/login');
-          $scope.disabled = false;
-          $scope.registerForm = {};
-        })
-        // handle error
-        .catch(function () {
-          $scope.error = true;
-          $scope.errorMessage = "Something went wrong!";
-          $scope.disabled = false;
-          $scope.registerForm = {};
-        });
-
-    };
-
-}]);
-</code></pre>
-
-<p>You&rsquo;ve seen this before, so let&rsquo;s move right on to testing.</p>
-
-<p>Fire up the server and register a new user at <a href="http://localhost:3000/#/register">http://localhost:3000/#/register</a>. Make sure to test logging in with that new user as well.</p>
-
-<p>Well, that&rsquo;s it for the templates and controllers. We now need to add in functionality to check if a user is logged in on each and every change of route.</p>
-
-<h3>Route Changes</h3>
-
-<p>Start by adding the following code to <em>main.js</em>:</p>
-
-<pre><code class="javascript">myApp.run(function ($rootScope, $location, $route, AuthService) {
-  $rootScope.$on('$routeChangeStart',
-    function (event, next, current) {
-    if (AuthService.isLoggedIn() === false) {
-      $location.path('/login');
-    }
-  });
-});
-</code></pre>
-
-<p>The <a href="https://code.angularjs.org/1.4.9/docs/api/ngRoute/service/$route">$routeChangeStart</a> event fires before the actual route change occurs. So, whenever a route is accessed, before the view is served, we ensure that the user is logged in. Test this out!</p>
-
-<h2>Route Restriction</h2>
-
-<p>Right now all client-side routes require a user to be logged in. What if you want certain routes restricted and other routes open?</p>
-
-<p>You can add the following code to each route handler, replacing <code>true</code> with <code>false</code> for routes that you do not want to restrict:</p>
-
-<pre><code class="javascript">access: {restricted: true}
-</code></pre>
-
-<p>For example:</p>
-
-<pre><code class="javascript">myApp.config(function ($routeProvider) {
-  $routeProvider
-    .when('/', {
-      templateUrl: 'partials/home.html',
-      access: {restricted: true}
-    })
-    .when('/login', {
-      templateUrl: 'partials/login.html',
-      controller: 'loginController',
-      access: {restricted: false}
-    })
-    .when('/logout', {
-      controller: 'logoutController',
-      access: {restricted: true}
-    })
-    .when('/register', {
-      templateUrl: 'partials/register.html',
-      controller: 'registerController',
-      access: {restricted: false}
-    })
-    .when('/one', {
-      template: '&lt;h1&gt;This is page one!&lt;/h1&gt;',
-      access: {restricted: true}
-    })
-    .when('/two', {
-      template: '&lt;h1&gt;This is page two!&lt;/h1&gt;',
-      access: {restricted: false}
-    })
-    .otherwise({
-      redirectTo: '/'
-    });
-});
-</code></pre>
-
-<p>Now just update the <code>$routeChangeStart</code> code in <em>main.js</em>:</p>
-
-<pre><code class="javascript">myApp.run(function ($rootScope, $location, $route, AuthService) {
-  $rootScope.$on('$routeChangeStart',
-  function (event, next, current) {
-    if (next.access.restricted &amp;&amp; AuthService.isLoggedIn() === false) {
-      $location.path('/login');
-      $route.reload();
-    }
-  });
-});
-</code></pre>
-
-<p>Test it out!</p>
-
-<h2>Persistant Login</h2>
-
-<p>Finally, what happens on a page refresh? Try it.</p>
-
-<p>The user is logged out, right? Why? Because the controller and services are called again, setting the <code>user</code> variable to <code>null</code>. This is a problem since the user is still logged in on the server side.</p>
-
-<p>Fortunately, the fix is simple: Within the <code>$routeChangeStart</code> we need to ALWAYS check if a user is logged in. Right now, it&rsquo;s checking whether <code>isLoggedIn()</code> is <code>false</code>. Let&rsquo;s update <code>getUserStatus()</code> so that it checks the user status on the back-end:</p>
-
-<pre><code class="javascript">function getUserStatus() {
-  return $http.get('/user/status')
-  // handle success
-  .success(function (data) {
-    if(data.status){
-      user = true;
-    } else {
-      user = false;
-    }
-  })
-  // handle error
-  .error(function (data) {
-    user = false;
-  });
-}
-</code></pre>
-
-<p>Then add the route handler:</p>
-
-<pre><code class="javascript">router.get('/status', function(req, res) {
-  if (!req.isAuthenticated()) {
-    return res.status(200).json({
-      status: false
-    });
-  }
-  res.status(200).json({
-    status: true
-  });
-});
-</code></pre>
-
-<p>Finally, update the <code>$routeChangeStart</code>:</p>
-
-<pre><code class="javascript">myApp.run(function ($rootScope, $location, $route, AuthService) {
-  $rootScope.$on('$routeChangeStart',
-    function (event, next, current) {
-      AuthService.getUserStatus()
-      .then(function(){
-        if (next.access.restricted &amp;&amp; !AuthService.isLoggedIn()){
-          $location.path('/login');
-          $route.reload();
-        }
-      });
-  });
-});
-</code></pre>
-
-<p>Try it out!</p>
-
-<h2>Conclusion</h2>
-
-<p>That&rsquo;s it. One thing you should note is that the Angular app can be used with various frameworks as long as the endpoints are set up correctly in the AJAX requests. So, you can easily take the Angular portion and add it to your Django or Pyramid or NodeJS app. Try it!</p>
-
-<blockquote><p>Check out a Python/Flask app with Angular Auth <a href="https://realpython.com/blog/python/handling-user-authentication-with-angular-and-flask/">here</a></p></blockquote>
-
-<p>Grab the final code from the <a href="https://github.com/mjhea0/mean-auth">repo</a>. Cheers!</p>
-]]></content>
-  </entry>
-  
-  <entry>
-    <title type="html"><![CDATA[Testing AngularJS With Protractor and Karma - Part 2]]></title>
-    <link href="http://mherman.org/blog/2015/04/26/testing-angularjs-with-protractor-and-karma-part-2/"/>
-    <updated>2015-04-26T08:06:00-06:00</updated>
-    <id>http://mherman.org/blog/2015/04/26/testing-angularjs-with-protractor-and-karma-part-2</id>
-    <content type="html"><![CDATA[<p><strong>This article details how to test a simple AngularJS application using unit tests and end-to-end (E2E) tests.</strong></p>
-
-<div style="text-align:center;">
-  <img src="https://raw.githubusercontent.com/mjhea0/angular-testing-tutorial/master/img/angular-protractor.png" style="max-width: 100%; border:0;" alt="angular + protractor">
-</div>
-
-
-<p><br></p>
-
-<ul>
-<li><a href="http://mherman.org/blog/2015/04/09/testing-angularjs-with-protractor-and-karma-part-1">Part 1</a> - In the first part we&rsquo;ll look at unit tests, which ensure that small, isolated pieces of code (e.g., a unit) behave as expected.</li>
-<li>Part 2 - In part two we&rsquo;ll address E2E tests, which verify that all the pieces of code (units) fit together by simulating the user experience through browser automation. <strong>(current)</strong></li>
-</ul>
-
-
-<blockquote><p><em>Updates</em>: December 3rd, 2016 - bumped dependencies</p></blockquote>
-
-<p>Having finished up unit testing, let&rsquo;s now turn our attention to e2e testing using <a href="http://angular.github.io/protractor/#/">Protractor</a>, which is a testing framework built specifically for AngularJS apps. Essentially, it runs tests against an app in the browser via <a href="http://seleniumhq.github.io/selenium/docs/api/javascript/">Selenium Webdriver</a>, interacting with the app from an end user’s perspective.</p>
-
-<div style="text-align:center;">
-  <img src="https://raw.githubusercontent.com/mjhea0/angular-testing-tutorial/master/img/components.png" style="max-width: 100%; border:0;" alt="protractor components">
-</div>
-
-
-<p><br></p>
-
-<p>Since e2e tests are much more expensive than unit tests - e.g., they generally take more time to run and are harder to write and maintain - you should almost always focus the majority of your testing efforts on unit tests. It&rsquo;s good to follow the 80/20 rule - 80% of your tests are unit tests, while 20% are e2e tests. That said, this tutorial series breaks this rule since the goal is to educate. Keep this in mind as you write your own tests against your own application.</p>
-
-<p>Also, make sure you test the most important aspects/functions of your application with your e2e tests. Don&rsquo;t waste time on the trivial. Again, they are expensive, so make each one count.</p>
-
-<p>The <a href="https://github.com/mjhea0/angular-testing-tutorial">repo</a> includes the following tags:</p>
-
-<ol>
-<li><em>v1</em> - <a href="https://github.com/mjhea0/angular-testing-tutorial/releases/tag/v1">project boilerplate</a></li>
-<li><em>v2</em> - <a href="https://github.com/mjhea0/angular-testing-tutorial/releases/tag/v2">adds testing boilerplate/configuration</a></li>
-<li><em>v3</em> - <a href="https://github.com/mjhea0/angular-testing-tutorial/releases/tag/v3">adds unit tests</a></li>
-<li><em>v4</em> - <a href="https://github.com/mjhea0/angular-testing-tutorial/releases/tag/v4">adds E2E tests</a></li>
-</ol>
-
-
-<h2>Project Setup</h2>
-
-<p>Assuming you followed the <a href="http://mherman.org/blog/2015/04/09/testing-angularjs-with-protractor-and-karma-part-1">first part</a> of this tutorial, checkout the third tag, <code>v3</code>, and then run the current test suite starting with the unit tests:</p>
-
-<pre><code class="sh">$ git checkout tags/v3
-$ gulp unit
-
-[23:30:01] Using gulpfile ~/angular-testing-tutorial/Gulpfile.js
-[23:30:01] Starting 'unit'...
-INFO [karma]: Karma v0.12.31 server started at http://localhost:9876/
-INFO [launcher]: Starting browser Chrome
-INFO [Chrome 42.0.2311 (Mac OS X 10.10.2)]: Connected on socket i04LmGbgt7P1lNIUTgIJ with id 48442826
-Chrome 42.0.2311 (Mac OS X 10.10.2): Executed 12 of 12 SUCCESS (0.236 secs / 0.051 secs)
-[23:30:06] Finished 'unit' after 4.43 s
-</code></pre>
-
-<p>For the e2e tests, you&rsquo;ll need to open two new terminal windows. In the first new window, run <code>webdriver-manager start</code>. In the second, navigate to your project directory and then run the app - <code>gulp</code>.</p>
-
-<p>Finally, back in the original window, run the tests:</p>
-
-<pre><code class="sh">$ gulp e2e
-
-[23:31:11] Using gulpfile ~/angular-testing-tutorial/Gulpfile.js
-[23:31:11] Starting 'e2e'...
-Using the selenium server at http://localhost:4444/wd/hub
-[launcher] Running 1 instances of WebDriver
-.
-
-Finished in 1.174 seconds
-1 test, 1 assertion, 0 failures
-
-[launcher] 0 instance(s) of WebDriver still running
-[launcher] chrome #1 passed
-</code></pre>
-
-<p>Everything look good?</p>
-
-<h2>The Tests</h2>
-
-<p>Open the test spec, <em>spec.js</em>, within the &ldquo;tests/e2e&rdquo; directory. Let&rsquo;s look at the first test:</p>
-
-<pre><code class="javascript">describe('myController', function () {
-
-  it('the dom initially has a greeting', function () {
-    browser.get('http://localhost:8888/#/one');
-    expect(element(by.id('greeting')).getText()).toEqual('Hello, World!');
-  });
-
-});
-</code></pre>
-
-<p>Notice how we&rsquo;re still using <a href="http://mochajs.org/">Mocha</a> and <a href="http://chaijs.com/">Chai</a> to <a href="http://angular.github.io/protractor/#/frameworks">manage/structure</a> the test so that it simply opens <code>http://localhost:8888/#/one</code> and then asserts that the text within the HTML element with an ID of <code>greeting</code> is  <code>Hello, World!</code>. Simple, right?</p>
-
-<p>Let&rsquo;s take a quick look at the Angular services that we&rsquo;re using:</p>
-
-<ol>
-<li><a href="http://angular.github.io/protractor/#/api?view=Protractor">browser</a> - loads the page in the browser</li>
-<li><a href="http://angular.github.io/protractor/#/api?view=ElementFinder">element</a> - interacts with the page</li>
-<li><a href="http://angular.github.io/protractor/#/api?view=ProtractorBy">by</a> - finds elements within the page</li>
-</ol>
-
-
-<p>Finally, one important thing to note is how these tests run. Notice that there&rsquo;s no callbacks and/or promises in the test. How does that work with asynchronous code? Simple: Protractor continues to check each assertion until it passes or a certain amount of <a href="https://github.com/angular/protractor/blob/master/docs/timeouts.md">time</a> passes. There also is a <a href="http://angular.github.io/protractor/#/api?view=then">promise</a> attached to most methods that can be access using <code>then</code>.</p>
-
-<p>With that, let&rsquo;s write some tests on our own.</p>
-
-<h3>TestOneController</h3>
-
-<p>Just like in the first part, open the controller code:</p>
-
-<pre><code class="javascript">myApp.controller('TestOneController', function($scope) {
-  $scope.greeting = "Hello, World!";
-  $scope.newText = undefined;
-  $scope.changeGreeting = function() {
-    if ($scope.newText !== undefined) {
-      $scope.greeting = $scope.newText;
-    }
-  };
-});
-</code></pre>
-
-<p>How about the HTML?</p>
-
-<p><figure class='code'><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="nt">&lt;/p&gt;</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>
+<span class='line-number'>45</span>
+<span class='line-number'>46</span>
+<span class='line-number'>47</span>
+<span class='line-number'>48</span>
+<span class='line-number'>49</span>
+<span class='line-number'>50</span>
+<span class='line-number'>51</span>
+<span class='line-number'>52</span>
+<span class='line-number'>53</span>
+<span class='line-number'>54</span>
+<span class='line-number'>55</span>
+<span class='line-number'>56</span>
+<span class='line-number'>57</span>
+<span class='line-number'>58</span>
+<span class='line-number'>59</span>
+<span class='line-number'>60</span>
+<span class='line-number'>61</span>
+<span class='line-number'>62</span>
+<span class='line-number'>63</span>
+<span class='line-number'>64</span>
+<span class='line-number'>65</span>
+<span class='line-number'>66</span>
+<span class='line-number'>67</span>
+<span class='line-number'>68</span>
+<span class='line-number'>69</span>
+<span class='line-number'>70</span>
+<span class='line-number'>71</span>
+<span class='line-number'>72</span>
+<span class='line-number'>73</span>
+<span class='line-number'>74</span>
+<span class='line-number'>75</span>
+<span class='line-number'>76</span>
+<span class='line-number'>77</span>
+<span class='line-number'>78</span>
+<span class='line-number'>79</span>
+<span class='line-number'>80</span>
+<span class='line-number'>81</span>
+<span class='line-number'>82</span>
+<span class='line-number'>83</span>
+<span class='line-number'>84</span>
+<span class='line-number'>85</span>
+<span class='line-number'>86</span>
+<span class='line-number'>87</span>
+<span class='line-number'>88</span>
+<span class='line-number'>89</span>
+<span class='line-number'>90</span>
+<span class='line-number'>91</span>
+<span class='line-number'>92</span>
+<span class='line-number'>93</span>
+<span class='line-number'>94</span>
+<span class='line-number'>95</span>
+<span class='line-number'>96</span>
+<span class='line-number'>97</span>
+<span class='line-number'>98</span>
+<span class='line-number'>99</span>
+<span class='line-number'>100</span>
+<span class='line-number'>101</span>
+<span class='line-number'>102</span>
+<span class='line-number'>103</span>
+<span class='line-number'>104</span>
+<span class='line-number'>105</span>
+<span class='line-number'>106</span>
+<span class='line-number'>107</span>
+<span class='line-number'>108</span>
+<span class='line-number'>109</span>
+<span class='line-number'>110</span>
+<span class='line-number'>111</span>
+<span class='line-number'>112</span>
+<span class='line-number'>113</span>
+<span class='line-number'>114</span>
+<span class='line-number'>115</span>
+<span class='line-number'>116</span>
+<span class='line-number'>117</span>
+<span class='line-number'>118</span>
+<span class='line-number'>119</span>
+<span class='line-number'>120</span>
+<span class='line-number'>121</span>
+<span class='line-number'>122</span>
+<span class='line-number'>123</span>
+<span class='line-number'>124</span>
+<span class='line-number'>125</span>
+<span class='line-number'>126</span>
+<span class='line-number'>127</span>
+<span class='line-number'>128</span>
+<span class='line-number'>129</span>
+<span class='line-number'>130</span>
+<span class='line-number'>131</span>
+<span class='line-number'>132</span>
+<span class='line-number'>133</span>
+<span class='line-number'>134</span>
+<span class='line-number'>135</span>
+<span class='line-number'>136</span>
+<span class='line-number'>137</span>
+<span class='line-number'>138</span>
+<span class='line-number'>139</span>
+<span class='line-number'>140</span>
+<span class='line-number'>141</span>
+<span class='line-number'>142</span>
+<span class='line-number'>143</span>
+<span class='line-number'>144</span>
+<span class='line-number'>145</span>
+<span class='line-number'>146</span>
+<span class='line-number'>147</span>
+<span class='line-number'>148</span>
+<span class='line-number'>149</span>
+<span class='line-number'>150</span>
+<span class='line-number'>151</span>
+<span class='line-number'>152</span>
+<span class='line-number'>153</span>
+<span class='line-number'>154</span>
+<span class='line-number'>155</span>
+<span class='line-number'>156</span>
+<span class='line-number'>157</span>
+<span class='line-number'>158</span>
+<span class='line-number'>159</span>
+<span class='line-number'>160</span>
+<span class='line-number'>161</span>
+<span class='line-number'>162</span>
+<span class='line-number'>163</span>
+<span class='line-number'>164</span>
+<span class='line-number'>165</span>
+<span class='line-number'>166</span>
+<span class='line-number'>167</span>
+<span class='line-number'>168</span>
+<span class='line-number'>169</span>
+<span class='line-number'>170</span>
+<span class='line-number'>171</span>
+<span class='line-number'>172</span>
+<span class='line-number'>173</span>
+<span class='line-number'>174</span>
+<span class='line-number'>175</span>
+<span class='line-number'>176</span>
+<span class='line-number'>177</span>
+<span class='line-number'>178</span>
+<span class='line-number'>179</span>
+<span class='line-number'>180</span>
+<span class='line-number'>181</span>
+<span class='line-number'>182</span>
+<span class='line-number'>183</span>
+<span class='line-number'>184</span>
+<span class='line-number'>185</span>
+<span class='line-number'>186</span>
+<span class='line-number'>187</span>
+<span class='line-number'>188</span>
+<span class='line-number'>189</span>
+<span class='line-number'>190</span>
+<span class='line-number'>191</span>
+<span class='line-number'>192</span>
+<span class='line-number'>193</span>
+<span class='line-number'>194</span>
+<span class='line-number'>195</span>
+<span class='line-number'>196</span>
+<span class='line-number'>197</span>
+<span class='line-number'>198</span>
+<span class='line-number'>199</span>
+<span class='line-number'>200</span>
+<span class='line-number'>201</span>
+<span class='line-number'>202</span>
+<span class='line-number'>203</span>
+<span class='line-number'>204</span>
+<span class='line-number'>205</span>
+<span class='line-number'>206</span>
+<span class='line-number'>207</span>
+<span class='line-number'>208</span>
+<span class='line-number'>209</span>
+<span class='line-number'>210</span>
+<span class='line-number'>211</span>
+<span class='line-number'>212</span>
+<span class='line-number'>213</span>
+<span class='line-number'>214</span>
+<span class='line-number'>215</span>
+<span class='line-number'>216</span>
+<span class='line-number'>217</span>
+<span class='line-number'>218</span>
+<span class='line-number'>219</span>
+<span class='line-number'>220</span>
+<span class='line-number'>221</span>
+<span class='line-number'>222</span>
+<span class='line-number'>223</span>
+<span class='line-number'>224</span>
+<span class='line-number'>225</span>
+<span class='line-number'>226</span>
+<span class='line-number'>227</span>
+<span class='line-number'>228</span>
+<span class='line-number'>229</span>
+<span class='line-number'>230</span>
+<span class='line-number'>231</span>
+<span class='line-number'>232</span>
+<span class='line-number'>233</span>
+<span class='line-number'>234</span>
+<span class='line-number'>235</span>
+<span class='line-number'>236</span>
+<span class='line-number'>237</span>
+<span class='line-number'>238</span>
+<span class='line-number'>239</span>
+<span class='line-number'>240</span>
+<span class='line-number'>241</span>
+<span class='line-number'>242</span>
+<span class='line-number'>243</span>
+<span class='line-number'>244</span>
+<span class='line-number'>245</span>
+<span class='line-number'>246</span>
+<span class='line-number'>247</span>
+<span class='line-number'>248</span>
+<span class='line-number'>249</span>
+<span class='line-number'>250</span>
+<span class='line-number'>251</span>
+<span class='line-number'>252</span>
+<span class='line-number'>253</span>
+<span class='line-number'>254</span>
+<span class='line-number'>255</span>
+<span class='line-number'>256</span>
+<span class='line-number'>257</span>
+<span class='line-number'>258</span>
+<span class='line-number'>259</span>
+<span class='line-number'>260</span>
+<span class='line-number'>261</span>
+<span class='line-number'>262</span>
+<span class='line-number'>263</span>
+<span class='line-number'>264</span>
+<span class='line-number'>265</span>
+<span class='line-number'>266</span>
+<span class='line-number'>267</span>
+<span class='line-number'>268</span>
+<span class='line-number'>269</span>
+<span class='line-number'>270</span>
+<span class='line-number'>271</span>
+<span class='line-number'>272</span>
+<span class='line-number'>273</span>
+<span class='line-number'>274</span>
+<span class='line-number'>275</span>
+<span class='line-number'>276</span>
+<span class='line-number'>277</span>
+<span class='line-number'>278</span>
+<span class='line-number'>279</span>
+<span class='line-number'>280</span>
+<span class='line-number'>281</span>
+<span class='line-number'>282</span>
+<span class='line-number'>283</span>
+<span class='line-number'>284</span>
+<span class='line-number'>285</span>
+<span class='line-number'>286</span>
+<span class='line-number'>287</span>
+<span class='line-number'>288</span>
+<span class='line-number'>289</span>
+<span class='line-number'>290</span>
+<span class='line-number'>291</span>
+<span class='line-number'>292</span>
+<span class='line-number'>293</span>
+<span class='line-number'>294</span>
+<span class='line-number'>295</span>
+<span class='line-number'>296</span>
+<span class='line-number'>297</span>
+<span class='line-number'>298</span>
+<span class='line-number'>299</span>
+<span class='line-number'>300</span>
+<span class='line-number'>301</span>
+<span class='line-number'>302</span>
+<span class='line-number'>303</span>
+<span class='line-number'>304</span>
+<span class='line-number'>305</span>
+<span class='line-number'>306</span>
+<span class='line-number'>307</span>
+<span class='line-number'>308</span>
+<span class='line-number'>309</span>
+<span class='line-number'>310</span>
+<span class='line-number'>311</span>
+<span class='line-number'>312</span>
+<span class='line-number'>313</span>
+<span class='line-number'>314</span>
+<span class='line-number'>315</span>
+<span class='line-number'>316</span>
+<span class='line-number'>317</span>
+<span class='line-number'>318</span>
+<span class='line-number'>319</span>
+<span class='line-number'>320</span>
+<span class='line-number'>321</span>
+<span class='line-number'>322</span>
+<span class='line-number'>323</span>
+<span class='line-number'>324</span>
+<span class='line-number'>325</span>
+<span class='line-number'>326</span>
+<span class='line-number'>327</span>
+<span class='line-number'>328</span>
+<span class='line-number'>329</span>
+<span class='line-number'>330</span>
+<span class='line-number'>331</span>
+<span class='line-number'>332</span>
+<span class='line-number'>333</span>
+<span class='line-number'>334</span>
+<span class='line-number'>335</span>
+<span class='line-number'>336</span>
+<span class='line-number'>337</span>
+<span class='line-number'>338</span>
+<span class='line-number'>339</span>
+<span class='line-number'>340</span>
+<span class='line-number'>341</span>
+<span class='line-number'>342</span>
+<span class='line-number'>343</span>
+<span class='line-number'>344</span>
+<span class='line-number'>345</span>
+<span class='line-number'>346</span>
+<span class='line-number'>347</span>
+<span class='line-number'>348</span>
+<span class='line-number'>349</span>
+<span class='line-number'>350</span>
+<span class='line-number'>351</span>
+<span class='line-number'>352</span>
+<span class='line-number'>353</span>
+<span class='line-number'>354</span>
+<span class='line-number'>355</span>
+<span class='line-number'>356</span>
+<span class='line-number'>357</span>
+<span class='line-number'>358</span>
+<span class='line-number'>359</span>
+<span class='line-number'>360</span>
+<span class='line-number'>361</span>
+<span class='line-number'>362</span>
+<span class='line-number'>363</span>
+<span class='line-number'>364</span>
+<span class='line-number'>365</span>
+<span class='line-number'>366</span>
+<span class='line-number'>367</span>
+<span class='line-number'>368</span>
+<span class='line-number'>369</span>
+<span class='line-number'>370</span>
+<span class='line-number'>371</span>
+<span class='line-number'>372</span>
+<span class='line-number'>373</span>
+<span class='line-number'>374</span>
+<span class='line-number'>375</span>
+<span class='line-number'>376</span>
+<span class='line-number'>377</span>
+<span class='line-number'>378</span>
+<span class='line-number'>379</span>
+<span class='line-number'>380</span>
+<span class='line-number'>381</span>
+<span class='line-number'>382</span>
+<span class='line-number'>383</span>
+<span class='line-number'>384</span>
+<span class='line-number'>385</span>
+<span class='line-number'>386</span>
+<span class='line-number'>387</span>
+<span class='line-number'>388</span>
+<span class='line-number'>389</span>
+<span class='line-number'>390</span>
+<span class='line-number'>391</span>
+<span class='line-number'>392</span>
+<span class='line-number'>393</span>
+<span class='line-number'>394</span>
+<span class='line-number'>395</span>
+<span class='line-number'>396</span>
+<span class='line-number'>397</span>
+<span class='line-number'>398</span>
+<span class='line-number'>399</span>
+<span class='line-number'>400</span>
+<span class='line-number'>401</span>
+<span class='line-number'>402</span>
+<span class='line-number'>403</span>
+<span class='line-number'>404</span>
+<span class='line-number'>405</span>
+<span class='line-number'>406</span>
+<span class='line-number'>407</span>
+<span class='line-number'>408</span>
+<span class='line-number'>409</span>
+<span class='line-number'>410</span>
+<span class='line-number'>411</span>
+<span class='line-number'>412</span>
+<span class='line-number'>413</span>
+<span class='line-number'>414</span>
+<span class='line-number'>415</span>
+<span class='line-number'>416</span>
+<span class='line-number'>417</span>
+<span class='line-number'>418</span>
+<span class='line-number'>419</span>
+<span class='line-number'>420</span>
+<span class='line-number'>421</span>
+<span class='line-number'>422</span>
+<span class='line-number'>423</span>
+<span class='line-number'>424</span>
+<span class='line-number'>425</span>
+<span class='line-number'>426</span>
+<span class='line-number'>427</span>
+<span class='line-number'>428</span>
+<span class='line-number'>429</span>
+<span class='line-number'>430</span>
+<span class='line-number'>431</span>
+<span class='line-number'>432</span>
+<span class='line-number'>433</span>
+<span class='line-number'>434</span>
+<span class='line-number'>435</span>
+<span class='line-number'>436</span>
+<span class='line-number'>437</span>
+<span class='line-number'>438</span>
+<span class='line-number'>439</span>
+<span class='line-number'>440</span>
+<span class='line-number'>441</span>
+<span class='line-number'>442</span>
+<span class='line-number'>443</span>
+<span class='line-number'>444</span>
+<span class='line-number'>445</span>
+<span class='line-number'>446</span>
+<span class='line-number'>447</span>
+<span class='line-number'>448</span>
+<span class='line-number'>449</span>
+<span class='line-number'>450</span>
+<span class='line-number'>451</span>
+<span class='line-number'>452</span>
+<span class='line-number'>453</span>
+<span class='line-number'>454</span>
+<span class='line-number'>455</span>
+<span class='line-number'>456</span>
+<span class='line-number'>457</span>
+<span class='line-number'>458</span>
+<span class='line-number'>459</span>
+<span class='line-number'>460</span>
+<span class='line-number'>461</span>
+<span class='line-number'>462</span>
+<span class='line-number'>463</span>
+<span class='line-number'>464</span>
+<span class='line-number'>465</span>
+<span class='line-number'>466</span>
+<span class='line-number'>467</span>
+<span class='line-number'>468</span>
+<span class='line-number'>469</span>
+<span class='line-number'>470</span>
+<span class='line-number'>471</span>
+<span class='line-number'>472</span>
+<span class='line-number'>473</span>
+<span class='line-number'>474</span>
+<span class='line-number'>475</span>
+<span class='line-number'>476</span>
+<span class='line-number'>477</span>
+<span class='line-number'>478</span>
+<span class='line-number'>479</span>
+<span class='line-number'>480</span>
+<span class='line-number'>481</span>
+<span class='line-number'>482</span>
+<span class='line-number'>483</span>
+<span class='line-number'>484</span>
+<span class='line-number'>485</span>
+<span class='line-number'>486</span>
+<span class='line-number'>487</span>
+<span class='line-number'>488</span>
+<span class='line-number'>489</span>
+<span class='line-number'>490</span>
+<span class='line-number'>491</span>
+<span class='line-number'>492</span>
+<span class='line-number'>493</span>
+<span class='line-number'>494</span>
+<span class='line-number'>495</span>
+<span class='line-number'>496</span>
+<span class='line-number'>497</span>
+<span class='line-number'>498</span>
+<span class='line-number'>499</span>
+<span class='line-number'>500</span>
+<span class='line-number'>501</span>
+<span class='line-number'>502</span>
+<span class='line-number'>503</span>
+<span class='line-number'>504</span>
+<span class='line-number'>505</span>
+<span class='line-number'>506</span>
+<span class='line-number'>507</span>
+<span class='line-number'>508</span>
+<span class='line-number'>509</span>
+<span class='line-number'>510</span>
+<span class='line-number'>511</span>
+<span class='line-number'>512</span>
+<span class='line-number'>513</span>
+<span class='line-number'>514</span>
+<span class='line-number'>515</span>
+<span class='line-number'>516</span>
+<span class='line-number'>517</span>
+<span class='line-number'>518</span>
+<span class='line-number'>519</span>
+<span class='line-number'>520</span>
+<span class='line-number'>521</span>
+<span class='line-number'>522</span>
+<span class='line-number'>523</span>
+<span class='line-number'>524</span>
+<span class='line-number'>525</span>
+<span class='line-number'>526</span>
+<span class='line-number'>527</span>
+<span class='line-number'>528</span>
+<span class='line-number'>529</span>
+<span class='line-number'>530</span>
+<span class='line-number'>531</span>
+<span class='line-number'>532</span>
+<span class='line-number'>533</span>
+<span class='line-number'>534</span>
+<span class='line-number'>535</span>
+<span class='line-number'>536</span>
+<span class='line-number'>537</span>
+<span class='line-number'>538</span>
+<span class='line-number'>539</span>
+<span class='line-number'>540</span>
+<span class='line-number'>541</span>
+<span class='line-number'>542</span>
+<span class='line-number'>543</span>
+<span class='line-number'>544</span>
+<span class='line-number'>545</span>
+<span class='line-number'>546</span>
+<span class='line-number'>547</span>
+<span class='line-number'>548</span>
+<span class='line-number'>549</span>
+<span class='line-number'>550</span>
+<span class='line-number'>551</span>
+<span class='line-number'>552</span>
+<span class='line-number'>553</span>
+<span class='line-number'>554</span>
+<span class='line-number'>555</span>
+<span class='line-number'>556</span>
+<span class='line-number'>557</span>
+<span class='line-number'>558</span>
+<span class='line-number'>559</span>
+<span class='line-number'>560</span>
+<span class='line-number'>561</span>
+<span class='line-number'>562</span>
+<span class='line-number'>563</span>
+<span class='line-number'>564</span>
+<span class='line-number'>565</span>
+<span class='line-number'>566</span>
+<span class='line-number'>567</span>
+<span class='line-number'>568</span>
+<span class='line-number'>569</span>
+<span class='line-number'>570</span>
+<span class='line-number'>571</span>
+<span class='line-number'>572</span>
+<span class='line-number'>573</span>
+<span class='line-number'>574</span>
+<span class='line-number'>575</span>
+<span class='line-number'>576</span>
+<span class='line-number'>577</span>
+<span class='line-number'>578</span>
+<span class='line-number'>579</span>
+<span class='line-number'>580</span>
+<span class='line-number'>581</span>
+<span class='line-number'>582</span>
+<span class='line-number'>583</span>
+<span class='line-number'>584</span>
+<span class='line-number'>585</span>
+<span class='line-number'>586</span>
+<span class='line-number'>587</span>
+<span class='line-number'>588</span>
+<span class='line-number'>589</span>
+<span class='line-number'>590</span>
+<span class='line-number'>591</span>
+<span class='line-number'>592</span>
+<span class='line-number'>593</span>
+<span class='line-number'>594</span>
+<span class='line-number'>595</span>
+<span class='line-number'>596</span>
+<span class='line-number'>597</span>
+<span class='line-number'>598</span>
+<span class='line-number'>599</span>
+<span class='line-number'>600</span>
+<span class='line-number'>601</span>
+<span class='line-number'>602</span>
+<span class='line-number'>603</span>
+<span class='line-number'>604</span>
+<span class='line-number'>605</span>
+<span class='line-number'>606</span>
+<span class='line-number'>607</span>
+<span class='line-number'>608</span>
+<span class='line-number'>609</span>
+<span class='line-number'>610</span>
+<span class='line-number'>611</span>
+<span class='line-number'>612</span>
+<span class='line-number'>613</span>
+<span class='line-number'>614</span>
+<span class='line-number'>615</span>
+<span class='line-number'>616</span>
+<span class='line-number'>617</span>
+<span class='line-number'>618</span>
+<span class='line-number'>619</span>
+<span class='line-number'>620</span>
+<span class='line-number'>621</span>
+<span class='line-number'>622</span>
+<span class='line-number'>623</span>
+<span class='line-number'>624</span>
+<span class='line-number'>625</span>
+<span class='line-number'>626</span>
+<span class='line-number'>627</span>
+<span class='line-number'>628</span>
+<span class='line-number'>629</span>
+<span class='line-number'>630</span>
+<span class='line-number'>631</span>
+<span class='line-number'>632</span>
+<span class='line-number'>633</span>
+<span class='line-number'>634</span>
+<span class='line-number'>635</span>
+<span class='line-number'>636</span>
+<span class='line-number'>637</span>
+<span class='line-number'>638</span>
+<span class='line-number'>639</span>
+<span class='line-number'>640</span>
+<span class='line-number'>641</span>
+<span class='line-number'>642</span>
+<span class='line-number'>643</span>
+<span class='line-number'>644</span>
+<span class='line-number'>645</span>
+<span class='line-number'>646</span>
+<span class='line-number'>647</span>
+<span class='line-number'>648</span>
+<span class='line-number'>649</span>
+<span class='line-number'>650</span>
+<span class='line-number'>651</span>
+<span class='line-number'>652</span>
+<span class='line-number'>653</span>
+<span class='line-number'>654</span>
+<span class='line-number'>655</span>
+<span class='line-number'>656</span>
+<span class='line-number'>657</span>
+<span class='line-number'>658</span>
+<span class='line-number'>659</span>
+<span class='line-number'>660</span>
+<span class='line-number'>661</span>
+<span class='line-number'>662</span>
+<span class='line-number'>663</span>
+<span class='line-number'>664</span>
+<span class='line-number'>665</span>
+<span class='line-number'>666</span>
+<span class='line-number'>667</span>
+<span class='line-number'>668</span>
+<span class='line-number'>669</span>
+<span class='line-number'>670</span>
+<span class='line-number'>671</span>
+<span class='line-number'>672</span>
+<span class='line-number'>673</span>
+<span class='line-number'>674</span>
+<span class='line-number'>675</span>
+<span class='line-number'>676</span>
+<span class='line-number'>677</span>
+<span class='line-number'>678</span>
+<span class='line-number'>679</span>
+<span class='line-number'>680</span>
+<span class='line-number'>681</span>
+<span class='line-number'>682</span>
+<span class='line-number'>683</span>
+<span class='line-number'>684</span>
+<span class='line-number'>685</span>
+<span class='line-number'>686</span>
+<span class='line-number'>687</span>
+<span class='line-number'>688</span>
+<span class='line-number'>689</span>
+<span class='line-number'>690</span>
+<span class='line-number'>691</span>
+<span class='line-number'>692</span>
+<span class='line-number'>693</span>
+<span class='line-number'>694</span>
+<span class='line-number'>695</span>
+<span class='line-number'>696</span>
+<span class='line-number'>697</span>
+<span class='line-number'>698</span>
+<span class='line-number'>699</span>
+<span class='line-number'>700</span>
+<span class='line-number'>701</span>
+<span class='line-number'>702</span>
+<span class='line-number'>703</span>
+<span class='line-number'>704</span>
+<span class='line-number'>705</span>
+<span class='line-number'>706</span>
+<span class='line-number'>707</span>
+<span class='line-number'>708</span>
+<span class='line-number'>709</span>
+<span class='line-number'>710</span>
+<span class='line-number'>711</span>
+<span class='line-number'>712</span>
+<span class='line-number'>713</span>
+<span class='line-number'>714</span>
+<span class='line-number'>715</span>
+<span class='line-number'>716</span>
+<span class='line-number'>717</span>
+<span class='line-number'>718</span>
+<span class='line-number'>719</span>
+<span class='line-number'>720</span>
+<span class='line-number'>721</span>
+<span class='line-number'>722</span>
+<span class='line-number'>723</span>
+<span class='line-number'>724</span>
+<span class='line-number'>725</span>
+<span class='line-number'>726</span>
+<span class='line-number'>727</span>
+<span class='line-number'>728</span>
+<span class='line-number'>729</span>
+<span class='line-number'>730</span>
+<span class='line-number'>731</span>
+<span class='line-number'>732</span>
+<span class='line-number'>733</span>
+<span class='line-number'>734</span>
+<span class='line-number'>735</span>
+<span class='line-number'>736</span>
+<span class='line-number'>737</span>
+<span class='line-number'>738</span>
+<span class='line-number'>739</span>
+<span class='line-number'>740</span>
+<span class='line-number'>741</span>
+<span class='line-number'>742</span>
+<span class='line-number'>743</span>
+<span class='line-number'>744</span>
+<span class='line-number'>745</span>
+<span class='line-number'>746</span>
+<span class='line-number'>747</span>
+<span class='line-number'>748</span>
+<span class='line-number'>749</span>
+<span class='line-number'>750</span>
+<span class='line-number'>751</span>
+<span class='line-number'>752</span>
+<span class='line-number'>753</span>
+<span class='line-number'>754</span>
+<span class='line-number'>755</span>
+<span class='line-number'>756</span>
+<span class='line-number'>757</span>
+<span class='line-number'>758</span>
+<span class='line-number'>759</span>
+<span class='line-number'>760</span>
+<span class='line-number'>761</span>
+<span class='line-number'>762</span>
+<span class='line-number'>763</span>
+<span class='line-number'>764</span>
+<span class='line-number'>765</span>
+<span class='line-number'>766</span>
+<span class='line-number'>767</span>
+<span class='line-number'>768</span>
+<span class='line-number'>769</span>
+<span class='line-number'>770</span>
+<span class='line-number'>771</span>
+<span class='line-number'>772</span>
+<span class='line-number'>773</span>
+<span class='line-number'>774</span>
+<span class='line-number'>775</span>
+<span class='line-number'>776</span>
+<span class='line-number'>777</span>
+<span class='line-number'>778</span>
+<span class='line-number'>779</span>
+<span class='line-number'>780</span>
+<span class='line-number'>781</span>
+<span class='line-number'>782</span>
+<span class='line-number'>783</span>
+<span class='line-number'>784</span>
+<span class='line-number'>785</span>
+<span class='line-number'>786</span>
+<span class='line-number'>787</span>
+<span class='line-number'>788</span>
+<span class='line-number'>789</span>
+<span class='line-number'>790</span>
+<span class='line-number'>791</span>
+<span class='line-number'>792</span>
+<span class='line-number'>793</span>
+<span class='line-number'>794</span>
+<span class='line-number'>795</span>
+<span class='line-number'>796</span>
+<span class='line-number'>797</span>
+<span class='line-number'>798</span>
+<span class='line-number'>799</span>
+<span class='line-number'>800</span>
+<span class='line-number'>801</span>
+<span class='line-number'>802</span>
+<span class='line-number'>803</span>
+<span class='line-number'>804</span>
+<span class='line-number'>805</span>
+<span class='line-number'>806</span>
+<span class='line-number'>807</span>
+<span class='line-number'>808</span>
+<span class='line-number'>809</span>
+<span class='line-number'>810</span>
+<span class='line-number'>811</span>
+<span class='line-number'>812</span>
+<span class='line-number'>813</span>
+<span class='line-number'>814</span>
+<span class='line-number'>815</span>
+<span class='line-number'>816</span>
+<span class='line-number'>817</span>
+<span class='line-number'>818</span>
+<span class='line-number'>819</span>
+<span class='line-number'>820</span>
+<span class='line-number'>821</span>
+<span class='line-number'>822</span>
+<span class='line-number'>823</span>
+<span class='line-number'>824</span>
+<span class='line-number'>825</span>
+<span class='line-number'>826</span>
+<span class='line-number'>827</span>
+<span class='line-number'>828</span>
+<span class='line-number'>829</span>
+<span class='line-number'>830</span>
+<span class='line-number'>831</span>
+<span class='line-number'>832</span>
+<span class='line-number'>833</span>
+<span class='line-number'>834</span>
+<span class='line-number'>835</span>
+<span class='line-number'>836</span>
+<span class='line-number'>837</span>
+<span class='line-number'>838</span>
+<span class='line-number'>839</span>
+<span class='line-number'>840</span>
+<span class='line-number'>841</span>
+<span class='line-number'>842</span>
+<span class='line-number'>843</span>
+<span class='line-number'>844</span>
+<span class='line-number'>845</span>
+<span class='line-number'>846</span>
+<span class='line-number'>847</span>
+<span class='line-number'>848</span>
+<span class='line-number'>849</span>
+<span class='line-number'>850</span>
+<span class='line-number'>851</span>
+<span class='line-number'>852</span>
+<span class='line-number'>853</span>
+<span class='line-number'>854</span>
+<span class='line-number'>855</span>
+<span class='line-number'>856</span>
+<span class='line-number'>857</span>
+<span class='line-number'>858</span>
+<span class='line-number'>859</span>
+<span class='line-number'>860</span>
+<span class='line-number'>861</span>
+<span class='line-number'>862</span>
+<span class='line-number'>863</span>
+<span class='line-number'>864</span>
+<span class='line-number'>865</span>
+<span class='line-number'>866</span>
+<span class='line-number'>867</span>
+<span class='line-number'>868</span>
+<span class='line-number'>869</span>
+<span class='line-number'>870</span>
+<span class='line-number'>871</span>
+<span class='line-number'>872</span>
+<span class='line-number'>873</span>
+<span class='line-number'>874</span>
+<span class='line-number'>875</span>
+<span class='line-number'>876</span>
+<span class='line-number'>877</span>
+<span class='line-number'>878</span>
+<span class='line-number'>879</span>
+<span class='line-number'>880</span>
+<span class='line-number'>881</span>
+<span class='line-number'>882</span>
+<span class='line-number'>883</span>
+<span class='line-number'>884</span>
+<span class='line-number'>885</span>
+<span class='line-number'>886</span>
+<span class='line-number'>887</span>
+<span class='line-number'>888</span>
+<span class='line-number'>889</span>
+<span class='line-number'>890</span>
+<span class='line-number'>891</span>
+<span class='line-number'>892</span>
+<span class='line-number'>893</span>
+<span class='line-number'>894</span>
+<span class='line-number'>895</span>
+<span class='line-number'>896</span>
+<span class='line-number'>897</span>
+<span class='line-number'>898</span>
+<span class='line-number'>899</span>
+<span class='line-number'>900</span>
+<span class='line-number'>901</span>
+<span class='line-number'>902</span>
+<span class='line-number'>903</span>
+<span class='line-number'>904</span>
+<span class='line-number'>905</span>
+<span class='line-number'>906</span>
+<span class='line-number'>907</span>
+<span class='line-number'>908</span>
+<span class='line-number'>909</span>
+<span class='line-number'>910</span>
+<span class='line-number'>911</span>
+<span class='line-number'>912</span>
+<span class='line-number'>913</span>
+<span class='line-number'>914</span>
+<span class='line-number'>915</span>
+<span class='line-number'>916</span>
+<span class='line-number'>917</span>
+<span class='line-number'>918</span>
+<span class='line-number'>919</span>
+<span class='line-number'>920</span>
+<span class='line-number'>921</span>
+<span class='line-number'>922</span>
+<span class='line-number'>923</span>
+<span class='line-number'>924</span>
+<span class='line-number'>925</span>
+<span class='line-number'>926</span>
+<span class='line-number'>927</span>
+<span class='line-number'>928</span>
+<span class='line-number'>929</span>
+<span class='line-number'>930</span>
+<span class='line-number'>931</span>
+<span class='line-number'>932</span>
+<span class='line-number'>933</span>
+<span class='line-number'>934</span>
+<span class='line-number'>935</span>
+<span class='line-number'>936</span>
+<span class='line-number'>937</span>
+<span class='line-number'>938</span>
+<span class='line-number'>939</span>
+<span class='line-number'>940</span>
+<span class='line-number'>941</span>
+<span class='line-number'>942</span>
+<span class='line-number'>943</span>
+<span class='line-number'>944</span>
+<span class='line-number'>945</span>
+<span class='line-number'>946</span>
+<span class='line-number'>947</span>
+<span class='line-number'>948</span>
+<span class='line-number'>949</span>
+<span class='line-number'>950</span>
+<span class='line-number'>951</span>
+<span class='line-number'>952</span>
+<span class='line-number'>953</span>
+<span class='line-number'>954</span>
+<span class='line-number'>955</span>
+<span class='line-number'>956</span>
+<span class='line-number'>957</span>
+<span class='line-number'>958</span>
+<span class='line-number'>959</span>
+<span class='line-number'>960</span>
+<span class='line-number'>961</span>
+<span class='line-number'>962</span>
+<span class='line-number'>963</span>
+<span class='line-number'>964</span>
+<span class='line-number'>965</span>
+<span class='line-number'>966</span>
+<span class='line-number'>967</span>
+<span class='line-number'>968</span>
+<span class='line-number'>969</span>
+<span class='line-number'>970</span>
+<span class='line-number'>971</span>
+<span class='line-number'>972</span>
+<span class='line-number'>973</span>
+<span class='line-number'>974</span>
+<span class='line-number'>975</span>
+<span class='line-number'>976</span>
+<span class='line-number'>977</span>
+<span class='line-number'>978</span>
+<span class='line-number'>979</span>
+<span class='line-number'>980</span>
+<span class='line-number'>981</span>
+<span class='line-number'>982</span>
+<span class='line-number'>983</span>
+<span class='line-number'>984</span>
+<span class='line-number'>985</span>
+<span class='line-number'>986</span>
+<span class='line-number'>987</span>
+<span class='line-number'>988</span>
+<span class='line-number'>989</span>
+<span class='line-number'>990</span>
+<span class='line-number'>991</span>
+<span class='line-number'>992</span>
+<span class='line-number'>993</span>
+<span class='line-number'>994</span>
+<span class='line-number'>995</span>
+<span class='line-number'>996</span>
+<span class='line-number'>997</span>
+<span class='line-number'>998</span>
+<span class='line-number'>999</span>
+<span class='line-number'>1000</span>
+<span class='line-number'>1001</span>
+<span class='line-number'>1002</span>
+<span class='line-number'>1003</span>
+<span class='line-number'>1004</span>
+<span class='line-number'>1005</span>
+<span class='line-number'>1006</span>
+<span class='line-number'>1007</span>
+<span class='line-number'>1008</span>
+<span class='line-number'>1009</span>
+<span class='line-number'>1010</span>
+<span class='line-number'>1011</span>
+<span class='line-number'>1012</span>
+<span class='line-number'>1013</span>
+<span class='line-number'>1014</span>
+<span class='line-number'>1015</span>
+<span class='line-number'>1016</span>
+<span class='line-number'>1017</span>
+<span class='line-number'>1018</span>
+<span class='line-number'>1019</span>
+<span class='line-number'>1020</span>
+<span class='line-number'>1021</span>
+<span class='line-number'>1022</span>
+<span class='line-number'>1023</span>
+<span class='line-number'>1024</span>
+<span class='line-number'>1025</span>
+<span class='line-number'>1026</span>
+<span class='line-number'>1027</span>
+<span class='line-number'>1028</span>
+<span class='line-number'>1029</span>
+<span class='line-number'>1030</span>
+<span class='line-number'>1031</span>
+<span class='line-number'>1032</span>
+<span class='line-number'>1033</span>
+<span class='line-number'>1034</span>
+<span class='line-number'>1035</span>
+<span class='line-number'>1036</span>
+<span class='line-number'>1037</span>
+<span class='line-number'>1038</span>
+<span class='line-number'>1039</span>
+<span class='line-number'>1040</span>
+<span class='line-number'>1041</span>
+<span class='line-number'>1042</span>
+<span class='line-number'>1043</span>
+<span class='line-number'>1044</span>
+<span class='line-number'>1045</span>
+<span class='line-number'>1046</span>
+<span class='line-number'>1047</span>
+<span class='line-number'>1048</span>
+<span class='line-number'>1049</span>
+<span class='line-number'>1050</span>
+<span class='line-number'>1051</span>
+<span class='line-number'>1052</span>
+<span class='line-number'>1053</span>
+<span class='line-number'>1054</span>
+<span class='line-number'>1055</span>
+<span class='line-number'>1056</span>
+<span class='line-number'>1057</span>
+<span class='line-number'>1058</span>
+<span class='line-number'>1059</span>
+<span class='line-number'>1060</span>
+<span class='line-number'>1061</span>
+<span class='line-number'>1062</span>
+<span class='line-number'>1063</span>
+<span class='line-number'>1064</span>
+<span class='line-number'>1065</span>
+<span class='line-number'>1066</span>
+<span class='line-number'>1067</span>
+<span class='line-number'>1068</span>
+<span class='line-number'>1069</span>
+<span class='line-number'>1070</span>
+<span class='line-number'>1071</span>
+<span class='line-number'>1072</span>
+<span class='line-number'>1073</span>
+<span class='line-number'>1074</span>
+<span class='line-number'>1075</span>
+<span class='line-number'>1076</span>
+<span class='line-number'>1077</span>
+<span class='line-number'>1078</span>
+<span class='line-number'>1079</span>
+<span class='line-number'>1080</span>
+<span class='line-number'>1081</span>
+<span class='line-number'>1082</span>
+<span class='line-number'>1083</span>
+<span class='line-number'>1084</span>
+<span class='line-number'>1085</span>
+<span class='line-number'>1086</span>
+<span class='line-number'>1087</span>
+<span class='line-number'>1088</span>
+<span class='line-number'>1089</span>
+<span class='line-number'>1090</span>
+<span class='line-number'>1091</span>
+<span class='line-number'>1092</span>
+<span class='line-number'>1093</span>
+<span class='line-number'>1094</span>
+<span class='line-number'>1095</span>
+<span class='line-number'>1096</span>
+<span class='line-number'>1097</span>
+<span class='line-number'>1098</span>
+<span class='line-number'>1099</span>
+<span class='line-number'>1100</span>
+<span class='line-number'>1101</span>
+<span class='line-number'>1102</span>
+<span class='line-number'>1103</span>
+<span class='line-number'>1104</span>
+<span class='line-number'>1105</span>
+<span class='line-number'>1106</span>
+<span class='line-number'>1107</span>
+<span class='line-number'>1108</span>
+<span class='line-number'>1109</span>
+<span class='line-number'>1110</span>
+<span class='line-number'>1111</span>
+<span class='line-number'>1112</span>
+<span class='line-number'>1113</span>
+<span class='line-number'>1114</span>
+<span class='line-number'>1115</span>
+<span class='line-number'>1116</span>
+<span class='line-number'>1117</span>
+<span class='line-number'>1118</span>
+<span class='line-number'>1119</span>
+<span class='line-number'>1120</span>
+<span class='line-number'>1121</span>
+<span class='line-number'>1122</span>
+<span class='line-number'>1123</span>
+<span class='line-number'>1124</span>
+<span class='line-number'>1125</span>
+<span class='line-number'>1126</span>
+<span class='line-number'>1127</span>
+<span class='line-number'>1128</span>
+<span class='line-number'>1129</span>
+<span class='line-number'>1130</span>
+<span class='line-number'>1131</span>
+<span class='line-number'>1132</span>
+<span class='line-number'>1133</span>
+<span class='line-number'>1134</span>
+<span class='line-number'>1135</span>
+<span class='line-number'>1136</span>
+<span class='line-number'>1137</span>
+<span class='line-number'>1138</span>
+<span class='line-number'>1139</span>
+<span class='line-number'>1140</span>
+<span class='line-number'>1141</span>
+<span class='line-number'>1142</span>
+<span class='line-number'>1143</span>
+<span class='line-number'>1144</span>
+<span class='line-number'>1145</span>
+<span class='line-number'>1146</span>
+<span class='line-number'>1147</span>
+<span class='line-number'>1148</span>
+<span class='line-number'>1149</span>
+<span class='line-number'>1150</span>
+<span class='line-number'>1151</span>
+<span class='line-number'>1152</span>
+<span class='line-number'>1153</span>
+<span class='line-number'>1154</span>
+<span class='line-number'>1155</span>
+<span class='line-number'>1156</span>
+<span class='line-number'>1157</span>
+<span class='line-number'>1158</span>
+<span class='line-number'>1159</span>
+<span class='line-number'>1160</span>
+<span class='line-number'>1161</span>
+<span class='line-number'>1162</span>
+<span class='line-number'>1163</span>
+<span class='line-number'>1164</span>
+<span class='line-number'>1165</span>
+<span class='line-number'>1166</span>
+<span class='line-number'>1167</span>
+<span class='line-number'>1168</span>
+<span class='line-number'>1169</span>
+<span class='line-number'>1170</span>
+<span class='line-number'>1171</span>
+<span class='line-number'>1172</span>
+<span class='line-number'>1173</span>
+<span class='line-number'>1174</span>
+<span class='line-number'>1175</span>
+<span class='line-number'>1176</span>
+<span class='line-number'>1177</span>
+<span class='line-number'>1178</span>
+<span class='line-number'>1179</span>
+<span class='line-number'>1180</span>
+<span class='line-number'>1181</span>
+<span class='line-number'>1182</span>
+<span class='line-number'>1183</span>
+<span class='line-number'>1184</span>
+<span class='line-number'>1185</span>
+<span class='line-number'>1186</span>
+<span class='line-number'>1187</span>
+<span class='line-number'>1188</span>
+<span class='line-number'>1189</span>
+<span class='line-number'>1190</span>
+<span class='line-number'>1191</span>
+<span class='line-number'>1192</span>
+<span class='line-number'>1193</span>
+<span class='line-number'>1194</span>
+<span class='line-number'>1195</span>
+<span class='line-number'>1196</span>
+<span class='line-number'>1197</span>
+<span class='line-number'>1198</span>
+<span class='line-number'>1199</span>
+<span class='line-number'>1200</span>
+<span class='line-number'>1201</span>
+<span class='line-number'>1202</span>
+<span class='line-number'>1203</span>
+<span class='line-number'>1204</span>
+<span class='line-number'>1205</span>
+<span class='line-number'>1206</span>
+<span class='line-number'>1207</span>
+<span class='line-number'>1208</span>
+<span class='line-number'>1209</span>
+<span class='line-number'>1210</span>
+<span class='line-number'>1211</span>
+<span class='line-number'>1212</span>
+<span class='line-number'>1213</span>
+<span class='line-number'>1214</span>
+<span class='line-number'>1215</span>
+<span class='line-number'>1216</span>
+<span class='line-number'>1217</span>
+<span class='line-number'>1218</span>
+<span class='line-number'>1219</span>
+<span class='line-number'>1220</span>
+<span class='line-number'>1221</span>
+<span class='line-number'>1222</span>
+<span class='line-number'>1223</span>
+<span class='line-number'>1224</span>
+<span class='line-number'>1225</span>
+<span class='line-number'>1226</span>
+<span class='line-number'>1227</span>
+<span class='line-number'>1228</span>
+<span class='line-number'>1229</span>
+<span class='line-number'>1230</span>
+<span class='line-number'>1231</span>
+<span class='line-number'>1232</span>
+<span class='line-number'>1233</span>
+<span class='line-number'>1234</span>
+<span class='line-number'>1235</span>
+<span class='line-number'>1236</span>
+<span class='line-number'>1237</span>
+<span class='line-number'>1238</span>
+<span class='line-number'>1239</span>
+<span class='line-number'>1240</span>
+<span class='line-number'>1241</span>
+<span class='line-number'>1242</span>
+<span class='line-number'>1243</span>
+<span class='line-number'>1244</span>
+<span class='line-number'>1245</span>
+<span class='line-number'>1246</span>
+<span class='line-number'>1247</span>
+<span class='line-number'>1248</span>
+<span class='line-number'>1249</span>
+<span class='line-number'>1250</span>
+<span class='line-number'>1251</span>
+<span class='line-number'>1252</span>
+<span class='line-number'>1253</span>
+<span class='line-number'>1254</span>
+<span class='line-number'>1255</span>
+<span class='line-number'>1256</span>
+<span class='line-number'>1257</span>
+<span class='line-number'>1258</span>
+<span class='line-number'>1259</span>
+<span class='line-number'>1260</span>
+<span class='line-number'>1261</span>
+<span class='line-number'>1262</span>
+<span class='line-number'>1263</span>
+<span class='line-number'>1264</span>
+<span class='line-number'>1265</span>
+<span class='line-number'>1266</span>
+<span class='line-number'>1267</span>
+<span class='line-number'>1268</span>
+<span class='line-number'>1269</span>
+<span class='line-number'>1270</span>
+<span class='line-number'>1271</span>
+<span class='line-number'>1272</span>
+<span class='line-number'>1273</span>
+<span class='line-number'>1274</span>
+<span class='line-number'>1275</span>
+<span class='line-number'>1276</span>
+<span class='line-number'>1277</span>
+<span class='line-number'>1278</span>
+<span class='line-number'>1279</span>
+<span class='line-number'>1280</span>
+<span class='line-number'>1281</span>
+<span class='line-number'>1282</span>
+<span class='line-number'>1283</span>
+<span class='line-number'>1284</span>
+<span class='line-number'>1285</span>
+<span class='line-number'>1286</span>
+<span class='line-number'>1287</span>
+<span class='line-number'>1288</span>
+<span class='line-number'>1289</span>
+<span class='line-number'>1290</span>
+<span class='line-number'>1291</span>
+<span class='line-number'>1292</span>
+<span class='line-number'>1293</span>
+<span class='line-number'>1294</span>
+<span class='line-number'>1295</span>
+<span class='line-number'>1296</span>
+<span class='line-number'>1297</span>
+<span class='line-number'>1298</span>
+<span class='line-number'>1299</span>
+<span class='line-number'>1300</span>
+<span class='line-number'>1301</span>
+<span class='line-number'>1302</span>
+<span class='line-number'>1303</span>
+<span class='line-number'>1304</span>
+<span class='line-number'>1305</span>
+<span class='line-number'>1306</span>
+<span class='line-number'>1307</span>
+<span class='line-number'>1308</span>
+<span class='line-number'>1309</span>
+<span class='line-number'>1310</span>
+<span class='line-number'>1311</span>
+<span class='line-number'>1312</span>
+<span class='line-number'>1313</span>
+<span class='line-number'>1314</span>
+<span class='line-number'>1315</span>
+<span class='line-number'>1316</span>
+<span class='line-number'>1317</span>
+<span class='line-number'>1318</span>
+<span class='line-number'>1319</span>
+<span class='line-number'>1320</span>
+<span class='line-number'>1321</span>
+<span class='line-number'>1322</span>
+<span class='line-number'>1323</span>
+<span class='line-number'>1324</span>
+<span class='line-number'>1325</span>
+<span class='line-number'>1326</span>
+<span class='line-number'>1327</span>
+<span class='line-number'>1328</span>
+<span class='line-number'>1329</span>
+<span class='line-number'>1330</span>
+<span class='line-number'>1331</span>
+<span class='line-number'>1332</span>
+<span class='line-number'>1333</span>
+<span class='line-number'>1334</span>
+<span class='line-number'>1335</span>
+<span class='line-number'>1336</span>
+<span class='line-number'>1337</span>
+<span class='line-number'>1338</span>
+<span class='line-number'>1339</span>
+<span class='line-number'>1340</span>
+<span class='line-number'>1341</span>
+<span class='line-number'>1342</span>
+<span class='line-number'>1343</span>
+<span class='line-number'>1344</span>
+<span class='line-number'>1345</span>
+<span class='line-number'>1346</span>
+<span class='line-number'>1347</span>
+<span class='line-number'>1348</span>
+<span class='line-number'>1349</span>
+<span class='line-number'>1350</span>
+<span class='line-number'>1351</span>
+<span class='line-number'>1352</span>
+<span class='line-number'>1353</span>
+<span class='line-number'>1354</span>
+<span class='line-number'>1355</span>
+<span class='line-number'>1356</span>
+<span class='line-number'>1357</span>
+<span class='line-number'>1358</span>
+<span class='line-number'>1359</span>
+<span class='line-number'>1360</span>
+<span class='line-number'>1361</span>
+<span class='line-number'>1362</span>
+<span class='line-number'>1363</span>
+<span class='line-number'>1364</span>
+<span class='line-number'>1365</span>
+<span class='line-number'>1366</span>
+<span class='line-number'>1367</span>
+<span class='line-number'>1368</span>
+<span class='line-number'>1369</span>
+<span class='line-number'>1370</span>
+<span class='line-number'>1371</span>
+<span class='line-number'>1372</span>
+<span class='line-number'>1373</span>
+<span class='line-number'>1374</span>
+<span class='line-number'>1375</span>
+<span class='line-number'>1376</span>
+<span class='line-number'>1377</span>
+<span class='line-number'>1378</span>
+<span class='line-number'>1379</span>
+<span class='line-number'>1380</span>
+<span class='line-number'>1381</span>
+<span class='line-number'>1382</span>
+<span class='line-number'>1383</span>
+<span class='line-number'>1384</span>
+<span class='line-number'>1385</span>
+<span class='line-number'>1386</span>
+<span class='line-number'>1387</span>
+<span class='line-number'>1388</span>
+<span class='line-number'>1389</span>
+<span class='line-number'>1390</span>
+<span class='line-number'>1391</span>
+<span class='line-number'>1392</span>
+<span class='line-number'>1393</span>
+<span class='line-number'>1394</span>
+<span class='line-number'>1395</span>
+<span class='line-number'>1396</span>
+<span class='line-number'>1397</span>
+<span class='line-number'>1398</span>
+<span class='line-number'>1399</span>
+<span class='line-number'>1400</span>
+<span class='line-number'>1401</span>
+<span class='line-number'>1402</span>
+<span class='line-number'>1403</span>
+<span class='line-number'>1404</span>
+<span class='line-number'>1405</span>
+<span class='line-number'>1406</span>
+<span class='line-number'>1407</span>
+<span class='line-number'>1408</span>
+<span class='line-number'>1409</span>
+<span class='line-number'>1410</span>
+<span class='line-number'>1411</span>
+<span class='line-number'>1412</span>
+<span class='line-number'>1413</span>
+<span class='line-number'>1414</span>
+<span class='line-number'>1415</span>
+<span class='line-number'>1416</span>
+<span class='line-number'>1417</span>
+<span class='line-number'>1418</span>
+<span class='line-number'>1419</span>
+<span class='line-number'>1420</span>
+<span class='line-number'>1421</span>
+<span class='line-number'>1422</span>
+<span class='line-number'>1423</span>
+<span class='line-number'>1424</span>
+<span class='line-number'>1425</span>
+<span class='line-number'>1426</span>
+<span class='line-number'>1427</span>
+<span class='line-number'>1428</span>
+<span class='line-number'>1429</span>
+<span class='line-number'>1430</span>
+<span class='line-number'>1431</span>
+<span class='line-number'>1432</span>
+<span class='line-number'>1433</span>
+<span class='line-number'>1434</span>
+<span class='line-number'>1435</span>
+<span class='line-number'>1436</span>
+<span class='line-number'>1437</span>
+<span class='line-number'>1438</span>
+<span class='line-number'>1439</span>
+<span class='line-number'>1440</span>
+<span class='line-number'>1441</span>
+<span class='line-number'>1442</span>
+<span class='line-number'>1443</span>
+<span class='line-number'>1444</span>
+<span class='line-number'>1445</span>
+<span class='line-number'>1446</span>
+<span class='line-number'>1447</span>
+<span class='line-number'>1448</span>
+<span class='line-number'>1449</span>
+<span class='line-number'>1450</span>
+<span class='line-number'>1451</span>
+<span class='line-number'>1452</span>
+<span class='line-number'>1453</span>
+<span class='line-number'>1454</span>
+<span class='line-number'>1455</span>
+<span class='line-number'>1456</span>
+<span class='line-number'>1457</span>
+<span class='line-number'>1458</span>
+<span class='line-number'>1459</span>
+<span class='line-number'>1460</span>
+<span class='line-number'>1461</span>
+<span class='line-number'>1462</span>
+<span class='line-number'>1463</span>
+<span class='line-number'>1464</span>
+<span class='line-number'>1465</span>
+<span class='line-number'>1466</span>
+<span class='line-number'>1467</span>
+<span class='line-number'>1468</span>
+<span class='line-number'>1469</span>
+<span class='line-number'>1470</span>
+<span class='line-number'>1471</span>
+<span class='line-number'>1472</span>
+<span class='line-number'>1473</span>
+<span class='line-number'>1474</span>
+<span class='line-number'>1475</span>
+<span class='line-number'>1476</span>
+<span class='line-number'>1477</span>
+<span class='line-number'>1478</span>
+<span class='line-number'>1479</span>
+<span class='line-number'>1480</span>
+<span class='line-number'>1481</span>
+<span class='line-number'>1482</span>
+<span class='line-number'>1483</span>
+<span class='line-number'>1484</span>
+<span class='line-number'>1485</span>
+<span class='line-number'>1486</span>
+<span class='line-number'>1487</span>
+<span class='line-number'>1488</span>
+<span class='line-number'>1489</span>
+<span class='line-number'>1490</span>
+<span class='line-number'>1491</span>
+<span class='line-number'>1492</span>
+<span class='line-number'>1493</span>
+<span class='line-number'>1494</span>
+<span class='line-number'>1495</span>
+<span class='line-number'>1496</span>
+<span class='line-number'>1497</span>
+<span class='line-number'>1498</span>
+<span class='line-number'>1499</span>
+<span class='line-number'>1500</span>
+<span class='line-number'>1501</span>
+<span class='line-number'>1502</span>
+<span class='line-number'>1503</span>
+<span class='line-number'>1504</span>
+<span class='line-number'>1505</span>
+<span class='line-number'>1506</span>
+<span class='line-number'>1507</span>
+<span class='line-number'>1508</span>
+<span class='line-number'>1509</span>
+<span class='line-number'>1510</span>
+<span class='line-number'>1511</span>
+<span class='line-number'>1512</span>
+<span class='line-number'>1513</span>
+<span class='line-number'>1514</span>
+<span class='line-number'>1515</span>
+<span class='line-number'>1516</span>
+<span class='line-number'>1517</span>
+<span class='line-number'>1518</span>
+<span class='line-number'>1519</span>
+<span class='line-number'>1520</span>
+<span class='line-number'>1521</span>
+<span class='line-number'>1522</span>
+<span class='line-number'>1523</span>
+<span class='line-number'>1524</span>
+<span class='line-number'>1525</span>
+<span class='line-number'>1526</span>
+<span class='line-number'>1527</span>
+<span class='line-number'>1528</span>
+<span class='line-number'>1529</span>
+<span class='line-number'>1530</span>
+<span class='line-number'>1531</span>
+<span class='line-number'>1532</span>
+<span class='line-number'>1533</span>
+<span class='line-number'>1534</span>
+<span class='line-number'>1535</span>
+<span class='line-number'>1536</span>
+<span class='line-number'>1537</span>
+<span class='line-number'>1538</span>
+<span class='line-number'>1539</span>
+<span class='line-number'>1540</span>
+<span class='line-number'>1541</span>
+<span class='line-number'>1542</span>
+<span class='line-number'>1543</span>
+<span class='line-number'>1544</span>
+<span class='line-number'>1545</span>
+<span class='line-number'>1546</span>
+<span class='line-number'>1547</span>
+<span class='line-number'>1548</span>
+<span class='line-number'>1549</span>
+<span class='line-number'>1550</span>
+<span class='line-number'>1551</span>
+<span class='line-number'>1552</span>
+<span class='line-number'>1553</span>
+<span class='line-number'>1554</span>
+<span class='line-number'>1555</span>
+<span class='line-number'>1556</span>
+<span class='line-number'>1557</span>
+<span class='line-number'>1558</span>
+<span class='line-number'>1559</span>
+<span class='line-number'>1560</span>
+<span class='line-number'>1561</span>
+<span class='line-number'>1562</span>
+<span class='line-number'>1563</span>
+<span class='line-number'>1564</span>
+<span class='line-number'>1565</span>
+<span class='line-number'>1566</span>
+<span class='line-number'>1567</span>
+<span class='line-number'>1568</span>
+<span class='line-number'>1569</span>
+<span class='line-number'>1570</span>
+<span class='line-number'>1571</span>
+<span class='line-number'>1572</span>
+<span class='line-number'>1573</span>
+<span class='line-number'>1574</span>
+<span class='line-number'>1575</span>
+<span class='line-number'>1576</span>
+<span class='line-number'>1577</span>
+<span class='line-number'>1578</span>
+<span class='line-number'>1579</span>
+<span class='line-number'>1580</span>
+<span class='line-number'>1581</span>
+<span class='line-number'>1582</span>
+<span class='line-number'>1583</span>
+<span class='line-number'>1584</span>
+<span class='line-number'>1585</span>
+<span class='line-number'>1586</span>
+<span class='line-number'>1587</span>
+<span class='line-number'>1588</span>
+<span class='line-number'>1589</span>
+<span class='line-number'>1590</span>
+<span class='line-number'>1591</span>
+<span class='line-number'>1592</span>
+<span class='line-number'>1593</span>
+<span class='line-number'>1594</span>
+<span class='line-number'>1595</span>
+<span class='line-number'>1596</span>
+<span class='line-number'>1597</span>
+<span class='line-number'>1598</span>
+<span class='line-number'>1599</span>
+<span class='line-number'>1600</span>
+<span class='line-number'>1601</span>
+<span class='line-number'>1602</span>
+<span class='line-number'>1603</span>
+<span class='line-number'>1604</span>
+<span class='line-number'>1605</span>
+<span class='line-number'>1606</span>
+<span class='line-number'>1607</span>
+<span class='line-number'>1608</span>
+<span class='line-number'>1609</span>
+<span class='line-number'>1610</span>
+<span class='line-number'>1611</span>
+<span class='line-number'>1612</span>
+<span class='line-number'>1613</span>
+<span class='line-number'>1614</span>
+<span class='line-number'>1615</span>
+<span class='line-number'>1616</span>
+<span class='line-number'>1617</span>
+<span class='line-number'>1618</span>
+<span class='line-number'>1619</span>
+<span class='line-number'>1620</span>
+<span class='line-number'>1621</span>
+<span class='line-number'>1622</span>
+<span class='line-number'>1623</span>
+<span class='line-number'>1624</span>
+<span class='line-number'>1625</span>
+<span class='line-number'>1626</span>
+<span class='line-number'>1627</span>
+<span class='line-number'>1628</span>
+<span class='line-number'>1629</span>
+<span class='line-number'>1630</span>
+<span class='line-number'>1631</span>
+<span class='line-number'>1632</span>
+<span class='line-number'>1633</span>
+<span class='line-number'>1634</span>
+<span class='line-number'>1635</span>
+<span class='line-number'>1636</span>
+<span class='line-number'>1637</span>
+<span class='line-number'>1638</span>
+<span class='line-number'>1639</span>
+<span class='line-number'>1640</span>
+<span class='line-number'>1641</span>
+<span class='line-number'>1642</span>
+<span class='line-number'>1643</span>
+<span class='line-number'>1644</span>
+<span class='line-number'>1645</span>
+<span class='line-number'>1646</span>
+<span class='line-number'>1647</span>
+<span class='line-number'>1648</span>
+<span class='line-number'>1649</span>
+<span class='line-number'>1650</span>
+<span class='line-number'>1651</span>
+<span class='line-number'>1652</span>
+<span class='line-number'>1653</span>
+<span class='line-number'>1654</span>
+<span class='line-number'>1655</span>
+<span class='line-number'>1656</span>
+<span class='line-number'>1657</span>
+<span class='line-number'>1658</span>
+<span class='line-number'>1659</span>
+<span class='line-number'>1660</span>
+<span class='line-number'>1661</span>
+<span class='line-number'>1662</span>
+<span class='line-number'>1663</span>
+<span class='line-number'>1664</span>
+<span class='line-number'>1665</span>
+<span class='line-number'>1666</span>
+<span class='line-number'>1667</span>
+<span class='line-number'>1668</span>
+<span class='line-number'>1669</span>
+<span class='line-number'>1670</span>
+<span class='line-number'>1671</span>
+<span class='line-number'>1672</span>
+<span class='line-number'>1673</span>
+<span class='line-number'>1674</span>
+<span class='line-number'>1675</span>
+<span class='line-number'>1676</span>
+<span class='line-number'>1677</span>
+<span class='line-number'>1678</span>
+<span class='line-number'>1679</span>
+<span class='line-number'>1680</span>
+<span class='line-number'>1681</span>
+<span class='line-number'>1682</span>
+<span class='line-number'>1683</span>
+<span class='line-number'>1684</span>
+<span class='line-number'>1685</span>
+<span class='line-number'>1686</span>
+<span class='line-number'>1687</span>
+<span class='line-number'>1688</span>
+<span class='line-number'>1689</span>
+<span class='line-number'>1690</span>
+<span class='line-number'>1691</span>
+<span class='line-number'>1692</span>
+<span class='line-number'>1693</span>
+<span class='line-number'>1694</span>
+<span class='line-number'>1695</span>
+<span class='line-number'>1696</span>
+<span class='line-number'>1697</span>
+<span class='line-number'>1698</span>
+<span class='line-number'>1699</span>
+<span class='line-number'>1700</span>
+<span class='line-number'>1701</span>
+<span class='line-number'>1702</span>
+<span class='line-number'>1703</span>
+<span class='line-number'>1704</span>
+<span class='line-number'>1705</span>
+<span class='line-number'>1706</span>
+<span class='line-number'>1707</span>
+<span class='line-number'>1708</span>
+<span class='line-number'>1709</span>
+<span class='line-number'>1710</span>
+<span class='line-number'>1711</span>
+<span class='line-number'>1712</span>
+<span class='line-number'>1713</span>
+<span class='line-number'>1714</span>
+<span class='line-number'>1715</span>
+<span class='line-number'>1716</span>
+<span class='line-number'>1717</span>
+<span class='line-number'>1718</span>
+<span class='line-number'>1719</span>
+<span class='line-number'>1720</span>
+<span class='line-number'>1721</span>
+<span class='line-number'>1722</span>
+<span class='line-number'>1723</span>
+<span class='line-number'>1724</span>
+<span class='line-number'>1725</span>
+<span class='line-number'>1726</span>
+<span class='line-number'>1727</span>
+<span class='line-number'>1728</span>
+<span class='line-number'>1729</span>
+<span class='line-number'>1730</span>
+<span class='line-number'>1731</span>
+<span class='line-number'>1732</span>
+<span class='line-number'>1733</span>
+<span class='line-number'>1734</span>
+<span class='line-number'>1735</span>
+<span class='line-number'>1736</span>
+<span class='line-number'>1737</span>
+<span class='line-number'>1738</span>
+<span class='line-number'>1739</span>
+<span class='line-number'>1740</span>
+<span class='line-number'>1741</span>
+<span class='line-number'>1742</span>
+<span class='line-number'>1743</span>
+<span class='line-number'>1744</span>
+<span class='line-number'>1745</span>
+<span class='line-number'>1746</span>
+<span class='line-number'>1747</span>
+<span class='line-number'>1748</span>
+<span class='line-number'>1749</span>
+<span class='line-number'>1750</span>
+<span class='line-number'>1751</span>
+<span class='line-number'>1752</span>
+<span class='line-number'>1753</span>
+<span class='line-number'>1754</span>
+<span class='line-number'>1755</span>
+<span class='line-number'>1756</span>
+<span class='line-number'>1757</span>
+<span class='line-number'>1758</span>
+<span class='line-number'>1759</span>
+<span class='line-number'>1760</span>
+<span class='line-number'>1761</span>
+<span class='line-number'>1762</span>
+<span class='line-number'>1763</span>
+<span class='line-number'>1764</span>
+<span class='line-number'>1765</span>
+<span class='line-number'>1766</span>
+<span class='line-number'>1767</span>
+<span class='line-number'>1768</span>
+<span class='line-number'>1769</span>
+<span class='line-number'>1770</span>
+<span class='line-number'>1771</span>
+<span class='line-number'>1772</span>
+<span class='line-number'>1773</span>
+<span class='line-number'>1774</span>
+<span class='line-number'>1775</span>
+<span class='line-number'>1776</span>
+<span class='line-number'>1777</span>
+<span class='line-number'>1778</span>
+<span class='line-number'>1779</span>
+<span class='line-number'>1780</span>
+<span class='line-number'>1781</span>
+<span class='line-number'>1782</span>
+<span class='line-number'>1783</span>
+<span class='line-number'>1784</span>
+<span class='line-number'>1785</span>
+<span class='line-number'>1786</span>
+<span class='line-number'>1787</span>
+<span class='line-number'>1788</span>
+<span class='line-number'>1789</span>
+<span class='line-number'>1790</span>
+<span class='line-number'>1791</span>
+<span class='line-number'>1792</span>
+<span class='line-number'>1793</span>
+<span class='line-number'>1794</span>
+<span class='line-number'>1795</span>
+<span class='line-number'>1796</span>
+<span class='line-number'>1797</span>
+<span class='line-number'>1798</span>
+<span class='line-number'>1799</span>
+<span class='line-number'>1800</span>
+<span class='line-number'>1801</span>
+<span class='line-number'>1802</span>
+<span class='line-number'>1803</span>
+<span class='line-number'>1804</span>
+<span class='line-number'>1805</span>
+<span class='line-number'>1806</span>
+<span class='line-number'>1807</span>
+<span class='line-number'>1808</span>
+<span class='line-number'>1809</span>
+<span class='line-number'>1810</span>
+<span class='line-number'>1811</span>
+<span class='line-number'>1812</span>
+<span class='line-number'>1813</span>
+<span class='line-number'>1814</span>
+<span class='line-number'>1815</span>
+<span class='line-number'>1816</span>
+<span class='line-number'>1817</span>
+<span class='line-number'>1818</span>
+<span class='line-number'>1819</span>
+<span class='line-number'>1820</span>
+<span class='line-number'>1821</span>
+<span class='line-number'>1822</span>
+<span class='line-number'>1823</span>
+<span class='line-number'>1824</span>
+<span class='line-number'>1825</span>
+<span class='line-number'>1826</span>
+<span class='line-number'>1827</span>
+<span class='line-number'>1828</span>
+<span class='line-number'>1829</span>
+<span class='line-number'>1830</span>
+<span class='line-number'>1831</span>
+<span class='line-number'>1832</span>
+<span class='line-number'>1833</span>
+<span class='line-number'>1834</span>
+<span class='line-number'>1835</span>
+<span class='line-number'>1836</span>
+<span class='line-number'>1837</span>
+<span class='line-number'>1838</span>
+<span class='line-number'>1839</span>
+<span class='line-number'>1840</span>
+<span class='line-number'>1841</span>
+<span class='line-number'>1842</span>
+<span class='line-number'>1843</span>
+<span class='line-number'>1844</span>
+<span class='line-number'>1845</span>
+<span class='line-number'>1846</span>
+<span class='line-number'>1847</span>
+<span class='line-number'>1848</span>
+<span class='line-number'>1849</span>
+<span class='line-number'>1850</span>
+<span class='line-number'>1851</span>
+<span class='line-number'>1852</span>
+<span class='line-number'>1853</span>
+<span class='line-number'>1854</span>
+<span class='line-number'>1855</span>
+<span class='line-number'>1856</span>
+<span class='line-number'>1857</span>
+<span class='line-number'>1858</span>
+<span class='line-number'>1859</span>
+<span class='line-number'>1860</span>
+<span class='line-number'>1861</span>
+<span class='line-number'>1862</span>
+<span class='line-number'>1863</span>
+<span class='line-number'>1864</span>
+<span class='line-number'>1865</span>
+<span class='line-number'>1866</span>
+<span class='line-number'>1867</span>
+<span class='line-number'>1868</span>
+<span class='line-number'>1869</span>
+<span class='line-number'>1870</span>
+<span class='line-number'>1871</span>
+<span class='line-number'>1872</span>
+<span class='line-number'>1873</span>
+<span class='line-number'>1874</span>
+<span class='line-number'>1875</span>
+<span class='line-number'>1876</span>
+<span class='line-number'>1877</span>
+<span class='line-number'>1878</span>
+<span class='line-number'>1879</span>
+<span class='line-number'>1880</span>
+<span class='line-number'>1881</span>
+<span class='line-number'>1882</span>
+<span class='line-number'>1883</span>
+<span class='line-number'>1884</span>
+<span class='line-number'>1885</span>
+<span class='line-number'>1886</span>
+<span class='line-number'>1887</span>
+<span class='line-number'>1888</span>
+<span class='line-number'>1889</span>
+<span class='line-number'>1890</span>
+<span class='line-number'>1891</span>
+<span class='line-number'>1892</span>
+<span class='line-number'>1893</span>
+<span class='line-number'>1894</span>
+<span class='line-number'>1895</span>
+<span class='line-number'>1896</span>
+<span class='line-number'>1897</span>
+<span class='line-number'>1898</span>
+<span class='line-number'>1899</span>
+<span class='line-number'>1900</span>
+<span class='line-number'>1901</span>
+<span class='line-number'>1902</span>
+<span class='line-number'>1903</span>
+<span class='line-number'>1904</span>
+<span class='line-number'>1905</span>
+<span class='line-number'>1906</span>
+<span class='line-number'>1907</span>
+<span class='line-number'>1908</span>
+<span class='line-number'>1909</span>
+<span class='line-number'>1910</span>
+<span class='line-number'>1911</span>
+<span class='line-number'>1912</span>
+<span class='line-number'>1913</span>
+<span class='line-number'>1914</span>
+<span class='line-number'>1915</span>
+<span class='line-number'>1916</span>
+<span class='line-number'>1917</span>
+<span class='line-number'>1918</span>
+<span class='line-number'>1919</span>
+<span class='line-number'>1920</span>
+<span class='line-number'>1921</span>
+<span class='line-number'>1922</span>
+<span class='line-number'>1923</span>
+<span class='line-number'>1924</span>
+<span class='line-number'>1925</span>
+<span class='line-number'>1926</span>
+<span class='line-number'>1927</span>
+<span class='line-number'>1928</span>
+<span class='line-number'>1929</span>
+<span class='line-number'>1930</span>
+<span class='line-number'>1931</span>
+<span class='line-number'>1932</span>
+<span class='line-number'>1933</span>
+<span class='line-number'>1934</span>
+<span class='line-number'>1935</span>
+<span class='line-number'>1936</span>
+<span class='line-number'>1937</span>
+<span class='line-number'>1938</span>
+<span class='line-number'>1939</span>
+<span class='line-number'>1940</span>
+<span class='line-number'>1941</span>
+<span class='line-number'>1942</span>
+<span class='line-number'>1943</span>
+<span class='line-number'>1944</span>
+<span class='line-number'>1945</span>
+<span class='line-number'>1946</span>
+<span class='line-number'>1947</span>
+<span class='line-number'>1948</span>
+<span class='line-number'>1949</span>
+<span class='line-number'>1950</span>
+<span class='line-number'>1951</span>
+<span class='line-number'>1952</span>
+<span class='line-number'>1953</span>
+<span class='line-number'>1954</span>
+<span class='line-number'>1955</span>
+<span class='line-number'>1956</span>
+<span class='line-number'>1957</span>
+<span class='line-number'>1958</span>
+<span class='line-number'>1959</span>
+<span class='line-number'>1960</span>
+<span class='line-number'>1961</span>
+<span class='line-number'>1962</span>
+<span class='line-number'>1963</span>
+<span class='line-number'>1964</span>
+<span class='line-number'>1965</span>
+<span class='line-number'>1966</span>
+<span class='line-number'>1967</span>
+<span class='line-number'>1968</span>
+<span class='line-number'>1969</span>
+<span class='line-number'>1970</span>
+<span class='line-number'>1971</span>
+<span class='line-number'>1972</span>
+<span class='line-number'>1973</span>
+<span class='line-number'>1974</span>
+<span class='line-number'>1975</span>
+<span class='line-number'>1976</span>
+<span class='line-number'>1977</span>
+<span class='line-number'>1978</span>
+<span class='line-number'>1979</span>
+<span class='line-number'>1980</span>
+<span class='line-number'>1981</span>
+<span class='line-number'>1982</span>
+<span class='line-number'>1983</span>
+<span class='line-number'>1984</span>
+<span class='line-number'>1985</span>
+<span class='line-number'>1986</span>
+<span class='line-number'>1987</span>
+<span class='line-number'>1988</span>
+<span class='line-number'>1989</span>
+<span class='line-number'>1990</span>
+<span class='line-number'>1991</span>
+<span class='line-number'>1992</span>
+<span class='line-number'>1993</span>
+<span class='line-number'>1994</span>
+<span class='line-number'>1995</span>
+<span class='line-number'>1996</span>
+<span class='line-number'>1997</span>
+<span class='line-number'>1998</span>
+<span class='line-number'>1999</span>
+<span class='line-number'>2000</span>
+<span class='line-number'>2001</span>
+<span class='line-number'>2002</span>
+<span class='line-number'>2003</span>
+<span class='line-number'>2004</span>
+<span class='line-number'>2005</span>
+<span class='line-number'>2006</span>
+<span class='line-number'>2007</span>
+<span class='line-number'>2008</span>
+<span class='line-number'>2009</span>
+<span class='line-number'>2010</span>
+<span class='line-number'>2011</span>
+<span class='line-number'>2012</span>
+<span class='line-number'>2013</span>
+<span class='line-number'>2014</span>
+<span class='line-number'>2015</span>
+<span class='line-number'>2016</span>
+<span class='line-number'>2017</span>
+<span class='line-number'>2018</span>
+<span class='line-number'>2019</span>
+<span class='line-number'>2020</span>
+<span class='line-number'>2021</span>
+<span class='line-number'>2022</span>
+<span class='line-number'>2023</span>
+<span class='line-number'>2024</span>
+<span class='line-number'>2025</span>
+<span class='line-number'>2026</span>
+<span class='line-number'>2027</span>
+<span class='line-number'>2028</span>
+<span class='line-number'>2029</span>
+<span class='line-number'>2030</span>
+<span class='line-number'>2031</span>
+<span class='line-number'>2032</span>
+<span class='line-number'>2033</span>
+<span class='line-number'>2034</span>
+<span class='line-number'>2035</span>
+<span class='line-number'>2036</span>
+<span class='line-number'>2037</span>
+<span class='line-number'>2038</span>
+<span class='line-number'>2039</span>
+<span class='line-number'>2040</span>
+<span class='line-number'>2041</span>
+<span class='line-number'>2042</span>
+<span class='line-number'>2043</span>
+<span class='line-number'>2044</span>
+<span class='line-number'>2045</span>
+<span class='line-number'>2046</span>
+<span class='line-number'>2047</span>
+<span class='line-number'>2048</span>
+<span class='line-number'>2049</span>
+<span class='line-number'>2050</span>
+<span class='line-number'>2051</span>
+<span class='line-number'>2052</span>
+<span class='line-number'>2053</span>
+<span class='line-number'>2054</span>
+<span class='line-number'>2055</span>
+<span class='line-number'>2056</span>
+<span class='line-number'>2057</span>
+<span class='line-number'>2058</span>
+<span class='line-number'>2059</span>
+<span class='line-number'>2060</span>
+<span class='line-number'>2061</span>
+<span class='line-number'>2062</span>
+<span class='line-number'>2063</span>
+<span class='line-number'>2064</span>
+<span class='line-number'>2065</span>
+<span class='line-number'>2066</span>
+<span class='line-number'>2067</span>
+<span class='line-number'>2068</span>
+<span class='line-number'>2069</span>
+<span class='line-number'>2070</span>
+<span class='line-number'>2071</span>
+<span class='line-number'>2072</span>
+<span class='line-number'>2073</span>
+<span class='line-number'>2074</span>
+<span class='line-number'>2075</span>
+<span class='line-number'>2076</span>
+<span class='line-number'>2077</span>
+<span class='line-number'>2078</span>
+<span class='line-number'>2079</span>
+<span class='line-number'>2080</span>
+<span class='line-number'>2081</span>
+<span class='line-number'>2082</span>
+<span class='line-number'>2083</span>
+<span class='line-number'>2084</span>
+<span class='line-number'>2085</span>
+<span class='line-number'>2086</span>
+<span class='line-number'>2087</span>
+<span class='line-number'>2088</span>
+<span class='line-number'>2089</span>
+<span class='line-number'>2090</span>
+<span class='line-number'>2091</span>
+<span class='line-number'>2092</span>
+<span class='line-number'>2093</span>
+<span class='line-number'>2094</span>
+<span class='line-number'>2095</span>
+<span class='line-number'>2096</span>
+<span class='line-number'>2097</span>
+<span class='line-number'>2098</span>
+<span class='line-number'>2099</span>
+<span class='line-number'>2100</span>
+<span class='line-number'>2101</span>
+<span class='line-number'>2102</span>
+<span class='line-number'>2103</span>
+<span class='line-number'>2104</span>
+<span class='line-number'>2105</span>
+<span class='line-number'>2106</span>
+<span class='line-number'>2107</span>
+<span class='line-number'>2108</span>
+<span class='line-number'>2109</span>
+<span class='line-number'>2110</span>
+<span class='line-number'>2111</span>
+<span class='line-number'>2112</span>
+<span class='line-number'>2113</span>
+<span class='line-number'>2114</span>
+<span class='line-number'>2115</span>
+<span class='line-number'>2116</span>
+<span class='line-number'>2117</span>
+<span class='line-number'>2118</span>
+<span class='line-number'>2119</span>
+<span class='line-number'>2120</span>
+<span class='line-number'>2121</span>
+<span class='line-number'>2122</span>
+<span class='line-number'>2123</span>
+</pre></td><td class='code'><pre><code class=''><span class='line'>&lt;/p&gt;
 </span><span class='line'>
-</span><span class='line'><span class="nt">&lt;h2&gt;</span>Say something<span class="nt">&lt;/h2&gt;</span>
+</span><span class='line'>&lt;p&gt;And:&lt;/p&gt;
 </span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;angular
+</span><span class='line'>  .module('tokenAuthApp.components.auth', [])
+</span><span class='line'>  .controller('authLoginController', authLoginController)
+</span><span class='line'>  .controller('authRegisterController', authRegisterController)
+</span><span class='line'>  .controller('authStatusController', authStatusController);
 </span><span class='line'>
-</span><span class='line'><span class="nt">&lt;p&gt;&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">ng-model=</span><span class="s">&quot;newText&quot;</span><span class="nt">&gt;</span>
-</span><span class='line'><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-default&quot;</span> <span class="na">ng-click=</span><span class="s">&quot;changeGreeting()&quot;</span><span class="nt">&gt;</span>Change!<span class="nt">&lt;/button&gt;&lt;/p&gt;</span>
+</span><span class='line'>authLoginController.$inject = ['authService'];
+</span><span class='line'>authRegisterController.$inject = ['authService'];
+</span><span class='line'>authStatusController.$inject = ['authService'];
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
 </span><span class='line'>
-</span><span class='line'><span class="nt">&lt;p</span> <span class="na">id=</span><span class="s">&quot;greeting&quot;</span><span class="nt">&gt;</span>{{ greeting }}<span class="nt">&lt;/p&gt;</span>
+</span><span class='line'>&lt;p&gt;Finally, update &lt;em&gt;config.js&lt;/em&gt;:&lt;/p&gt;
 </span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;function appConfig($routeProvider) {
+</span><span class='line'>  $routeProvider
+</span><span class='line'>    .when('/', {
+</span><span class='line'>      templateUrl: 'js/components/main/main.view.html',
+</span><span class='line'>      controller: 'mainController'
+</span><span class='line'>    })
+</span><span class='line'>    .when('/login', {
+</span><span class='line'>      templateUrl: 'js/components/auth/auth.login.view.html',
+</span><span class='line'>      controller: 'authLoginController',
+</span><span class='line'>      controllerAs: 'authLoginCtrl'
+</span><span class='line'>    })
+</span><span class='line'>    .when('/register', {
+</span><span class='line'>      templateUrl: 'js/components/auth/auth.register.view.html',
+</span><span class='line'>      controller: 'authRegisterController',
+</span><span class='line'>      controllerAs: 'authRegisterCtrl'
+</span><span class='line'>    })
+</span><span class='line'>    .when('/status', {
+</span><span class='line'>      templateUrl: 'js/components/auth/auth.status.view.html',
+</span><span class='line'>      controller: 'authStatusController',
+</span><span class='line'>      controllerAs: 'authStatusCtrl'
+</span><span class='line'>    })
+</span><span class='line'>    .otherwise({
+</span><span class='line'>      redirectTo: '/'
+</span><span class='line'>    });
+</span><span class='line'>}
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
 </span><span class='line'>
-</span><span class='line'><span class="nt">&lt;p&gt;</span>
-</span></code></pre></td></tr></table></div></figure></p>
-
-<p>Looking at the Angular code along with the HTML, we know that on the button click, <code>greeting</code> is updated with the user supplied text from the input box. Sound right? Test this out: With the app running via Gulp, navigate to <a href="http://localhost:8888/#/one">http://localhost:8888/#/one</a> and manually test the app to ensure that the controller is working as it should.</p>
-
-<p>Now since we already tested the initial state of <code>greeting</code>, let&rsquo;s write the test to ensure that the state updates on the button click:</p>
-
-<pre><code class="javascript">describe('TestOneController', function () {
-
-  beforeEach(function() {
-    browser.get('http://localhost:8888/#/one');
-  });
-
-  it('initially has a greeting', function () {
-    expect(element(by.id('greeting')).getText()).toEqual('Hello, World!');
-  });
-
-  it('clicking the button changes the greeting if text is inputed', function () {
-    element(by.css('[ng-model="newText"]')).sendKeys('Hi!');
-    element(by.css('.btn-default')).click();
-    expect(element(by.id('greeting')).getText()).toEqual('Hi!');
-  });
-
-  it('clicking the button does not change the greeting if text is not inputed', function () {
-    element(by.css('.btn-default')).click();
-    expect(element(by.id('greeting')).getText()).toEqual('Hello, World!');
-  });
-
-});
-</code></pre>
-
-<p>So, in both new test cases we&rsquo;re targeting the input form - via the global <a href="http://angular.github.io/protractor/#/locators">element</a> function - and adding text to it with the <code>sendKeys()</code> method - <code>Hi!</code> in the first test and no text in the second. Then after clicking the button, we&rsquo;re asserting that the text contained within the HTML element with an id of &ldquo;greeting&rdquo; is as expected.</p>
-
-<p>Run the tests. If all went well, you should see:</p>
-
-<pre><code class="sh">[06:15:45] Using gulpfile ~/angular-testing-tutorial/Gulpfile.js
-[06:15:45] Starting 'e2e'...
-Using the selenium server at http://localhost:4444/wd/hub
-[launcher] Running 1 instances of WebDriver
-...
-
-Finished in 3.606 seconds
-3 tests, 3 assertions, 0 failures
-
-[launcher] 0 instance(s) of WebDriver still running
-[launcher] chrome #1 passed
-Michaels-MacBook-Pro-3:angular-testing-tutorial michael$
-</code></pre>
-
-<p>Did you see Chrome open in a new window and run the tests, then close itself? It&rsquo;s super fast!! Want to run the tests in Firefox (or a different <a href="http://angular.github.io/protractor/#/browser-support">browser</a>) as well? Simply update the Protractor config file, <em>protractor.conf.js</em>, like so:</p>
-
-<pre><code class="javascript">exports.config = {
-  seleniumAddress: 'http://localhost:4444/wd/hub',
-  specs: ['tests/e2e/*.js'],
-  multiCapabilities: [{
-    browserName: 'firefox'
-  }, {
-    browserName: 'chrome'
-  }]
-};
-</code></pre>
-
-<p>Test it again. You should now see the tests run in both Chrome and Firefox simultaneously. Nice.</p>
-
-<p>Finally, to simplify the code and speed up the tests (so we only search the DOM once per element), we can assign each element to a variable:</p>
-
-<pre><code class="javascript">describe('TestOneController', function () {
-
-  var greeting = element(by.id('greeting'));
-  var textInputBox = element(by.css('[ng-model="newText"]'));
-  var changeGreetingButton = element(by.css('.btn-default'));
-
-  beforeEach(function() {
-    browser.get('http://localhost:8888/#/one');
-  });
-
-  it('initially has a greeting', function () {
-    expect(greeting.getText()).toEqual('Hello, World!');
-  });
-
-  it('clicking the button changes the greeting if text is inputed', function () {
-    textInputBox.sendKeys('Hi!');
-    changeGreetingButton.click();
-    expect(greeting.getText()).toEqual('Hi!');
-  });
-
-  it('clicking the button does not change the greeting if text is not inputed', function () {
-    textInputBox.sendKeys('');
-    changeGreetingButton.click();
-    expect(greeting.getText()).toEqual('Hello, World!');
-  });
-
-});
-</code></pre>
-
-<p>Test one last time to ensure that this refactor didn&rsquo;t break anything.</p>
-
-<h3>TestTwoController</h3>
-
-<p>Again, start with the code.</p>
-
-<p>Angular:</p>
-
-<pre><code class="sh">myApp.controller('TestTwoController', function($scope) {
-  $scope.total = 6;
-  $scope.newItem = undefined;
-  $scope.items = [1, 2, 3];
-  $scope.add = function () {
-    if(typeof $scope.newItem == 'number') {
-      $scope.items.push($scope.newItem);
-      $scope.total = 0;
-      for(var i = 0; i &lt; $scope.items.length; i++){
-        $scope.total += parseInt($scope.items[i]);
-      }
-    }
-  };
-});
-</code></pre>
-
-<p>HTML:</p>
-
-<p><figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+</span><span class='line'>&lt;p&gt;Test this out at &lt;a href="http://localhost:8888/#!/status:"&gt;http://localhost:8888/#!/status:&lt;/a&gt;&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;ul&gt;
+</span><span class='line'>&lt;li&gt;If there is a token in localStorage, you should see - &lt;code&gt;Logged In? true&lt;/code&gt;&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;Otherwise, you should see &lt;code&gt;Logged In? false&lt;/code&gt;&lt;/li&gt;
+</span><span class='line'>&lt;/ul&gt;
+</span><span class='line'>
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Finally, let&rsquo;s redirect to the status page after a user successfully registers or logs in. Update the controllers like so:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;authLoginController.$inject = ['$location', 'authService'];
+</span><span class='line'>authRegisterController.$inject = ['$location', 'authService'];
+</span><span class='line'>authStatusController.$inject = ['authService'];
+</span><span class='line'>
+</span><span class='line'>function authLoginController($location, authService) {
+</span><span class='line'>  /*jshint validthis: true */
+</span><span class='line'>  const vm = this;
+</span><span class='line'>  vm.user = {};
+</span><span class='line'>  vm.onLogin = function() {
+</span><span class='line'>    authService.login(vm.user)
+</span><span class='line'>    .then((user) =&gt; {
+</span><span class='line'>      localStorage.setItem('token', user.data.token);
+</span><span class='line'>      $location.path('/status');
+</span><span class='line'>    })
+</span><span class='line'>    .catch((err) =&gt; {
+</span><span class='line'>      console.log(err);
+</span><span class='line'>    });
+</span><span class='line'>  };
+</span><span class='line'>}
+</span><span class='line'>
+</span><span class='line'>function authRegisterController($location, authService) {
+</span><span class='line'>  /*jshint validthis: true */
+</span><span class='line'>  const vm = this;
+</span><span class='line'>  vm.user = {};
+</span><span class='line'>  vm.onRegister = function() {
+</span><span class='line'>    authService.register(vm.user)
+</span><span class='line'>    .then((user) =&gt; {
+</span><span class='line'>      localStorage.setItem('token', user.data.token);
+</span><span class='line'>      $location.path('/status');
+</span><span class='line'>    })
+</span><span class='line'>    .catch((err) =&gt; {
+</span><span class='line'>      console.log(err);
+</span><span class='line'>    });
+</span><span class='line'>  };
+</span><span class='line'>}
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Test it out!&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h2&gt;Route Restriction&lt;/h2&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Right now, all routes are open; so, regardless of whether a user is logged in or not they, they can access each route. Certain routes should be restricted if a user is not logged in, while other routes should be restricted if a user is logged in:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;ol&gt;
+</span><span class='line'>&lt;li&gt;&lt;code&gt;/&lt;/code&gt; - no restrictions&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;&lt;code&gt;/login&lt;/code&gt; - restricted when logged in&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;&lt;code&gt;/register&lt;/code&gt; - restricted when logged in&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;&lt;code&gt;status&lt;/code&gt; - restricted when not logged in&lt;/li&gt;
+</span><span class='line'>&lt;/ol&gt;
+</span><span class='line'>
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;To achieve this, add the following property to each route, replacing &lt;code&gt;false&lt;/code&gt; with &lt;code&gt;true&lt;/code&gt; for routes that you want to restrict:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;restrictions: {
+</span><span class='line'>  ensureAuthenticated: false,
+</span><span class='line'>  loginRedirect: false
+</span><span class='line'>}
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;For example:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;function appConfig($routeProvider) {
+</span><span class='line'>  $routeProvider
+</span><span class='line'>    .when('/', {
+</span><span class='line'>      templateUrl: 'js/components/main/main.view.html',
+</span><span class='line'>      controller: 'mainController',
+</span><span class='line'>      restrictions: {
+</span><span class='line'>        ensureAuthenticated: false,
+</span><span class='line'>        loginRedirect: false
+</span><span class='line'>      }
+</span><span class='line'>    })
+</span><span class='line'>    .when('/login', {
+</span><span class='line'>      templateUrl: 'js/components/auth/auth.login.view.html',
+</span><span class='line'>      controller: 'authLoginController',
+</span><span class='line'>      controllerAs: 'authLoginCtrl',
+</span><span class='line'>      restrictions: {
+</span><span class='line'>        ensureAuthenticated: false,
+</span><span class='line'>        loginRedirect: true
+</span><span class='line'>      }
+</span><span class='line'>    })
+</span><span class='line'>    .when('/register', {
+</span><span class='line'>      templateUrl: 'js/components/auth/auth.register.view.html',
+</span><span class='line'>      controller: 'authRegisterController',
+</span><span class='line'>      controllerAs: 'authRegisterCtrl',
+</span><span class='line'>      restrictions: {
+</span><span class='line'>        ensureAuthenticated: false,
+</span><span class='line'>        loginRedirect: true
+</span><span class='line'>      }
+</span><span class='line'>    })
+</span><span class='line'>    .when('/status', {
+</span><span class='line'>      templateUrl: 'js/components/auth/auth.status.view.html',
+</span><span class='line'>      controller: 'authStatusController',
+</span><span class='line'>      controllerAs: 'authStatusCtrl',
+</span><span class='line'>      restrictions: {
+</span><span class='line'>        ensureAuthenticated: true,
+</span><span class='line'>        loginRedirect: false
+</span><span class='line'>      }
+</span><span class='line'>    })
+</span><span class='line'>    .otherwise({
+</span><span class='line'>      redirectTo: '/'
+</span><span class='line'>    });
+</span><span class='line'>}
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Next, add the following function below the route handlers in &lt;em&gt;config.js&lt;/em&gt;:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;function routeStart($rootScope, $location, $route) {
+</span><span class='line'>  $rootScope.$on('$routeChangeStart', (event, next, current) =&gt; {
+</span><span class='line'>    if (next.restrictions.ensureAuthenticated) {
+</span><span class='line'>      if (!localStorage.getItem('token')) {
+</span><span class='line'>        $location.path('/login');
+</span><span class='line'>      }
+</span><span class='line'>    }
+</span><span class='line'>    if (next.restrictions.loginRedirect) {
+</span><span class='line'>      if (localStorage.getItem('token')) {
+</span><span class='line'>        $location.path('/status');
+</span><span class='line'>      }
+</span><span class='line'>    }
+</span><span class='line'>  });
+</span><span class='line'>}
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;The &lt;code&gt;$routeChangeStart&lt;/code&gt; event fires before the actual route change occurs. So, whenever a route is accessed, we check the &lt;code&gt;restrictions&lt;/code&gt; property:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;ol&gt;
+</span><span class='line'>&lt;li&gt;If &lt;code&gt;ensureAuthenticated&lt;/code&gt; is true and there is no token present, then we redirect them to the login page&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;If &lt;code&gt;loginRedirect&lt;/code&gt; is true and there&rsquo;s a token present, then we redirect them to the status page&lt;/li&gt;
+</span><span class='line'>&lt;/ol&gt;
+</span><span class='line'>
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Simple, right?&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Update:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;angular
+</span><span class='line'>  .module('tokenAuthApp.config', [])
+</span><span class='line'>  .config(appConfig)
+</span><span class='line'>  .run(routeStart);
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Then test one last time.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h2&gt;What&rsquo;s Next?&lt;/h2&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;You&rsquo;ve reached the end. Now what?&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;ol&gt;
+</span><span class='line'>&lt;li&gt;You should handle those errors in each &lt;code&gt;.catch&lt;/code&gt;.&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;Check out &lt;a href="https://github.com/sahat/satellizer"&gt;Satellizer&lt;/a&gt;. It&rsquo;s a nice token-based auth module for Angular. You can find sample code in the following repos - &lt;a href="https://github.com/mjhea0/mean-token-auth"&gt;mean-token-auth&lt;/a&gt; and &lt;a href="https://github.com/mjhea0/mean-social-token-auth"&gt;mean-social-token-auth&lt;/a&gt;.&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;Try using this app with a different back-end. Since this app is just the client, you can literally use any language/framework to write a RESTful API in.&lt;/li&gt;
+</span><span class='line'>&lt;/ol&gt;
+</span><span class='line'>
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Grab the final code from the &lt;a href="https://github.com/mjhea0/angular-token-auth"&gt;angular-token-auth&lt;/a&gt; repo. Comment below. Cheers!&lt;/p&gt;
+</span><span class='line'>]]&gt;&lt;/content&gt;
+</span><span class='line'>  &lt;/entry&gt;
+</span><span class='line'>  
+</span><span class='line'>  &lt;entry&gt;
+</span><span class='line'>    &lt;title type="html"&gt;&lt;![CDATA[Handling User Authentication With the MEAN Stack]]&gt;&lt;/title&gt;
+</span><span class='line'>    &lt;link href="http://mherman.org/blog/2015/07/02/handling-user-authentication-with-the-mean-stack/"/&gt;
+</span><span class='line'>    &lt;updated&gt;2015-07-02T07:04:00-06:00&lt;/updated&gt;
+</span><span class='line'>    &lt;id&gt;http://mherman.org/blog/2015/07/02/handling-user-authentication-with-the-mean-stack&lt;/id&gt;
+</span><span class='line'>    &lt;content type="html"&gt;&lt;![CDATA[&lt;div style="text-align:center;"&gt;
+</span><span class='line'>  &lt;img src="http://mherman.org/images/mean-auth.png" style="max-width: 100%; border:0;" alt="mean stack authentication"&gt;
+</span><span class='line'>&lt;/div&gt;
+</span><span class='line'>
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;&lt;br&gt;&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;&lt;strong&gt;This post provides a solution to the question, &ldquo;How do I handle user authentication with the MEAN Stack - MongoDB, ExpressJS, AngularJS, and NodeJS?&rdquo;.&lt;/strong&gt;&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;blockquote&gt;&lt;p&gt;Much of this post is ported from &lt;a href="https://realpython.com/blog/python/handling-user-authentication-with-angular-and-flask/"&gt;Handling User Authentication with Angular and Flask&lt;/a&gt; from &lt;a href="https://realpython.com"&gt;Real Python&lt;/a&gt;.&lt;/p&gt;&lt;/blockquote&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;&lt;em&gt;Updates:&lt;/em&gt;
+</span><span class='line'>- 02/28/2016: Updated to the latest versions of NodeJS, ExpressJS, MongoDB, and AngularJS; added a section on persistant logins.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Keep in mind that this solution posed in this tutorial is not the &lt;em&gt;only&lt;/em&gt; solution to the question at hand, and it may not even be the &lt;em&gt;right&lt;/em&gt; solution for your situation. Regardless of the solution you implement, it is important to note that since end users have full control of the browser as well as access to the front-end code, sensitive data living in your server-side API must be secure. &lt;em&gt;In other words, make certain that you implement an authentication strategy on the server-side to protect sensitive API endpoints.&lt;/em&gt;&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;That said, we need to enable the following workflow:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;ol&gt;
+</span><span class='line'>&lt;li&gt;When the client accesses the main route, an index page is served, at which point Angular takes over.&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;The Angular app immediately &ldquo;asks&rdquo; the server if a user is logged in.&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;Assuming the server indicates that a user is not logged in, the client is immediately asked to log in.&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;Once logged in, the Angular app then tracks the user&rsquo;s login status.&lt;/li&gt;
+</span><span class='line'>&lt;/ol&gt;
+</span><span class='line'>
+</span><span class='line'>
+</span><span class='line'>&lt;blockquote&gt;&lt;p&gt;This tutorial uses &lt;a href="https://nodejs.org/"&gt;NodeJS&lt;/a&gt; v4.3.1, &lt;a href="http://expressjs.com/4x/api.html"&gt;ExpressJS&lt;/a&gt; v4.13.4, &lt;a href="https://docs.mongodb.org/v3.2/"&gt;MongoDB&lt;/a&gt; v3.2.3, and &lt;a href="https://code.angularjs.org/1.4.9/docs/guide"&gt;AngularJS&lt;/a&gt; v1.4.9. For a full list of dependencies, please view the &lt;em&gt;&lt;a href="https://github.com/mjhea0/mean-auth/blob/master/package.json"&gt;package.json&lt;/a&gt;&lt;/em&gt; file.&lt;/p&gt;&lt;/blockquote&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h2&gt;Getting Started&lt;/h2&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;First, grab the boilerplate code from the &lt;a href="https://github.com/mjhea0/mean-auth/releases/tag/v1"&gt;project repo&lt;/a&gt;, install the requirements, and then test out the app:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="sh"&gt;$ npm start
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Navigate to &lt;a href="http://localhost:3000/"&gt;http://localhost:3000/&lt;/a&gt; and you should see a simple welcome message - &ldquo;Yo!&rdquo;. Once you&rsquo;re finished admiring the page, kill the server, and glance over the code within the project folder:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="sh"&gt;├── client
+</span><span class='line'>│   ├── index.html
+</span><span class='line'>│   ├── main.js
+</span><span class='line'>│   └── partials
+</span><span class='line'>│       └── home.html
+</span><span class='line'>├── package.json
+</span><span class='line'>└── server
+</span><span class='line'>    ├── app.js
+</span><span class='line'>    ├── models
+</span><span class='line'>    │   └── user.js
+</span><span class='line'>    ├── routes
+</span><span class='line'>    │   └── api.js
+</span><span class='line'>    └── server.js
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Nothing too spectacular. You can see that the back-end code resides in the &ldquo;server&rdquo; folder, while the front-end code lives in the &ldquo;client&rdquo; folder. Explore the files and folders within each.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h2&gt;Login API&lt;/h2&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Let&rsquo;s start with the back-end API. This is already built out, for your convenience. Why? The focus of this tutorial is mainly on the client-side. If you&rsquo;re looking for a back-end tutorial for setting up Passport with NodeJS, ExpressJS, and MongoDB take a look at this &lt;a href="http://mherman.org/blog/2015/01/31/local-authentication-with-passport-and-express-4/#.VZCK9xNViko"&gt;tutorial&lt;/a&gt;.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h3&gt;User Registration&lt;/h3&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Open the &ldquo;routes&rdquo; folder and locate the following code:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;router.post('/register', function(req, res) {
+</span><span class='line'>  User.register(new User({ username: req.body.username }),
+</span><span class='line'>    req.body.password, function(err, account) {
+</span><span class='line'>    if (err) {
+</span><span class='line'>      return res.status(500).json({
+</span><span class='line'>        err: err
+</span><span class='line'>      });
+</span><span class='line'>    }
+</span><span class='line'>    passport.authenticate('local')(req, res, function () {
+</span><span class='line'>      return res.status(200).json({
+</span><span class='line'>        status: 'Registration successful!'
+</span><span class='line'>      });
+</span><span class='line'>    });
+</span><span class='line'>  });
+</span><span class='line'>});
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Here, we grab the values from the payload sent with the POST request (from the client-side), create a new &lt;code&gt;User&lt;/code&gt; instance, and then attempt to add the instance to the database. If this succeeds a user is added, of course, and then we return a JSON response with a &lt;code&gt;status&lt;/code&gt; of &ldquo;success&rdquo;. If it fails, an &ldquo;error&rdquo; response is sent.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Let&rsquo;s test this via curl. Fire up the server, and then run the following command:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="sh"&gt;$ curl -H "Accept: application/json" -H \
+</span><span class='line'>"Content-type: application/json" -X POST \
+</span><span class='line'>-d '{"username": "test@test.com", "password": "test"}' \
+</span><span class='line'>http://localhost:3000/user/register
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;You should see a success message:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="sh"&gt;{
+</span><span class='line'>  "status": "Registration successful!"
+</span><span class='line'>}
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Try it again, with the exact same username and password, and you should see an error:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="sh"&gt;{
+</span><span class='line'>  "err": {
+</span><span class='line'>    "name": "UserExistsError",
+</span><span class='line'>    "message": "A user with the given username is already registered"
+</span><span class='line'>  }
+</span><span class='line'>}
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;On to the login&hellip;&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h3&gt;User Login&lt;/h3&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;router.post('/login', function(req, res, next) {
+</span><span class='line'>  passport.authenticate('local', function(err, user, info) {
+</span><span class='line'>    if (err) {
+</span><span class='line'>      return next(err);
+</span><span class='line'>    }
+</span><span class='line'>    if (!user) {
+</span><span class='line'>      return res.status(401).json({
+</span><span class='line'>        err: info
+</span><span class='line'>      });
+</span><span class='line'>    }
+</span><span class='line'>    req.logIn(user, function(err) {
+</span><span class='line'>      if (err) {
+</span><span class='line'>        return res.status(500).json({
+</span><span class='line'>          err: 'Could not log in user'
+</span><span class='line'>        });
+</span><span class='line'>      }
+</span><span class='line'>      res.status(200).json({
+</span><span class='line'>        status: 'Login successful!'
+</span><span class='line'>      });
+</span><span class='line'>    });
+</span><span class='line'>  })(req, res, next);
+</span><span class='line'>});
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;This utilizes Passport&rsquo;s &lt;a href="https://github.com/jaredhanson/passport-local"&gt;local strategy&lt;/a&gt; to verify the username/email as well as the password. The appropriate response is then returned.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;With the server running, test again with curl-&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="sh"&gt;curl -H "Accept: application/json" -H \
+</span><span class='line'>"Content-type: application/json" -X POST \
+</span><span class='line'>-d '{"username": "test@test.com", "password": "test"}' \
+</span><span class='line'>http://localhost:3000/user/login
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;-and you should see:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="sh"&gt;{
+</span><span class='line'>  "message": "Login successful!"
+</span><span class='line'>}
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Test again with curl, sending the wrong password, and you should see:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="sh"&gt;{
+</span><span class='line'>  "err": {
+</span><span class='line'>    "name": "IncorrectPasswordError",
+</span><span class='line'>    "message": "Password or username are incorrect"
+</span><span class='line'>  }
+</span><span class='line'>}
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Perfect!&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h3&gt;User Logout&lt;/h3&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Finally, take a look at the logout:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;router.get('/logout', function(req, res) {
+</span><span class='line'>  req.logout();
+</span><span class='line'>  res.status(200).json({
+</span><span class='line'>    status: 'Bye!'
+</span><span class='line'>  });
+</span><span class='line'>});
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;This should be straightforward, and you can probably guess what the response will look like - but let&rsquo;s test it again to be sure:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="sh"&gt;$ curl -H "Accept: application/json" -H \
+</span><span class='line'>"Content-type: application/json" -X GET \
+</span><span class='line'>http://localhost:3000/user/logout
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;You should see:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="sh"&gt;{
+</span><span class='line'>  "status": "Bye!"
+</span><span class='line'>}
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;On to the client-side!&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h2&gt;Angular App&lt;/h2&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Before diving in, remember that since end users have full access to the power of the browser as well as &lt;a href="https://developer.chrome.com/devtools"&gt;DevTools&lt;/a&gt; and the client-side code, it&rsquo;s vital that you not only restrict access to sensitive endpoints on the server-side - but that you also do not store sensitive data on the client-side. Keep this in mind as you add auth functionality to your own MEAN application stack.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h3&gt;Client-side Routing&lt;/h3&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Let&rsquo;s add the remainder of the client-side routes to the &lt;em&gt;main.js&lt;/em&gt; file:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;myApp.config(function ($routeProvider) {
+</span><span class='line'>  $routeProvider
+</span><span class='line'>    .when('/', {
+</span><span class='line'>      templateUrl: 'partials/home.html'
+</span><span class='line'>    })
+</span><span class='line'>    .when('/login', {
+</span><span class='line'>      templateUrl: 'partials/login.html',
+</span><span class='line'>      controller: 'loginController'
+</span><span class='line'>    })
+</span><span class='line'>    .when('/logout', {
+</span><span class='line'>      controller: 'logoutController'
+</span><span class='line'>    })
+</span><span class='line'>    .when('/register', {
+</span><span class='line'>      templateUrl: 'partials/register.html',
+</span><span class='line'>      controller: 'registerController'
+</span><span class='line'>    })
+</span><span class='line'>    .when('/one', {
+</span><span class='line'>      template: '&lt;h1&gt;This is page one!&lt;/h1&gt;'
+</span><span class='line'>    })
+</span><span class='line'>    .when('/two', {
+</span><span class='line'>      template: '&lt;h1&gt;This is page two!&lt;/h1&gt;'
+</span><span class='line'>    })
+</span><span class='line'>    .otherwise({
+</span><span class='line'>      redirectTo: '/'
+</span><span class='line'>    });
+</span><span class='line'>});
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Here, we created five new routes. Before we add the subsequent templates and controllers, let&rsquo;s create a &lt;a href="https://code.angularjs.org/1.4.9/docs/guide/services"&gt;service&lt;/a&gt; to handle authentication.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h3&gt;Authentication Service&lt;/h3&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Start by adding the basic structure of the service to a new file called &lt;em&gt;services.js&lt;/em&gt; in the &ldquo;client&rdquo; directory:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;angular.module('myApp').factory('AuthService',
+</span><span class='line'>  ['$q', '$timeout', '$http',
+</span><span class='line'>  function ($q, $timeout, $http) {
+</span><span class='line'>
+</span><span class='line'>    // create user variable
+</span><span class='line'>    var user = null;
+</span><span class='line'>
+</span><span class='line'>    // return available functions for use in the controllers
+</span><span class='line'>    return ({
+</span><span class='line'>      isLoggedIn: isLoggedIn,
+</span><span class='line'>      getUserStatus: getUserStatus,
+</span><span class='line'>      login: login,
+</span><span class='line'>      logout: logout,
+</span><span class='line'>      register: register
+</span><span class='line'>    });
+</span><span class='line'>
+</span><span class='line'>}]);
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Here, we simply defined the service name, &lt;code&gt;AuthService&lt;/code&gt;, and then injected the dependencies that we will be using - &lt;code&gt;$q&lt;/code&gt;, &lt;code&gt;$timeout&lt;/code&gt;, &lt;code&gt;$http&lt;/code&gt; - and then returned the functions, which we still need to write, for use outside the service.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Make sure to add the script to the &lt;em&gt;index.html&lt;/em&gt; file:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;<div class='bogus-wrapper'><notextile><figure class='code'><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="nt">&lt;/p&gt;</span>
+</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="ni">&amp;lt;</span>/p<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span><span class="ni">&amp;lt;</span>script src=&quot;./services.js&quot;<span class="ni">&amp;gt;&amp;lt;</span>/script<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span><span class="ni">&amp;lt;</span>p<span class="ni">&amp;gt;</span>
+</span></code></pre></td></tr></table></div></figure>&lt;/p&gt;
 </span><span class='line'>
-</span><span class='line'><span class="nt">&lt;h2&gt;</span>Add values<span class="nt">&lt;/h2&gt;</span>
+</span><span class='line'>&lt;p&gt;Let&rsquo;s create each function&hellip;&lt;/p&gt;
 </span><span class='line'>
+</span><span class='line'>&lt;p&gt;&lt;strong&gt;&lt;code&gt;isLoggedIn()&lt;/code&gt;&lt;/strong&gt;&lt;/p&gt;
 </span><span class='line'>
-</span><span class='line'><span class="nt">&lt;p&gt;&lt;input</span> <span class="na">type=</span><span class="s">&quot;number&quot;</span> <span class="na">ng-model=</span><span class="s">&quot;newItem&quot;</span><span class="nt">&gt;</span>
-</span><span class='line'><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-default&quot;</span> <span class="na">ng-click=</span><span class="s">&quot;add()&quot;</span><span class="nt">&gt;</span>Add!<span class="nt">&lt;/button&gt;&lt;/p&gt;</span>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;function isLoggedIn() {
+</span><span class='line'>  if(user) {
+</span><span class='line'>    return true;
+</span><span class='line'>  } else {
+</span><span class='line'>    return false;
+</span><span class='line'>  }
+</span><span class='line'>}
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
 </span><span class='line'>
-</span><span class='line'><span class="nt">&lt;p&gt;</span>{{ total }}<span class="nt">&lt;/p&gt;</span>
+</span><span class='line'>&lt;p&gt;This function returns &lt;code&gt;true&lt;/code&gt; if &lt;code&gt;user&lt;/code&gt; evaluates to &lt;code&gt;true&lt;/code&gt; - a user is logged in - otherwise it returns false.&lt;/p&gt;
 </span><span class='line'>
+</span><span class='line'>&lt;p&gt;&lt;strong&gt;&lt;code&gt;getUserStatus()&lt;/code&gt;&lt;/strong&gt;&lt;/p&gt;
 </span><span class='line'>
-</span><span class='line'><span class="nt">&lt;p&gt;</span>
-</span></code></pre></td></tr></table></div></figure></p>
-
-<p>Then test it in the browser.</p>
-
-<p>Like last time, we simply need to ensure that <code>total</code> is updated appropriately when the end user submits a number in the input box and then clicks the button.</p>
-
-<pre><code class="javascript">describe('TestTwoController', function () {
-
-  var total = element(by.tagName('p'));
-  var numberInputBox = element(by.css('[ng-model="newItem"]'));
-  var changeTotalButton = element(by.css('.btn-default'));
-
-  beforeEach(function() {
-    browser.get('http://localhost:8888/#/two');
-  });
-
-  it('initially has a total', function () {
-    expect(total.getText()).toEqual('6');
-  });
-
-  it('updates the `total` when a value is added', function () {
-    numberInputBox.sendKeys(7);
-    changeTotalButton.click();
-    numberInputBox.clear();
-    expect(total.getText()).toEqual('13');
-    numberInputBox.sendKeys(7);
-    changeTotalButton.click();
-    expect(total.getText()).toEqual('20');
-    numberInputBox.clear();
-    numberInputBox.sendKeys(-700);
-    changeTotalButton.click();
-    expect(total.getText()).toEqual('-680');
-  });
-
-  it('does not update the `total` when an empty value is added', function () {
-    numberInputBox.sendKeys('');
-    changeTotalButton.click();
-    expect(total.getText()).toEqual('6');
-    numberInputBox.sendKeys('hi!');
-    changeTotalButton.click();
-    expect(total.getText()).toEqual('6');
-  });
-
-});
-</code></pre>
-
-<p>Run the tests and you should see:</p>
-
-<pre><code class="sh">6 tests, 9 assertions, 0 failures
-</code></pre>
-
-<p>Moving along&hellip;</p>
-
-<h3>TestThreeController</h3>
-
-<p>You know the drill:</p>
-
-<ol>
-<li>Look at the Angular and HTML code</li>
-<li>Manually test in the browser</li>
-<li>Write the e2e test to automate the manual test</li>
-</ol>
-
-
-<p>Try this on your own before looking at the code below.</p>
-
-<pre><code class="javascript">describe('TestThreeController', function () {
-
-  var modalNumber = element.all(by.tagName('span')).get(1);
-  var modalButton = element(by.tagName('button'));
-  var iterateButton = element(by.css('[ng-click="changeModalText()"]'));
-  var hideButton = element(by.css('[ng-click="$hide()"]'));
-  var justSomeText = element(by.tagName('h2'));
-
-  beforeEach(function() {
-    browser.get('http://localhost:8888/#/three');
-  });
-
-  it('initially has a modalNumber', function () {
-    modalButton.click();
-    expect(modalNumber.getText()).toEqual('1');
-  });
-
-  it('updates the `modalNumber` when a value is added', function () {
-    modalButton.click();
-    iterateButton.click();
-    expect(modalNumber.getText()).toEqual('2');
-    iterateButton.click().click().click();
-    expect(modalNumber.getText()).toEqual('5');
-    hideButton.click();
-    expect(justSomeText.getText()).toEqual('Just a modal');
-  });
-</code></pre>
-
-<h3>TestFourController</h3>
-
-<p>Since this controller makes an external call to <a href="https://api.github.com/repositories">https://api.github.com/repositories</a> you can either mock out (fake) this request using <a href="https://docs.angularjs.org/api/ngMockE2E">ngMockE2E</a>, like we did for the unit test, or you can actually make the API call. Again, this depends on how expensive the call is and how important the functionality is to your application. In most cases, it&rsquo;s better to actually make the call since e2e tests should mimic the actual end user experience as much as possible. Plus, unlike unit tests which test implementation, these tests test user behavior, across several independent units - thus, these tests should not be isolated and can rely on making actual API calls either to the back-end or externally.</p>
-
-<pre><code class="javascript">describe('TestFourController', function () {
-
-  var loadButton = element(by.tagName('button'));
-  var ul = element.all(by.tagName('ul'));
-  var li = element.all(by.tagName('li'));
-
-  beforeEach(function() {
-    browser.get('http://localhost:8888/#/four');
-  });
-
-  it('updates the DOM when the button is clicked', function () {
-    expect(ul.count()).toEqual(1);
-    expect(li.count()).toEqual(5);
-    loadButton.click();
-    expect(ul.count()).toEqual(101);
-    expect(li.count()).toEqual(105);
-  });
-
-});
-</code></pre>
-
-<p>Here, when the button is clicked, the API call is made and the scope is updated. We then assert that there are 101 UL tags and 105 LI tags, representing a Github username and repo returned from the API call, present on the DOM.</p>
-
-<p>That&rsquo;s it!</p>
-
-<h2>Conclusion</h2>
-
-<p><em>Want more?</em></p>
-
-<ol>
-<li>Take a look at the <a href="http://angular.github.io/protractor/#/page-objects">Page Objects</a> design pattern and refactor the tests so that they are better organized.</li>
-<li>Break a test, and then <a href="http://angular.github.io/protractor/#/debugging#pausing-to-debug">pause</a> the test before the break via <code>browser.pause()</code> and/or <code>browser.debugger()</code> to debug.</li>
-<li>Test your own Angular app, and then add a link to the comments to get feedback.</li>
-</ol>
-
-
-<p>Be sure to check the <a href="http://angular.github.io/protractor/#/">Protractor</a> documentation for more. Thanks again for reading, and happy testing!</p>
-
-<hr><br>
-
-
-<p><em>Interested in learning how to test an Angular + Django app? Check out <a href="http://www.realpython.com/">Real Python</a> for details.</em></p>
-]]></content>
-  </entry>
-  
-  <entry>
-    <title type="html"><![CDATA[Testing AngularJS With Protractor and Karma - Part 1]]></title>
-    <link href="http://mherman.org/blog/2015/04/09/testing-angularjs-with-protractor-and-karma-part-1/"/>
-    <updated>2015-04-09T09:06:00-06:00</updated>
-    <id>http://mherman.org/blog/2015/04/09/testing-angularjs-with-protractor-and-karma-part-1</id>
-    <content type="html"><![CDATA[<p><strong>This article details how to test a simple AngularJS application using unit tests and end-to-end (E2E) tests.</strong></p>
-
-<div style="text-align:center;">
-  <img src="https://raw.githubusercontent.com/mjhea0/angular-testing-tutorial/master/img/angular-karma.png" style="max-width: 100%; border:0;" alt="angular + karma">
-</div>
-
-
-<p><br></p>
-
-<ul>
-<li>Part 1 - In the first part we&rsquo;ll look at unit tests, which ensure that small, isolated pieces of code (e.g., a unit) behave as expected <strong>(current)</strong>.</li>
-<li><a href="http://mherman.org/blog/2015/04/26/testing-angularjs-with-protractor-and-karma-part-2">Part 2</a> - In part two we&rsquo;ll address E2E tests, which verify that all the pieces of code (units) fit together by simulating the user experience through browser automation.</li>
-</ul>
-
-
-<blockquote><p><em>Updates</em>: December 3rd, 2016 - bumped dependencies</p></blockquote>
-
-<p>To accomplish this we will be using <a href="http://karma-runner.github.io/">Karma</a> v0.12.31 (test runner) and <a href="http://chaijs.com/">Chai</a> v2.2.0 (assertions) for the unit tests (along with <a href="https://github.com/karma-runner/karma-mocha">Karma-Mocha</a>) and <a href="http://angular.github.io/protractor/#/">Protractor</a> v2.0.0 for the E2E tests. This article also uses <a href="https://angularjs.org/">Angular</a> v1.3.15. Be sure to take note of all dependencies and their versions in the <em>package.json</em> and <em>bower.json</em> files in the <a href="https://github.com/mjhea0/angular-testing-tutorial">repo</a>.</p>
-
-<p>The repo includes the following tags:</p>
-
-<ol>
-<li><em>v1</em> - <a href="https://github.com/mjhea0/angular-testing-tutorial/releases/tag/v1">project boilerplate</a></li>
-<li><em>v2</em> - <a href="https://github.com/mjhea0/angular-testing-tutorial/releases/tag/v2">adds testing boilerplate/configuration</a></li>
-<li><em>v3</em> - <a href="https://github.com/mjhea0/angular-testing-tutorial/releases/tag/v3">adds unit tests</a></li>
-<li><em>v4</em> - <a href="https://github.com/mjhea0/angular-testing-tutorial/releases/tag/v4">adds E2E tests</a></li>
-</ol>
-
-
-<h2>Project Setup</h2>
-
-<p>Start by cloning the repo, checkout out the first tag, and then install the dependencies:</p>
-
-<pre><code class="sh">$ git clone https://github.com/mjhea0/angular-testing-tutorial.git
-$ cd angular-testing-tutorial
-$ git checkout tags/v1
-$ npm install &amp;&amp; bower install
-</code></pre>
-
-<p>Run the app:</p>
-
-<pre><code class="sh">$ gulp
-</code></pre>
-
-<p>Navigate to <a href="http://localhost:8888">http://localhost:8888</a> to view the live app.</p>
-
-<div style="text-align:center;">
-  <img src="https://raw.githubusercontent.com/mjhea0/angular-testing-tutorial/master/img/live-app.png" style="max-width: 100%; border:0;" alt="angular app">
-</div>
-
-
-<p><br></p>
-
-<p>Test it out. Once done, kill the server and checkout the second tag:</p>
-
-<pre><code class="sh">$ git checkout tags/v2
-</code></pre>
-
-<p>There should now be a &ldquo;tests&rdquo; folder and a few more tasks in the Gulpfile.</p>
-
-<p>Run the unit tests:</p>
-
-<pre><code class="sh">$ gulp unit
-</code></pre>
-
-<p>They should pass:</p>
-
-<pre><code class="sh">[05:28:02] Using gulpfile ~/angular-testing-tutorial/Gulpfile.js
-[05:28:02] Starting 'unit'...
-INFO [karma]: Karma v0.12.31 server started at http://localhost:9876/
-INFO [launcher]: Starting browser Chrome
-INFO [Chrome 41.0.2272 (Mac OS X 10.10.2)]: Connected on socket JBQp0aEyu8KSqUfGoxsd with id 94772581
-Chrome 41.0.2272 (Mac OS X 10.10.2): Executed 2 of 2 SUCCESS (0.061 secs / 0.002 secs)
-[05:28:05] Finished 'unit' after 3.23 s
-</code></pre>
-
-<p>Now for the e2e tests:</p>
-
-<ol>
-<li>1st terminal window: <code>webdriver-manager start</code></li>
-<li>2nd terminal window (within the project directory): <code>gulp</code></li>
-<li>3rd terminal window (within the project directory): <code>gulp e2e</code></li>
-</ol>
-
-
-<p>They should pass as well:</p>
-
-<pre><code class="sh">[05:29:45] Using gulpfile ~/angular-testing-tutorial/Gulpfile.js
-[05:29:45] Starting 'e2e'...
-Using the selenium server at http://localhost:4444/wd/hub
-[launcher] Running 1 instances of WebDriver
-.
-
-Finished in 0.921 seconds
-1 test, 1 assertion, 0 failures
-
-[launcher] 0 instance(s) of WebDriver still running
-[launcher] chrome #1 passed
-</code></pre>
-
-<p>So, what&rsquo;s happening here&hellip;</p>
-
-<h2>Configuration Files</h2>
-
-<p>There are two configuration files in the &ldquo;tests&rdquo; folder - one for Karma and the other for Protractor.</p>
-
-<h3>Karma</h3>
-
-<p><a href="http://karma-runner.github.io/">Karma</a> is a test runner built by the AngularJS team that executes the unit tests and reports the results.</p>
-
-<p>Let&rsquo;s look the config file, <em>karma.conf.js</em>:</p>
-
-<pre><code class="javascript">module.exports = function(config) {
-  config.set({
-
-    // base path that will be used to resolve all patterns
-    basePath: '.',
-
-    // frameworks to use
-    frameworks: ['mocha', 'chai'],
-
-    // list of files / patterns to load in the browser
-    files: [
-      '../app/bower_components/angular/angular.js',
-      '../app/bower_components/jquery/dist/jquery.js',
-      '../app/bower_components/angular-strap/dist/angular-strap.js',
-      '../app/bower_components/angular-strap/dist/angular-strap.tpl.js',
-      '../app/bower_components/angular-mocks/angular-mocks.js',
-      '../app/bower_components/angular-route/angular-route.js',
-      './unit/*.js',
-      '../app/app.js'
-    ],
-
-    // test result reporter
-    reporters: ['progress'],
-
-    // web server port
-    port: 9876,
-
-    // enable / disable colors in the output (reporters and logs)
-    colors: true,
-
-    // level of logging
-    logLevel: config.LOG_INFO,
-
-    // enable / disable watching file and executing tests whenever any file changes
-    autoWatch: true,
-
-    // start these browsers
-    browsers: ['Chrome'],
-
-    // Continuous Integration mode
-    singleRun: false
-  });
-};
-</code></pre>
-
-<blockquote><p>You can also run <code>karma init</code> to be guided through the creation of a config file.</p></blockquote>
-
-<p>Be sure to read over the comments for an overview of each config option. For more information, review the <a href="http://karma-runner.github.io/0.12/config/configuration-file.html">official documentation</a>.</p>
-
-<h3>Protractor</h3>
-
-<p><a href="http://angular.github.io/protractor/#/">Protractor</a> provides a nice wrapper around <a href="https://github.com/SeleniumHQ/selenium/wiki/WebDriverJs">WebDriverJS</a>, the JavaScript bindings for <a href="http://seleniumhq.github.io/selenium/docs/api/javascript/">Selenium Webdriver</a>, to run tests against an AngularJS application running live in a browser.</p>
-
-<p>Turn your attention to the Protractor config file, <em>protractor.conf.js</em>:</p>
-
-<pre><code class="javascript">exports.config = {
-  seleniumAddress: 'http://localhost:4444/wd/hub',
-  specs: ['tests/e2e/*.js']
-};
-</code></pre>
-
-<p>This tells protractor where to find the test files (called specs) and specifies the address that the Selenium server is running on. Simple.</p>
-
-<p>Ready to start testing?</p>
-
-<h2>Unit Tests</h2>
-
-<p>We&rsquo;ll start with unit tests since they are much easier to write, debug, and maintain.</p>
-
-<p>Keep in mind that unit tests, by definition, only test isolated units of code so they rely heavily on mocking fake data. This can add much complexity to your tests and can decrease the effectiveness of the actual tests. For example, if you&rsquo;re mocking out an HTTP request to a back-end API, then you&rsquo;re not really testing your application. Instead you&rsquo;re simulating the request and then using fake JSON data to simulate the response back. The tests may run faster, but they are much less effective.</p>
-
-<p>When starting out, mock out only the most expensive requests and make the actual API call in other situations. Over time you will develop a better sense of which requests should be mocked and which should not.</p>
-
-<p>Finally, if you decide not to mock a request in a specific test, then the test is no longer a unit test since it&rsquo;s not testing an isolated unit of code. Instead you are testing multiple units, which is an integration test. For simplicity, we will continue to refer to such tests as unit tests.</p>
-
-<p>With that, let&rsquo;s create some tests, broken up by controller!</p>
-
-<h3>TestOneController</h3>
-
-<p>Take a look at the code in the first controller:</p>
-
-<pre><code class="javascript">myApp.controller('TestOneController', function($scope) {
-  $scope.greeting = "Hello, World!";
-  $scope.newText = undefined;
-  $scope.changeGreeting = function() {
-    $scope.greeting = $scope.newText;
-  };
-});
-</code></pre>
-
-<p>What&rsquo;s happening here? Confirm your answer by running your app and watching what happens. Now, what can/should we test?</p>
-
-<ol>
-<li><code>greeting</code> has an initial value of <code>"Hello, World!"</code>, and</li>
-<li>The <code>changeGreeting</code> function updates <code>greeting</code>.</li>
-</ol>
-
-
-<p>You probably noticed that we are already testing this in the spec:</p>
-
-<pre><code class="javascript">describe('TestOneController', function () {
-
-  var controller = null;
-  $scope = null;
-
-  beforeEach(function () {
-    module('myApp');
-  });
-
-  beforeEach(inject(function ($controller, $rootScope) {
-    $scope = $rootScope.$new();
-    controller = $controller('TestOneController', {
-      $scope: $scope
-    });
-  }));
-
-  it('initially has a greeting', function () {
-    assert.equal($scope.greeting, "Hello, World!");
-  });
-
-  it('clicking the button changes the greeting', function () {
-    $scope.newText = "Hi!";
-    $scope.changeGreeting();
-    assert.equal($scope.greeting, "Hi!");
-  });
-
-});
-</code></pre>
-
-<p>What&rsquo;s happening?</p>
-
-<ol>
-<li>The <code>describe</code> block is used to group similar tests.</li>
-<li>The module, <code>myApp</code>, is loaded, into each test, in the first <code>beforeEach</code> block, which instantiates a clean testing environment.</li>
-<li>The dependencies are injected, a new scope is created, and the controller is instantiated in the second <code>beforeEach</code>.</li>
-<li>Each <code>it</code> function is a separate test, which includes a title, in human readable form, and a function with the actual test code.</li>
-<li>The first test asserts that the initial state of <code>greeting</code> is <code>"Hello, World!"</code>.</li>
-<li>Meanwhile, the second test assets that the <code>changeGreeting()</code> function actually changes the value of <code>greeting</code>.</li>
-</ol>
-
-
-<p>Make sense?</p>
-
-<p><em>In most cases, unit tests simply change the scope and assert that the results are what we expected.</em></p>
-
-<blockquote><p>In general, when testing controllers, you inject then register the controller with a <code>beforeEach</code> block, along with the <code>$rootScope</code> and then test that the functions within the controller act as expected.</p></blockquote>
-
-<p>Run the tests again to ensure they still pass - <code>gulp unit</code>.</p>
-
-<p>What else could we test? How about if <code>newText</code> doesn&rsquo;t change - e.g., if the user submits the button without entering any text in the input box - then the value of <code>greeting</code> should stay the same. Try writing this on your own, before you look at my answer:</p>
-
-<pre><code class="javascript">it('clicking the button does not change the greeting if text is not inputed', function () {
-  $scope.changeGreeting();
-  assert.equal($scope.greeting, "Hello, World!");
-});
-</code></pre>
-
-<p>Try running this. It should fail.</p>
-
-<pre><code class="sh">Chrome 41.0.2272 (Mac OS X 10.10.2) TestOneController clicking the button does not change the greeting FAILED
-  AssertionError: expected undefined to equal 'Hello, World!'
-</code></pre>
-
-<p>So, we&rsquo;ve revealed a bug. We could fix this by adding validation to the input box to ensure the end user enters a value or we could update <code>changeGreeting</code> to only update <code>greeting</code> if <code>newText</code> is not <code>undefined</code>. Let&rsquo;s go with the latter.</p>
-
-<pre><code class="javascript">$scope.changeGreeting = function() {
-  if ($scope.newText !== undefined) {
-    $scope.greeting = $scope.newText;
-  }
-};
-</code></pre>
-
-<p>Save the code, and then run the tests again:</p>
-
-<pre><code class="sh">$ gulp unit
-[08:28:18] Using gulpfile ~/angular-testing-tutorial/Gulpfile.js
-[08:28:18] Starting 'unit'...
-INFO [karma]: Karma v0.12.31 server started at http://localhost:9876/
-INFO [launcher]: Starting browser Chrome
-INFO [Chrome 41.0.2272 (Mac OS X 10.10.2)]: Connected on socket HGnVC5-cAXOZjAsrSCWj with id 83240025
-Chrome 41.0.2272 (Mac OS X 10.10.2): Executed 3 of 3 SUCCESS (0.065 secs / 0.001 secs)
-[08:28:21] Finished 'unit' after 3.13 s
-</code></pre>
-
-<p>Nice!</p>
-
-<blockquote><p>Since controllers are used to bind data to the template (via scope), unit tests are perfect for testing the controller logic - e.g., what happens to the scope as the controller runs - while E2E tests ensure that the template is updated accordingly.</p></blockquote>
-
-<h3>TestTwoController</h3>
-
-<p>Start by analyzing the code:</p>
-
-<pre><code class="javascript">myApp.controller('TestTwoController', function($scope) {
-  $scope.total = 6;
-  $scope.newItem = undefined;
-  $scope.items = [1, 2, 3];
-  $scope.add = function () {
-    $scope.items.push($scope.newItem);
-    $scope.total = 0;
-    for(var i = 0; i &lt; $scope.items.length; i++){
-      $scope.total += parseInt($scope.items[i]);
-    }
-  };
-});
-</code></pre>
-
-<p>What should we test? Take out a pen and paper and write down everything that should be tested. Once done, write the code. Check your code against mine.</p>
-
-<p>Be sure to start with the following boilerplate:</p>
-
-<pre><code class="javascript">describe('TestTwoController', function () {
-
-  var controller = null;
-  $scope = null;
-
-  beforeEach(function () {
-    module('myApp');
-  });
-
-  beforeEach(inject(function ($controller, $rootScope) {
-    $scope = $rootScope.$new();
-    controller = $controller('TestTwoController', {
-      $scope: $scope
-    });
-  }));
-
-});
-</code></pre>
-
-<h4>Test 1: The initial value of <code>total</code></h4>
-
-<pre><code class="javascript">it('initially has a total', function () {
-  assert.equal($scope.total, 6);
-});
-</code></pre>
-
-<h4>Test 2: The initial value of <code>items</code></h4>
-
-<pre><code class="javascript">it('initially has items', function () {
-  assert.isArray($scope.items);
-  assert.deepEqual($scope.items, [1, 2, 3]);
-});
-</code></pre>
-
-<h4>Test 3: The <code>add</code> function updates the <code>total</code> and <code>items</code> array when a value is added</h4>
-
-<pre><code class="javascript">it('the `add` function updates the `total` and `items` array when a value is added', function () {
-  $scope.newItem = 7;
-  $scope.add();
-  assert.equal($scope.total, 13);
-  assert.deepEqual($scope.items, [1, 2, 3, 7]);
-});
-</code></pre>
-
-<h4>Test 4: The <code>add</code> function does not update the <code>total</code> and <code>items</code> array when an empty value is added</h4>
-
-<pre><code class="javascript">it('does not update the `total` and `items` array when an empty value is added', function () {
-  $scope.newItem = undefined;
-  $scope.add();
-  assert.equal($scope.total, 6);
-  assert.deepEqual($scope.items, [1, 2, 3]);
-  $scope.newItem = 22;
-  $scope.add();
-  assert.equal($scope.total, 28);
-  assert.deepEqual($scope.items, [1, 2, 3, 22]);
-});
-</code></pre>
-
-<h4>Run</h4>
-
-<p>Each test should be straightforward. Run the tests. There should be one failure:</p>
-
-<pre><code class="javascript">Chrome 41.0.2272 (Mac OS X 10.10.2) TestTwoController does not update the `total` and `items` array when an empty value is added FAILED
-  AssertionError: expected NaN to equal 6
-</code></pre>
-
-<p>Update the code, adding a conditional again:</p>
-
-<pre><code class="javascript">$scope.add = function () {
-  if(typeof $scope.newItem == 'number') {
-    $scope.items.push($scope.newItem);
-    $scope.total = 0;
-    for(var i = 0; i &lt; $scope.items.length; i++){
-      $scope.total += parseInt($scope.items[i]);
-    }
-  }
-};
-</code></pre>
-
-<p>Also update the partial, <em>/app/partials/two.html</em>:</p>
-
-<pre><code class="html">&lt;input type="number" ng-model="newItem"&gt;
-</code></pre>
-
-<p>Run it again:</p>
-
-<pre><code class="sh">$ gulp unit
-[09:56:10] Using gulpfile ~/angular-testing-tutorial/Gulpfile.js
-[09:56:10] Starting 'unit'...
-INFO [karma]: Karma v0.12.31 server started at http://localhost:9876/
-INFO [launcher]: Starting browser Chrome
-INFO [Chrome 41.0.2272 (Mac OS X 10.10.2)]: Connected on socket Lbv1sROpYrEHgotlmJZf with id 91008249
-Chrome 41.0.2272 (Mac OS X 10.10.2): Executed 7 of 7 SUCCESS (0.082 secs / 0.003 secs)
-[09:56:13] Finished 'unit' after 3.05 s
-</code></pre>
-
-<p>Success!</p>
-
-<p>Did I miss anything? Comment below.</p>
-
-<h3>TestThreeController</h3>
-
-<p>Again, check out the code in <em>app.js</em>:</p>
-
-<pre><code class="javascript">myApp.controller('TestThreeController', function($scope) {
-  $scope.modal = {title: 'Hi!', content: 'This is a message!'};
-});
-</code></pre>
-
-<p>What can we test here?</p>
-
-<pre><code class="javascript">it('initially has a modal', function () {
-  assert.isObject($scope.modal);
-  assert.deepEqual($scope.modal, {title: 'Hi!', content: 'This is a message!'});
-});
-</code></pre>
-
-<p>Perhaps a better question is: What <em>should</em> we test here? Is the above test really necessary? Probably not. But we may need to test it out more in the future if we build out the functionality. Let&rsquo;s go for it!</p>
-
-<h4>Update <em>app.js</em>:</h4>
-
-<pre><code class="javascript">myApp.controller('TestThreeController', function($scope, $modal) {
-  $scope.modalNumber = 1;
-  var myModal = $modal({scope: $scope, template: 'modal.tpl.html', show: false});
-  $scope.showModal = function() {
-    myModal.$promise.then(myModal.show);
-  };
-  $scope.changeModalText = function() {
-    $scope.modalNumber++;
-    };
-});
-</code></pre>
-
-<p>Here we are defined a custom template, <code>modal.tpl.html</code>, to be used for the modal text and then we assigned <code>$scope.modalNumber</code> to <code>1</code> as well as function to iterate the number.</p>
-
-<h4>Add <em>modal.tpl.html</em>:</h4>
-
-<p><figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;function getUserStatus() {
+</span><span class='line'>  return user;
+</span><span class='line'>}
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;&lt;strong&gt;&lt;code&gt;login()&lt;/code&gt;&lt;/strong&gt;&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;function login(username, password) {
+</span><span class='line'>
+</span><span class='line'>  // create a new instance of deferred
+</span><span class='line'>  var deferred = $q.defer();
+</span><span class='line'>
+</span><span class='line'>  // send a post request to the server
+</span><span class='line'>  $http.post('/user/login',
+</span><span class='line'>    {username: username, password: password})
+</span><span class='line'>    // handle success
+</span><span class='line'>    .success(function (data, status) {
+</span><span class='line'>      if(status === 200 &amp;&amp; data.status){
+</span><span class='line'>        user = true;
+</span><span class='line'>        deferred.resolve();
+</span><span class='line'>      } else {
+</span><span class='line'>        user = false;
+</span><span class='line'>        deferred.reject();
+</span><span class='line'>      }
+</span><span class='line'>    })
+</span><span class='line'>    // handle error
+</span><span class='line'>    .error(function (data) {
+</span><span class='line'>      user = false;
+</span><span class='line'>      deferred.reject();
+</span><span class='line'>    });
+</span><span class='line'>
+</span><span class='line'>  // return promise object
+</span><span class='line'>  return deferred.promise;
+</span><span class='line'>
+</span><span class='line'>}
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Here, we used the &lt;a href="https://code.angularjs.org/1.4.9/docs/api/ng/service/$q"&gt;$q&lt;/a&gt; service to set up a &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise"&gt;promise&lt;/a&gt;, which we&rsquo;ll access in a future controller. We also utilized the &lt;a href="https://code.angularjs.org/1.4.9/docs/api/ng/service/$http"&gt;$http&lt;/a&gt; service to send an AJAX request to the &lt;code&gt;/user/login&lt;/code&gt; endpoint that we already set up in our back-end Node/Express app.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Based on the returned response, we either &lt;a href="https://code.angularjs.org/1.4.9/docs/api/ng/service/$q#usage"&gt;resolve&lt;/a&gt; or &lt;a href="https://code.angularjs.org/1.4.9/docs/api/ng/service/$q#usage"&gt;reject&lt;/a&gt; and set the value of &lt;code&gt;user&lt;/code&gt; to &lt;code&gt;true&lt;/code&gt; or &lt;code&gt;false&lt;/code&gt;, respectively.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;&lt;strong&gt;&lt;code&gt;logout()&lt;/code&gt;&lt;/strong&gt;&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;function logout() {
+</span><span class='line'>
+</span><span class='line'>  // create a new instance of deferred
+</span><span class='line'>  var deferred = $q.defer();
+</span><span class='line'>
+</span><span class='line'>  // send a get request to the server
+</span><span class='line'>  $http.get('/user/logout')
+</span><span class='line'>    // handle success
+</span><span class='line'>    .success(function (data) {
+</span><span class='line'>      user = false;
+</span><span class='line'>      deferred.resolve();
+</span><span class='line'>    })
+</span><span class='line'>    // handle error
+</span><span class='line'>    .error(function (data) {
+</span><span class='line'>      user = false;
+</span><span class='line'>      deferred.reject();
+</span><span class='line'>    });
+</span><span class='line'>
+</span><span class='line'>  // return promise object
+</span><span class='line'>  return deferred.promise;
+</span><span class='line'>
+</span><span class='line'>}
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Here, we followed the same formula as the &lt;code&gt;login()&lt;/code&gt; function, except we sent a GET request rather than a POST and to be safe we just went ahead and handled the error the same as the success.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;&lt;strong&gt;&lt;code&gt;register()&lt;/code&gt;&lt;/strong&gt;&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;function register(username, password) {
+</span><span class='line'>
+</span><span class='line'>  // create a new instance of deferred
+</span><span class='line'>  var deferred = $q.defer();
+</span><span class='line'>
+</span><span class='line'>  // send a post request to the server
+</span><span class='line'>  $http.post('/user/register',
+</span><span class='line'>    {username: username, password: password})
+</span><span class='line'>    // handle success
+</span><span class='line'>    .success(function (data, status) {
+</span><span class='line'>      if(status === 200 &amp;&amp; data.status){
+</span><span class='line'>        deferred.resolve();
+</span><span class='line'>      } else {
+</span><span class='line'>        deferred.reject();
+</span><span class='line'>      }
+</span><span class='line'>    })
+</span><span class='line'>    // handle error
+</span><span class='line'>    .error(function (data) {
+</span><span class='line'>      deferred.reject();
+</span><span class='line'>    });
+</span><span class='line'>
+</span><span class='line'>  // return promise object
+</span><span class='line'>  return deferred.promise;
+</span><span class='line'>
+</span><span class='line'>}
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Again, we followed a similar formula to the &lt;code&gt;logout()&lt;/code&gt; function. Can you tell what&rsquo;s happening?&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;That&rsquo;s it for the service. Keep in mind that we still have not &ldquo;used&rdquo; this service. In order to do that we just need to inject it into the necessary components in the Angular app. In our case, that will be the controllers, which we&rsquo;ll build next.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h3&gt;Templates and Controllers&lt;/h3&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Looking back at our routes, we need to setup two partials/templates and three controllers:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;.when('/login', {
+</span><span class='line'>  templateUrl: 'partials/login.html',
+</span><span class='line'>  controller: 'loginController'
+</span><span class='line'>})
+</span><span class='line'>.when('/logout', {
+</span><span class='line'>  controller: 'logoutController'
+</span><span class='line'>})
+</span><span class='line'>.when('/register', {
+</span><span class='line'>  templateUrl: 'partials/register.html',
+</span><span class='line'>  controller: 'registerController'
+</span><span class='line'>})
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;&lt;strong&gt;Login&lt;/strong&gt;&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;First, add the following HTML to a new file called &lt;em&gt;login.html&lt;/em&gt;:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;<figure class='code'><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='html'><span class='line'><span class="ni">&amp;lt;</span>/p<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span><span class="ni">&amp;lt;</span>div class=&quot;col-md-4&quot;<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>  <span class="ni">&amp;lt;</span>h1<span class="ni">&amp;gt;</span>Login<span class="ni">&amp;lt;</span>/h1<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>  <span class="ni">&amp;lt;</span>div ng-show=&quot;error&quot; class=&quot;alert alert-danger&quot;<span class="ni">&amp;gt;</span>{{errorMessage}}<span class="ni">&amp;lt;</span>/div<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>  <span class="ni">&amp;lt;</span>form class=&quot;form&quot; ng-submit=&quot;login()&quot;<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>    <span class="ni">&amp;lt;</span>div class=&quot;form-group&quot;<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>      <span class="ni">&amp;lt;</span>label<span class="ni">&amp;gt;</span>Username<span class="ni">&amp;lt;</span>/label<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>      <span class="ni">&amp;lt;</span>input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;username&quot; ng-model=&quot;loginForm.username&quot; required<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>    <span class="ni">&amp;lt;</span>/div<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>    <span class="ni">&amp;lt;</span>div class=&quot;form-group&quot;<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>      <span class="ni">&amp;lt;</span>label<span class="ni">&amp;gt;</span>Password<span class="ni">&amp;lt;</span>/label<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>        <span class="ni">&amp;lt;</span>input type=&quot;password&quot; class=&quot;form-control&quot; name=&quot;password&quot; ng-model=&quot;loginForm.password&quot; required<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>      <span class="ni">&amp;lt;</span>/div<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>      <span class="ni">&amp;lt;</span>div<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>        <span class="ni">&amp;lt;</span>button type=&quot;submit&quot; class=&quot;btn btn-default&quot; ng-disabled=&quot;disabled&quot;<span class="ni">&amp;gt;</span>Login<span class="ni">&amp;lt;</span>/button<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>      <span class="ni">&amp;lt;</span>/div<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>  <span class="ni">&amp;lt;</span>/form<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span><span class="ni">&amp;lt;</span>/div<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span><span class="ni">&amp;lt;</span>p<span class="ni">&amp;gt;</span>
+</span></code></pre></td></tr></table></div></figure>&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Add this file to the &ldquo;partials&rdquo; directory.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Take note of the form. We used the &lt;a href="https://code.angularjs.org/1.4.9/docs/api/ng/directive/ngModel"&gt;ng-model&lt;/a&gt; directive on each of the inputs so that we can capture those values in the controller. Also, when the form is submitted, the &lt;a href="https://code.angularjs.org/1.4.9/docs/api/ng/directive/ngSubmit"&gt;ng-submit&lt;/a&gt; directive handles the event by firing the &lt;code&gt;login()&lt;/code&gt; function.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Next, within the &ldquo;client&rdquo; folder, add a new file called &lt;em&gt;controllers.js&lt;/em&gt;. Yes, this will hold all of our Angular app&rsquo;s controllers. Don&rsquo;t forget to add the script to the &lt;em&gt;index.html&lt;/em&gt; file:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;<figure class='code'><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="ni">&amp;lt;</span>/p<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span><span class="ni">&amp;lt;</span>script src=&quot;./controllers.js&quot;<span class="ni">&amp;gt;&amp;lt;</span>/script<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span><span class="ni">&amp;lt;</span>p<span class="ni">&amp;gt;</span>
+</span></code></pre></td></tr></table></div></figure>&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Now, let&rsquo;s add the first controller:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;angular.module('myApp').controller('loginController',
+</span><span class='line'>  ['$scope', '$location', 'AuthService',
+</span><span class='line'>  function ($scope, $location, AuthService) {
+</span><span class='line'>
+</span><span class='line'>    $scope.login = function () {
+</span><span class='line'>
+</span><span class='line'>      // initial values
+</span><span class='line'>      $scope.error = false;
+</span><span class='line'>      $scope.disabled = true;
+</span><span class='line'>
+</span><span class='line'>      // call login from service
+</span><span class='line'>      AuthService.login($scope.loginForm.username, $scope.loginForm.password)
+</span><span class='line'>        // handle success
+</span><span class='line'>        .then(function () {
+</span><span class='line'>          $location.path('/');
+</span><span class='line'>          $scope.disabled = false;
+</span><span class='line'>          $scope.loginForm = {};
+</span><span class='line'>        })
+</span><span class='line'>        // handle error
+</span><span class='line'>        .catch(function () {
+</span><span class='line'>          $scope.error = true;
+</span><span class='line'>          $scope.errorMessage = "Invalid username and/or password";
+</span><span class='line'>          $scope.disabled = false;
+</span><span class='line'>          $scope.loginForm = {};
+</span><span class='line'>        });
+</span><span class='line'>
+</span><span class='line'>    };
+</span><span class='line'>
+</span><span class='line'>}]);
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;So, when the &lt;code&gt;login()&lt;/code&gt; function is fired, we set some initial values and then call &lt;code&gt;login()&lt;/code&gt; from the &lt;code&gt;AuthService&lt;/code&gt;, passing the user inputed email and password as arguments. The subsequent success or error is then handled and the DOM/view/template is updated appropriately.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Ready to test the first round-trip - &lt;strong&gt;client =&gt; server =&gt; client&lt;/strong&gt;?&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Fire up the server and navigate to &lt;a href="http://localhost:3000/#/login"&gt;http://localhost:3000/#/login&lt;/a&gt; in your browser. First, try logging in with the user credentials used to register earlier - e.g, &lt;code&gt;test@test.com&lt;/code&gt; and &lt;code&gt;test&lt;/code&gt;, respectively. If all went well, you should be redirected to the main URL. Next, try to log in using invalid credentials. You should see the error message flash, &ldquo;Invalid username and/or password&rdquo;.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;&lt;strong&gt;Logout&lt;/strong&gt;&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Add the controller:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;angular.module('myApp').controller('logoutController',
+</span><span class='line'>  ['$scope', '$location', 'AuthService',
+</span><span class='line'>  function ($scope, $location, AuthService) {
+</span><span class='line'>
+</span><span class='line'>    $scope.logout = function () {
+</span><span class='line'>
+</span><span class='line'>      // call logout from service
+</span><span class='line'>      AuthService.logout()
+</span><span class='line'>        .then(function () {
+</span><span class='line'>          $location.path('/login');
+</span><span class='line'>        });
+</span><span class='line'>
+</span><span class='line'>    };
+</span><span class='line'>
+</span><span class='line'>}]);
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Here, we called &lt;code&gt;AuthService.logout()&lt;/code&gt; and then redirected the user to the &lt;code&gt;/login&lt;/code&gt; route after the promise is resolved.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Add a button to &lt;em&gt;home.html&lt;/em&gt;:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;<figure class='code'><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='html'><span class='line'><span class="ni">&amp;lt;</span>/p<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span><span class="ni">&amp;lt;</span>div ng-controller=&quot;logoutController&quot;<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>  <span class="ni">&amp;lt;</span>a ng-click=&#39;logout()&#39; class=&quot;btn btn-default&quot;<span class="ni">&amp;gt;</span>Logout<span class="ni">&amp;lt;</span>/a<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span><span class="ni">&amp;lt;</span>/div<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span><span class="ni">&amp;lt;</span>p<span class="ni">&amp;gt;</span>
+</span></code></pre></td></tr></table></div></figure>&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;And then test it out again.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;&lt;strong&gt;Register&lt;/strong&gt;&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Add a new new file called &lt;em&gt;register.html&lt;/em&gt; to the &ldquo;partials&rdquo; folder and add the following HTML:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;<figure class='code'><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='html'><span class='line'><span class="ni">&amp;lt;</span>/p<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span><span class="ni">&amp;lt;</span>div class=&quot;col-md-4&quot;<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>  <span class="ni">&amp;lt;</span>h1<span class="ni">&amp;gt;</span>Register<span class="ni">&amp;lt;</span>/h1<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>  <span class="ni">&amp;lt;</span>div ng-show=&quot;error&quot; class=&quot;alert alert-danger&quot;<span class="ni">&amp;gt;</span>{{errorMessage}}<span class="ni">&amp;lt;</span>/div<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>  <span class="ni">&amp;lt;</span>form class=&quot;form&quot; ng-submit=&quot;register()&quot;<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>    <span class="ni">&amp;lt;</span>div class=&quot;form-group&quot;<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>      <span class="ni">&amp;lt;</span>label<span class="ni">&amp;gt;</span>Username<span class="ni">&amp;lt;</span>/label<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>      <span class="ni">&amp;lt;</span>input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;username&quot; ng-model=&quot;registerForm.username&quot; required<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>    <span class="ni">&amp;lt;</span>/div<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>    <span class="ni">&amp;lt;</span>div class=&quot;form-group&quot;<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>      <span class="ni">&amp;lt;</span>label<span class="ni">&amp;gt;</span>Password<span class="ni">&amp;lt;</span>/label<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>        <span class="ni">&amp;lt;</span>input type=&quot;password&quot; class=&quot;form-control&quot; name=&quot;password&quot; ng-model=&quot;registerForm.password&quot; required<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>      <span class="ni">&amp;lt;</span>/div<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>      <span class="ni">&amp;lt;</span>div<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>        <span class="ni">&amp;lt;</span>button type=&quot;submit&quot; class=&quot;btn btn-default&quot; ng-disabled=&quot;disabled&quot;<span class="ni">&amp;gt;</span>Register<span class="ni">&amp;lt;</span>/button<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>      <span class="ni">&amp;lt;</span>/div<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>  <span class="ni">&amp;lt;</span>/form<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span><span class="ni">&amp;lt;</span>/div<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span><span class="ni">&amp;lt;</span>p<span class="ni">&amp;gt;</span>
+</span></code></pre></td></tr></table></div></figure>&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Next, add the controller:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;angular.module('myApp').controller('registerController',
+</span><span class='line'>  ['$scope', '$location', 'AuthService',
+</span><span class='line'>  function ($scope, $location, AuthService) {
+</span><span class='line'>
+</span><span class='line'>    $scope.register = function () {
+</span><span class='line'>
+</span><span class='line'>      // initial values
+</span><span class='line'>      $scope.error = false;
+</span><span class='line'>      $scope.disabled = true;
+</span><span class='line'>
+</span><span class='line'>      // call register from service
+</span><span class='line'>      AuthService.register($scope.registerForm.username, $scope.registerForm.password)
+</span><span class='line'>        // handle success
+</span><span class='line'>        .then(function () {
+</span><span class='line'>          $location.path('/login');
+</span><span class='line'>          $scope.disabled = false;
+</span><span class='line'>          $scope.registerForm = {};
+</span><span class='line'>        })
+</span><span class='line'>        // handle error
+</span><span class='line'>        .catch(function () {
+</span><span class='line'>          $scope.error = true;
+</span><span class='line'>          $scope.errorMessage = "Something went wrong!";
+</span><span class='line'>          $scope.disabled = false;
+</span><span class='line'>          $scope.registerForm = {};
+</span><span class='line'>        });
+</span><span class='line'>
+</span><span class='line'>    };
+</span><span class='line'>
+</span><span class='line'>}]);
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;You&rsquo;ve seen this before, so let&rsquo;s move right on to testing.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Fire up the server and register a new user at &lt;a href="http://localhost:3000/#/register"&gt;http://localhost:3000/#/register&lt;/a&gt;. Make sure to test logging in with that new user as well.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Well, that&rsquo;s it for the templates and controllers. We now need to add in functionality to check if a user is logged in on each and every change of route.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h3&gt;Route Changes&lt;/h3&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Start by adding the following code to &lt;em&gt;main.js&lt;/em&gt;:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;myApp.run(function ($rootScope, $location, $route, AuthService) {
+</span><span class='line'>  $rootScope.$on('$routeChangeStart',
+</span><span class='line'>    function (event, next, current) {
+</span><span class='line'>    if (AuthService.isLoggedIn() === false) {
+</span><span class='line'>      $location.path('/login');
+</span><span class='line'>    }
+</span><span class='line'>  });
+</span><span class='line'>});
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;The &lt;a href="https://code.angularjs.org/1.4.9/docs/api/ngRoute/service/$route"&gt;$routeChangeStart&lt;/a&gt; event fires before the actual route change occurs. So, whenever a route is accessed, before the view is served, we ensure that the user is logged in. Test this out!&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h2&gt;Route Restriction&lt;/h2&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Right now all client-side routes require a user to be logged in. What if you want certain routes restricted and other routes open?&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;You can add the following code to each route handler, replacing &lt;code&gt;true&lt;/code&gt; with &lt;code&gt;false&lt;/code&gt; for routes that you do not want to restrict:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;access: {restricted: true}
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;For example:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;myApp.config(function ($routeProvider) {
+</span><span class='line'>  $routeProvider
+</span><span class='line'>    .when('/', {
+</span><span class='line'>      templateUrl: 'partials/home.html',
+</span><span class='line'>      access: {restricted: true}
+</span><span class='line'>    })
+</span><span class='line'>    .when('/login', {
+</span><span class='line'>      templateUrl: 'partials/login.html',
+</span><span class='line'>      controller: 'loginController',
+</span><span class='line'>      access: {restricted: false}
+</span><span class='line'>    })
+</span><span class='line'>    .when('/logout', {
+</span><span class='line'>      controller: 'logoutController',
+</span><span class='line'>      access: {restricted: true}
+</span><span class='line'>    })
+</span><span class='line'>    .when('/register', {
+</span><span class='line'>      templateUrl: 'partials/register.html',
+</span><span class='line'>      controller: 'registerController',
+</span><span class='line'>      access: {restricted: false}
+</span><span class='line'>    })
+</span><span class='line'>    .when('/one', {
+</span><span class='line'>      template: '&lt;h1&gt;This is page one!&lt;/h1&gt;',
+</span><span class='line'>      access: {restricted: true}
+</span><span class='line'>    })
+</span><span class='line'>    .when('/two', {
+</span><span class='line'>      template: '&lt;h1&gt;This is page two!&lt;/h1&gt;',
+</span><span class='line'>      access: {restricted: false}
+</span><span class='line'>    })
+</span><span class='line'>    .otherwise({
+</span><span class='line'>      redirectTo: '/'
+</span><span class='line'>    });
+</span><span class='line'>});
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Now just update the &lt;code&gt;$routeChangeStart&lt;/code&gt; code in &lt;em&gt;main.js&lt;/em&gt;:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;myApp.run(function ($rootScope, $location, $route, AuthService) {
+</span><span class='line'>  $rootScope.$on('$routeChangeStart',
+</span><span class='line'>  function (event, next, current) {
+</span><span class='line'>    if (next.access.restricted &amp;&amp; AuthService.isLoggedIn() === false) {
+</span><span class='line'>      $location.path('/login');
+</span><span class='line'>      $route.reload();
+</span><span class='line'>    }
+</span><span class='line'>  });
+</span><span class='line'>});
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Test it out!&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h2&gt;Persistant Login&lt;/h2&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Finally, what happens on a page refresh? Try it.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;The user is logged out, right? Why? Because the controller and services are called again, setting the &lt;code&gt;user&lt;/code&gt; variable to &lt;code&gt;null&lt;/code&gt;. This is a problem since the user is still logged in on the server side.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Fortunately, the fix is simple: Within the &lt;code&gt;$routeChangeStart&lt;/code&gt; we need to ALWAYS check if a user is logged in. Right now, it&rsquo;s checking whether &lt;code&gt;isLoggedIn()&lt;/code&gt; is &lt;code&gt;false&lt;/code&gt;. Let&rsquo;s update &lt;code&gt;getUserStatus()&lt;/code&gt; so that it checks the user status on the back-end:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;function getUserStatus() {
+</span><span class='line'>  return $http.get('/user/status')
+</span><span class='line'>  // handle success
+</span><span class='line'>  .success(function (data) {
+</span><span class='line'>    if(data.status){
+</span><span class='line'>      user = true;
+</span><span class='line'>    } else {
+</span><span class='line'>      user = false;
+</span><span class='line'>    }
+</span><span class='line'>  })
+</span><span class='line'>  // handle error
+</span><span class='line'>  .error(function (data) {
+</span><span class='line'>    user = false;
+</span><span class='line'>  });
+</span><span class='line'>}
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Then add the route handler:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;router.get('/status', function(req, res) {
+</span><span class='line'>  if (!req.isAuthenticated()) {
+</span><span class='line'>    return res.status(200).json({
+</span><span class='line'>      status: false
+</span><span class='line'>    });
+</span><span class='line'>  }
+</span><span class='line'>  res.status(200).json({
+</span><span class='line'>    status: true
+</span><span class='line'>  });
+</span><span class='line'>});
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Finally, update the &lt;code&gt;$routeChangeStart&lt;/code&gt;:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;myApp.run(function ($rootScope, $location, $route, AuthService) {
+</span><span class='line'>  $rootScope.$on('$routeChangeStart',
+</span><span class='line'>    function (event, next, current) {
+</span><span class='line'>      AuthService.getUserStatus()
+</span><span class='line'>      .then(function(){
+</span><span class='line'>        if (next.access.restricted &amp;&amp; !AuthService.isLoggedIn()){
+</span><span class='line'>          $location.path('/login');
+</span><span class='line'>          $route.reload();
+</span><span class='line'>        }
+</span><span class='line'>      });
+</span><span class='line'>  });
+</span><span class='line'>});
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Try it out!&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h2&gt;Conclusion&lt;/h2&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;That&rsquo;s it. One thing you should note is that the Angular app can be used with various frameworks as long as the endpoints are set up correctly in the AJAX requests. So, you can easily take the Angular portion and add it to your Django or Pyramid or NodeJS app. Try it!&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;blockquote&gt;&lt;p&gt;Check out a Python/Flask app with Angular Auth &lt;a href="https://realpython.com/blog/python/handling-user-authentication-with-angular-and-flask/"&gt;here&lt;/a&gt;&lt;/p&gt;&lt;/blockquote&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Grab the final code from the &lt;a href="https://github.com/mjhea0/mean-auth"&gt;repo&lt;/a&gt;. Cheers!&lt;/p&gt;
+</span><span class='line'>]]&gt;&lt;/content&gt;
+</span><span class='line'>  &lt;/entry&gt;
+</span><span class='line'>  
+</span><span class='line'>  &lt;entry&gt;
+</span><span class='line'>    &lt;title type="html"&gt;&lt;![CDATA[Testing AngularJS With Protractor and Karma - Part 2]]&gt;&lt;/title&gt;
+</span><span class='line'>    &lt;link href="http://mherman.org/blog/2015/04/26/testing-angularjs-with-protractor-and-karma-part-2/"/&gt;
+</span><span class='line'>    &lt;updated&gt;2015-04-26T08:06:00-06:00&lt;/updated&gt;
+</span><span class='line'>    &lt;id&gt;http://mherman.org/blog/2015/04/26/testing-angularjs-with-protractor-and-karma-part-2&lt;/id&gt;
+</span><span class='line'>    &lt;content type="html"&gt;&lt;![CDATA[&lt;p&gt;&lt;strong&gt;This article details how to test a simple AngularJS application using unit tests and end-to-end (E2E) tests.&lt;/strong&gt;&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;div style="text-align:center;"&gt;
+</span><span class='line'>  &lt;img src="https://raw.githubusercontent.com/mjhea0/angular-testing-tutorial/master/img/angular-protractor.png" style="max-width: 100%; border:0;" alt="angular + protractor"&gt;
+</span><span class='line'>&lt;/div&gt;
+</span><span class='line'>
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;&lt;br&gt;&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;ul&gt;
+</span><span class='line'>&lt;li&gt;&lt;a href="http://mherman.org/blog/2015/04/09/testing-angularjs-with-protractor-and-karma-part-1"&gt;Part 1&lt;/a&gt; - In the first part we&rsquo;ll look at unit tests, which ensure that small, isolated pieces of code (e.g., a unit) behave as expected.&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;Part 2 - In part two we&rsquo;ll address E2E tests, which verify that all the pieces of code (units) fit together by simulating the user experience through browser automation. &lt;strong&gt;(current)&lt;/strong&gt;&lt;/li&gt;
+</span><span class='line'>&lt;/ul&gt;
+</span><span class='line'>
+</span><span class='line'>
+</span><span class='line'>&lt;blockquote&gt;&lt;p&gt;&lt;em&gt;Updates&lt;/em&gt;: December 3rd, 2016 - bumped dependencies&lt;/p&gt;&lt;/blockquote&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Having finished up unit testing, let&rsquo;s now turn our attention to e2e testing using &lt;a href="http://angular.github.io/protractor/#/"&gt;Protractor&lt;/a&gt;, which is a testing framework built specifically for AngularJS apps. Essentially, it runs tests against an app in the browser via &lt;a href="http://seleniumhq.github.io/selenium/docs/api/javascript/"&gt;Selenium Webdriver&lt;/a&gt;, interacting with the app from an end user’s perspective.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;div style="text-align:center;"&gt;
+</span><span class='line'>  &lt;img src="https://raw.githubusercontent.com/mjhea0/angular-testing-tutorial/master/img/components.png" style="max-width: 100%; border:0;" alt="protractor components"&gt;
+</span><span class='line'>&lt;/div&gt;
+</span><span class='line'>
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;&lt;br&gt;&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Since e2e tests are much more expensive than unit tests - e.g., they generally take more time to run and are harder to write and maintain - you should almost always focus the majority of your testing efforts on unit tests. It&rsquo;s good to follow the 80/20 rule - 80% of your tests are unit tests, while 20% are e2e tests. That said, this tutorial series breaks this rule since the goal is to educate. Keep this in mind as you write your own tests against your own application.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Also, make sure you test the most important aspects/functions of your application with your e2e tests. Don&rsquo;t waste time on the trivial. Again, they are expensive, so make each one count.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;The &lt;a href="https://github.com/mjhea0/angular-testing-tutorial"&gt;repo&lt;/a&gt; includes the following tags:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;ol&gt;
+</span><span class='line'>&lt;li&gt;&lt;em&gt;v1&lt;/em&gt; - &lt;a href="https://github.com/mjhea0/angular-testing-tutorial/releases/tag/v1"&gt;project boilerplate&lt;/a&gt;&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;&lt;em&gt;v2&lt;/em&gt; - &lt;a href="https://github.com/mjhea0/angular-testing-tutorial/releases/tag/v2"&gt;adds testing boilerplate/configuration&lt;/a&gt;&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;&lt;em&gt;v3&lt;/em&gt; - &lt;a href="https://github.com/mjhea0/angular-testing-tutorial/releases/tag/v3"&gt;adds unit tests&lt;/a&gt;&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;&lt;em&gt;v4&lt;/em&gt; - &lt;a href="https://github.com/mjhea0/angular-testing-tutorial/releases/tag/v4"&gt;adds E2E tests&lt;/a&gt;&lt;/li&gt;
+</span><span class='line'>&lt;/ol&gt;
+</span><span class='line'>
+</span><span class='line'>
+</span><span class='line'>&lt;h2&gt;Project Setup&lt;/h2&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Assuming you followed the &lt;a href="http://mherman.org/blog/2015/04/09/testing-angularjs-with-protractor-and-karma-part-1"&gt;first part&lt;/a&gt; of this tutorial, checkout the third tag, &lt;code&gt;v3&lt;/code&gt;, and then run the current test suite starting with the unit tests:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="sh"&gt;$ git checkout tags/v3
+</span><span class='line'>$ gulp unit
+</span><span class='line'>
+</span><span class='line'>[23:30:01] Using gulpfile ~/angular-testing-tutorial/Gulpfile.js
+</span><span class='line'>[23:30:01] Starting 'unit'...
+</span><span class='line'>INFO [karma]: Karma v0.12.31 server started at http://localhost:9876/
+</span><span class='line'>INFO [launcher]: Starting browser Chrome
+</span><span class='line'>INFO [Chrome 42.0.2311 (Mac OS X 10.10.2)]: Connected on socket i04LmGbgt7P1lNIUTgIJ with id 48442826
+</span><span class='line'>Chrome 42.0.2311 (Mac OS X 10.10.2): Executed 12 of 12 SUCCESS (0.236 secs / 0.051 secs)
+</span><span class='line'>[23:30:06] Finished 'unit' after 4.43 s
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;For the e2e tests, you&rsquo;ll need to open two new terminal windows. In the first new window, run &lt;code&gt;webdriver-manager start&lt;/code&gt;. In the second, navigate to your project directory and then run the app - &lt;code&gt;gulp&lt;/code&gt;.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Finally, back in the original window, run the tests:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="sh"&gt;$ gulp e2e
+</span><span class='line'>
+</span><span class='line'>[23:31:11] Using gulpfile ~/angular-testing-tutorial/Gulpfile.js
+</span><span class='line'>[23:31:11] Starting 'e2e'...
+</span><span class='line'>Using the selenium server at http://localhost:4444/wd/hub
+</span><span class='line'>[launcher] Running 1 instances of WebDriver
+</span><span class='line'>.
+</span><span class='line'>
+</span><span class='line'>Finished in 1.174 seconds
+</span><span class='line'>1 test, 1 assertion, 0 failures
+</span><span class='line'>
+</span><span class='line'>[launcher] 0 instance(s) of WebDriver still running
+</span><span class='line'>[launcher] chrome #1 passed
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Everything look good?&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h2&gt;The Tests&lt;/h2&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Open the test spec, &lt;em&gt;spec.js&lt;/em&gt;, within the &ldquo;tests/e2e&rdquo; directory. Let&rsquo;s look at the first test:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;describe('myController', function () {
+</span><span class='line'>
+</span><span class='line'>  it('the dom initially has a greeting', function () {
+</span><span class='line'>    browser.get('http://localhost:8888/#/one');
+</span><span class='line'>    expect(element(by.id('greeting')).getText()).toEqual('Hello, World!');
+</span><span class='line'>  });
+</span><span class='line'>
+</span><span class='line'>});
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Notice how we&rsquo;re still using &lt;a href="http://mochajs.org/"&gt;Mocha&lt;/a&gt; and &lt;a href="http://chaijs.com/"&gt;Chai&lt;/a&gt; to &lt;a href="http://angular.github.io/protractor/#/frameworks"&gt;manage/structure&lt;/a&gt; the test so that it simply opens &lt;code&gt;http://localhost:8888/#/one&lt;/code&gt; and then asserts that the text within the HTML element with an ID of &lt;code&gt;greeting&lt;/code&gt; is  &lt;code&gt;Hello, World!&lt;/code&gt;. Simple, right?&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Let&rsquo;s take a quick look at the Angular services that we&rsquo;re using:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;ol&gt;
+</span><span class='line'>&lt;li&gt;&lt;a href="http://angular.github.io/protractor/#/api?view=Protractor"&gt;browser&lt;/a&gt; - loads the page in the browser&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;&lt;a href="http://angular.github.io/protractor/#/api?view=ElementFinder"&gt;element&lt;/a&gt; - interacts with the page&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;&lt;a href="http://angular.github.io/protractor/#/api?view=ProtractorBy"&gt;by&lt;/a&gt; - finds elements within the page&lt;/li&gt;
+</span><span class='line'>&lt;/ol&gt;
+</span><span class='line'>
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Finally, one important thing to note is how these tests run. Notice that there&rsquo;s no callbacks and/or promises in the test. How does that work with asynchronous code? Simple: Protractor continues to check each assertion until it passes or a certain amount of &lt;a href="https://github.com/angular/protractor/blob/master/docs/timeouts.md"&gt;time&lt;/a&gt; passes. There also is a &lt;a href="http://angular.github.io/protractor/#/api?view=then"&gt;promise&lt;/a&gt; attached to most methods that can be access using &lt;code&gt;then&lt;/code&gt;.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;With that, let&rsquo;s write some tests on our own.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h3&gt;TestOneController&lt;/h3&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Just like in the first part, open the controller code:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;myApp.controller('TestOneController', function($scope) {
+</span><span class='line'>  $scope.greeting = "Hello, World!";
+</span><span class='line'>  $scope.newText = undefined;
+</span><span class='line'>  $scope.changeGreeting = function() {
+</span><span class='line'>    if ($scope.newText !== undefined) {
+</span><span class='line'>      $scope.greeting = $scope.newText;
+</span><span class='line'>    }
+</span><span class='line'>  };
+</span><span class='line'>});
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;How about the HTML?&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;<figure class='code'><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="ni">&amp;lt;</span>/p<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span><span class="ni">&amp;lt;</span>h2<span class="ni">&amp;gt;</span>Say something<span class="ni">&amp;lt;</span>/h2<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span><span class="ni">&amp;lt;</span>p<span class="ni">&amp;gt;&amp;lt;</span>input type=&quot;text&quot; ng-model=&quot;newText&quot;<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span><span class="ni">&amp;lt;</span>button class=&quot;btn btn-default&quot; ng-click=&quot;changeGreeting()&quot;<span class="ni">&amp;gt;</span>Change!<span class="ni">&amp;lt;</span>/button<span class="ni">&amp;gt;&amp;lt;</span>/p<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span><span class="ni">&amp;lt;</span>p id=&quot;greeting&quot;<span class="ni">&amp;gt;</span>{{ greeting }}<span class="ni">&amp;lt;</span>/p<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span><span class="ni">&amp;lt;</span>p<span class="ni">&amp;gt;</span>
+</span></code></pre></td></tr></table></div></figure>&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Looking at the Angular code along with the HTML, we know that on the button click, &lt;code&gt;greeting&lt;/code&gt; is updated with the user supplied text from the input box. Sound right? Test this out: With the app running via Gulp, navigate to &lt;a href="http://localhost:8888/#/one"&gt;http://localhost:8888/#/one&lt;/a&gt; and manually test the app to ensure that the controller is working as it should.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Now since we already tested the initial state of &lt;code&gt;greeting&lt;/code&gt;, let&rsquo;s write the test to ensure that the state updates on the button click:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;describe('TestOneController', function () {
+</span><span class='line'>
+</span><span class='line'>  beforeEach(function() {
+</span><span class='line'>    browser.get('http://localhost:8888/#/one');
+</span><span class='line'>  });
+</span><span class='line'>
+</span><span class='line'>  it('initially has a greeting', function () {
+</span><span class='line'>    expect(element(by.id('greeting')).getText()).toEqual('Hello, World!');
+</span><span class='line'>  });
+</span><span class='line'>
+</span><span class='line'>  it('clicking the button changes the greeting if text is inputed', function () {
+</span><span class='line'>    element(by.css('[ng-model="newText"]')).sendKeys('Hi!');
+</span><span class='line'>    element(by.css('.btn-default')).click();
+</span><span class='line'>    expect(element(by.id('greeting')).getText()).toEqual('Hi!');
+</span><span class='line'>  });
+</span><span class='line'>
+</span><span class='line'>  it('clicking the button does not change the greeting if text is not inputed', function () {
+</span><span class='line'>    element(by.css('.btn-default')).click();
+</span><span class='line'>    expect(element(by.id('greeting')).getText()).toEqual('Hello, World!');
+</span><span class='line'>  });
+</span><span class='line'>
+</span><span class='line'>});
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;So, in both new test cases we&rsquo;re targeting the input form - via the global &lt;a href="http://angular.github.io/protractor/#/locators"&gt;element&lt;/a&gt; function - and adding text to it with the &lt;code&gt;sendKeys()&lt;/code&gt; method - &lt;code&gt;Hi!&lt;/code&gt; in the first test and no text in the second. Then after clicking the button, we&rsquo;re asserting that the text contained within the HTML element with an id of &ldquo;greeting&rdquo; is as expected.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Run the tests. If all went well, you should see:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="sh"&gt;[06:15:45] Using gulpfile ~/angular-testing-tutorial/Gulpfile.js
+</span><span class='line'>[06:15:45] Starting 'e2e'...
+</span><span class='line'>Using the selenium server at http://localhost:4444/wd/hub
+</span><span class='line'>[launcher] Running 1 instances of WebDriver
+</span><span class='line'>...
+</span><span class='line'>
+</span><span class='line'>Finished in 3.606 seconds
+</span><span class='line'>3 tests, 3 assertions, 0 failures
+</span><span class='line'>
+</span><span class='line'>[launcher] 0 instance(s) of WebDriver still running
+</span><span class='line'>[launcher] chrome #1 passed
+</span><span class='line'>Michaels-MacBook-Pro-3:angular-testing-tutorial michael$
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Did you see Chrome open in a new window and run the tests, then close itself? It&rsquo;s super fast!! Want to run the tests in Firefox (or a different &lt;a href="http://angular.github.io/protractor/#/browser-support"&gt;browser&lt;/a&gt;) as well? Simply update the Protractor config file, &lt;em&gt;protractor.conf.js&lt;/em&gt;, like so:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;exports.config = {
+</span><span class='line'>  seleniumAddress: 'http://localhost:4444/wd/hub',
+</span><span class='line'>  specs: ['tests/e2e/*.js'],
+</span><span class='line'>  multiCapabilities: [{
+</span><span class='line'>    browserName: 'firefox'
+</span><span class='line'>  }, {
+</span><span class='line'>    browserName: 'chrome'
+</span><span class='line'>  }]
+</span><span class='line'>};
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Test it again. You should now see the tests run in both Chrome and Firefox simultaneously. Nice.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Finally, to simplify the code and speed up the tests (so we only search the DOM once per element), we can assign each element to a variable:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;describe('TestOneController', function () {
+</span><span class='line'>
+</span><span class='line'>  var greeting = element(by.id('greeting'));
+</span><span class='line'>  var textInputBox = element(by.css('[ng-model="newText"]'));
+</span><span class='line'>  var changeGreetingButton = element(by.css('.btn-default'));
+</span><span class='line'>
+</span><span class='line'>  beforeEach(function() {
+</span><span class='line'>    browser.get('http://localhost:8888/#/one');
+</span><span class='line'>  });
+</span><span class='line'>
+</span><span class='line'>  it('initially has a greeting', function () {
+</span><span class='line'>    expect(greeting.getText()).toEqual('Hello, World!');
+</span><span class='line'>  });
+</span><span class='line'>
+</span><span class='line'>  it('clicking the button changes the greeting if text is inputed', function () {
+</span><span class='line'>    textInputBox.sendKeys('Hi!');
+</span><span class='line'>    changeGreetingButton.click();
+</span><span class='line'>    expect(greeting.getText()).toEqual('Hi!');
+</span><span class='line'>  });
+</span><span class='line'>
+</span><span class='line'>  it('clicking the button does not change the greeting if text is not inputed', function () {
+</span><span class='line'>    textInputBox.sendKeys('');
+</span><span class='line'>    changeGreetingButton.click();
+</span><span class='line'>    expect(greeting.getText()).toEqual('Hello, World!');
+</span><span class='line'>  });
+</span><span class='line'>
+</span><span class='line'>});
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Test one last time to ensure that this refactor didn&rsquo;t break anything.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h3&gt;TestTwoController&lt;/h3&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Again, start with the code.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Angular:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="sh"&gt;myApp.controller('TestTwoController', function($scope) {
+</span><span class='line'>  $scope.total = 6;
+</span><span class='line'>  $scope.newItem = undefined;
+</span><span class='line'>  $scope.items = [1, 2, 3];
+</span><span class='line'>  $scope.add = function () {
+</span><span class='line'>    if(typeof $scope.newItem == 'number') {
+</span><span class='line'>      $scope.items.push($scope.newItem);
+</span><span class='line'>      $scope.total = 0;
+</span><span class='line'>      for(var i = 0; i &lt; $scope.items.length; i++){
+</span><span class='line'>        $scope.total += parseInt($scope.items[i]);
+</span><span class='line'>      }
+</span><span class='line'>    }
+</span><span class='line'>  };
+</span><span class='line'>});
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;HTML:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;<figure class='code'><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="ni">&amp;lt;</span>/p<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span><span class="ni">&amp;lt;</span>h2<span class="ni">&amp;gt;</span>Add values<span class="ni">&amp;lt;</span>/h2<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span><span class="ni">&amp;lt;</span>p<span class="ni">&amp;gt;&amp;lt;</span>input type=&quot;number&quot; ng-model=&quot;newItem&quot;<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span><span class="ni">&amp;lt;</span>button class=&quot;btn btn-default&quot; ng-click=&quot;add()&quot;<span class="ni">&amp;gt;</span>Add!<span class="ni">&amp;lt;</span>/button<span class="ni">&amp;gt;&amp;lt;</span>/p<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span><span class="ni">&amp;lt;</span>p<span class="ni">&amp;gt;</span>{{ total }}<span class="ni">&amp;lt;</span>/p<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span><span class="ni">&amp;lt;</span>p<span class="ni">&amp;gt;</span>
+</span></code></pre></td></tr></table></div></figure>&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Then test it in the browser.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Like last time, we simply need to ensure that &lt;code&gt;total&lt;/code&gt; is updated appropriately when the end user submits a number in the input box and then clicks the button.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;describe('TestTwoController', function () {
+</span><span class='line'>
+</span><span class='line'>  var total = element(by.tagName('p'));
+</span><span class='line'>  var numberInputBox = element(by.css('[ng-model="newItem"]'));
+</span><span class='line'>  var changeTotalButton = element(by.css('.btn-default'));
+</span><span class='line'>
+</span><span class='line'>  beforeEach(function() {
+</span><span class='line'>    browser.get('http://localhost:8888/#/two');
+</span><span class='line'>  });
+</span><span class='line'>
+</span><span class='line'>  it('initially has a total', function () {
+</span><span class='line'>    expect(total.getText()).toEqual('6');
+</span><span class='line'>  });
+</span><span class='line'>
+</span><span class='line'>  it('updates the `total` when a value is added', function () {
+</span><span class='line'>    numberInputBox.sendKeys(7);
+</span><span class='line'>    changeTotalButton.click();
+</span><span class='line'>    numberInputBox.clear();
+</span><span class='line'>    expect(total.getText()).toEqual('13');
+</span><span class='line'>    numberInputBox.sendKeys(7);
+</span><span class='line'>    changeTotalButton.click();
+</span><span class='line'>    expect(total.getText()).toEqual('20');
+</span><span class='line'>    numberInputBox.clear();
+</span><span class='line'>    numberInputBox.sendKeys(-700);
+</span><span class='line'>    changeTotalButton.click();
+</span><span class='line'>    expect(total.getText()).toEqual('-680');
+</span><span class='line'>  });
+</span><span class='line'>
+</span><span class='line'>  it('does not update the `total` when an empty value is added', function () {
+</span><span class='line'>    numberInputBox.sendKeys('');
+</span><span class='line'>    changeTotalButton.click();
+</span><span class='line'>    expect(total.getText()).toEqual('6');
+</span><span class='line'>    numberInputBox.sendKeys('hi!');
+</span><span class='line'>    changeTotalButton.click();
+</span><span class='line'>    expect(total.getText()).toEqual('6');
+</span><span class='line'>  });
+</span><span class='line'>
+</span><span class='line'>});
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Run the tests and you should see:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="sh"&gt;6 tests, 9 assertions, 0 failures
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Moving along&hellip;&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h3&gt;TestThreeController&lt;/h3&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;You know the drill:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;ol&gt;
+</span><span class='line'>&lt;li&gt;Look at the Angular and HTML code&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;Manually test in the browser&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;Write the e2e test to automate the manual test&lt;/li&gt;
+</span><span class='line'>&lt;/ol&gt;
+</span><span class='line'>
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Try this on your own before looking at the code below.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;describe('TestThreeController', function () {
+</span><span class='line'>
+</span><span class='line'>  var modalNumber = element.all(by.tagName('span')).get(1);
+</span><span class='line'>  var modalButton = element(by.tagName('button'));
+</span><span class='line'>  var iterateButton = element(by.css('[ng-click="changeModalText()"]'));
+</span><span class='line'>  var hideButton = element(by.css('[ng-click="$hide()"]'));
+</span><span class='line'>  var justSomeText = element(by.tagName('h2'));
+</span><span class='line'>
+</span><span class='line'>  beforeEach(function() {
+</span><span class='line'>    browser.get('http://localhost:8888/#/three');
+</span><span class='line'>  });
+</span><span class='line'>
+</span><span class='line'>  it('initially has a modalNumber', function () {
+</span><span class='line'>    modalButton.click();
+</span><span class='line'>    expect(modalNumber.getText()).toEqual('1');
+</span><span class='line'>  });
+</span><span class='line'>
+</span><span class='line'>  it('updates the `modalNumber` when a value is added', function () {
+</span><span class='line'>    modalButton.click();
+</span><span class='line'>    iterateButton.click();
+</span><span class='line'>    expect(modalNumber.getText()).toEqual('2');
+</span><span class='line'>    iterateButton.click().click().click();
+</span><span class='line'>    expect(modalNumber.getText()).toEqual('5');
+</span><span class='line'>    hideButton.click();
+</span><span class='line'>    expect(justSomeText.getText()).toEqual('Just a modal');
+</span><span class='line'>  });
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h3&gt;TestFourController&lt;/h3&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Since this controller makes an external call to &lt;a href="https://api.github.com/repositories"&gt;https://api.github.com/repositories&lt;/a&gt; you can either mock out (fake) this request using &lt;a href="https://docs.angularjs.org/api/ngMockE2E"&gt;ngMockE2E&lt;/a&gt;, like we did for the unit test, or you can actually make the API call. Again, this depends on how expensive the call is and how important the functionality is to your application. In most cases, it&rsquo;s better to actually make the call since e2e tests should mimic the actual end user experience as much as possible. Plus, unlike unit tests which test implementation, these tests test user behavior, across several independent units - thus, these tests should not be isolated and can rely on making actual API calls either to the back-end or externally.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;describe('TestFourController', function () {
+</span><span class='line'>
+</span><span class='line'>  var loadButton = element(by.tagName('button'));
+</span><span class='line'>  var ul = element.all(by.tagName('ul'));
+</span><span class='line'>  var li = element.all(by.tagName('li'));
+</span><span class='line'>
+</span><span class='line'>  beforeEach(function() {
+</span><span class='line'>    browser.get('http://localhost:8888/#/four');
+</span><span class='line'>  });
+</span><span class='line'>
+</span><span class='line'>  it('updates the DOM when the button is clicked', function () {
+</span><span class='line'>    expect(ul.count()).toEqual(1);
+</span><span class='line'>    expect(li.count()).toEqual(5);
+</span><span class='line'>    loadButton.click();
+</span><span class='line'>    expect(ul.count()).toEqual(101);
+</span><span class='line'>    expect(li.count()).toEqual(105);
+</span><span class='line'>  });
+</span><span class='line'>
+</span><span class='line'>});
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Here, when the button is clicked, the API call is made and the scope is updated. We then assert that there are 101 UL tags and 105 LI tags, representing a Github username and repo returned from the API call, present on the DOM.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;That&rsquo;s it!&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h2&gt;Conclusion&lt;/h2&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;&lt;em&gt;Want more?&lt;/em&gt;&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;ol&gt;
+</span><span class='line'>&lt;li&gt;Take a look at the &lt;a href="http://angular.github.io/protractor/#/page-objects"&gt;Page Objects&lt;/a&gt; design pattern and refactor the tests so that they are better organized.&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;Break a test, and then &lt;a href="http://angular.github.io/protractor/#/debugging#pausing-to-debug"&gt;pause&lt;/a&gt; the test before the break via &lt;code&gt;browser.pause()&lt;/code&gt; and/or &lt;code&gt;browser.debugger()&lt;/code&gt; to debug.&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;Test your own Angular app, and then add a link to the comments to get feedback.&lt;/li&gt;
+</span><span class='line'>&lt;/ol&gt;
+</span><span class='line'>
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Be sure to check the &lt;a href="http://angular.github.io/protractor/#/"&gt;Protractor&lt;/a&gt; documentation for more. Thanks again for reading, and happy testing!&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;hr&gt;&lt;br&gt;
+</span><span class='line'>
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;&lt;em&gt;Interested in learning how to test an Angular + Django app? Check out &lt;a href="http://www.realpython.com/"&gt;Real Python&lt;/a&gt; for details.&lt;/em&gt;&lt;/p&gt;
+</span><span class='line'>]]&gt;&lt;/content&gt;
+</span><span class='line'>  &lt;/entry&gt;
+</span><span class='line'>  
+</span><span class='line'>  &lt;entry&gt;
+</span><span class='line'>    &lt;title type="html"&gt;&lt;![CDATA[Testing AngularJS With Protractor and Karma - Part 1]]&gt;&lt;/title&gt;
+</span><span class='line'>    &lt;link href="http://mherman.org/blog/2015/04/09/testing-angularjs-with-protractor-and-karma-part-1/"/&gt;
+</span><span class='line'>    &lt;updated&gt;2015-04-09T09:06:00-06:00&lt;/updated&gt;
+</span><span class='line'>    &lt;id&gt;http://mherman.org/blog/2015/04/09/testing-angularjs-with-protractor-and-karma-part-1&lt;/id&gt;
+</span><span class='line'>    &lt;content type="html"&gt;&lt;![CDATA[&lt;p&gt;&lt;strong&gt;This article details how to test a simple AngularJS application using unit tests and end-to-end (E2E) tests.&lt;/strong&gt;&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;div style="text-align:center;"&gt;
+</span><span class='line'>  &lt;img src="https://raw.githubusercontent.com/mjhea0/angular-testing-tutorial/master/img/angular-karma.png" style="max-width: 100%; border:0;" alt="angular + karma"&gt;
+</span><span class='line'>&lt;/div&gt;
+</span><span class='line'>
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;&lt;br&gt;&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;ul&gt;
+</span><span class='line'>&lt;li&gt;Part 1 - In the first part we&rsquo;ll look at unit tests, which ensure that small, isolated pieces of code (e.g., a unit) behave as expected &lt;strong&gt;(current)&lt;/strong&gt;.&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;&lt;a href="http://mherman.org/blog/2015/04/26/testing-angularjs-with-protractor-and-karma-part-2"&gt;Part 2&lt;/a&gt; - In part two we&rsquo;ll address E2E tests, which verify that all the pieces of code (units) fit together by simulating the user experience through browser automation.&lt;/li&gt;
+</span><span class='line'>&lt;/ul&gt;
+</span><span class='line'>
+</span><span class='line'>
+</span><span class='line'>&lt;blockquote&gt;&lt;p&gt;&lt;em&gt;Updates&lt;/em&gt;: December 3rd, 2016 - bumped dependencies&lt;/p&gt;&lt;/blockquote&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;To accomplish this we will be using &lt;a href="http://karma-runner.github.io/"&gt;Karma&lt;/a&gt; v0.12.31 (test runner) and &lt;a href="http://chaijs.com/"&gt;Chai&lt;/a&gt; v2.2.0 (assertions) for the unit tests (along with &lt;a href="https://github.com/karma-runner/karma-mocha"&gt;Karma-Mocha&lt;/a&gt;) and &lt;a href="http://angular.github.io/protractor/#/"&gt;Protractor&lt;/a&gt; v2.0.0 for the E2E tests. This article also uses &lt;a href="https://angularjs.org/"&gt;Angular&lt;/a&gt; v1.3.15. Be sure to take note of all dependencies and their versions in the &lt;em&gt;package.json&lt;/em&gt; and &lt;em&gt;bower.json&lt;/em&gt; files in the &lt;a href="https://github.com/mjhea0/angular-testing-tutorial"&gt;repo&lt;/a&gt;.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;The repo includes the following tags:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;ol&gt;
+</span><span class='line'>&lt;li&gt;&lt;em&gt;v1&lt;/em&gt; - &lt;a href="https://github.com/mjhea0/angular-testing-tutorial/releases/tag/v1"&gt;project boilerplate&lt;/a&gt;&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;&lt;em&gt;v2&lt;/em&gt; - &lt;a href="https://github.com/mjhea0/angular-testing-tutorial/releases/tag/v2"&gt;adds testing boilerplate/configuration&lt;/a&gt;&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;&lt;em&gt;v3&lt;/em&gt; - &lt;a href="https://github.com/mjhea0/angular-testing-tutorial/releases/tag/v3"&gt;adds unit tests&lt;/a&gt;&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;&lt;em&gt;v4&lt;/em&gt; - &lt;a href="https://github.com/mjhea0/angular-testing-tutorial/releases/tag/v4"&gt;adds E2E tests&lt;/a&gt;&lt;/li&gt;
+</span><span class='line'>&lt;/ol&gt;
+</span><span class='line'>
+</span><span class='line'>
+</span><span class='line'>&lt;h2&gt;Project Setup&lt;/h2&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Start by cloning the repo, checkout out the first tag, and then install the dependencies:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="sh"&gt;$ git clone https://github.com/mjhea0/angular-testing-tutorial.git
+</span><span class='line'>$ cd angular-testing-tutorial
+</span><span class='line'>$ git checkout tags/v1
+</span><span class='line'>$ npm install &amp;&amp; bower install
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Run the app:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="sh"&gt;$ gulp
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Navigate to &lt;a href="http://localhost:8888"&gt;http://localhost:8888&lt;/a&gt; to view the live app.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;div style="text-align:center;"&gt;
+</span><span class='line'>  &lt;img src="https://raw.githubusercontent.com/mjhea0/angular-testing-tutorial/master/img/live-app.png" style="max-width: 100%; border:0;" alt="angular app"&gt;
+</span><span class='line'>&lt;/div&gt;
+</span><span class='line'>
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;&lt;br&gt;&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Test it out. Once done, kill the server and checkout the second tag:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="sh"&gt;$ git checkout tags/v2
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;There should now be a &ldquo;tests&rdquo; folder and a few more tasks in the Gulpfile.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Run the unit tests:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="sh"&gt;$ gulp unit
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;They should pass:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="sh"&gt;[05:28:02] Using gulpfile ~/angular-testing-tutorial/Gulpfile.js
+</span><span class='line'>[05:28:02] Starting 'unit'...
+</span><span class='line'>INFO [karma]: Karma v0.12.31 server started at http://localhost:9876/
+</span><span class='line'>INFO [launcher]: Starting browser Chrome
+</span><span class='line'>INFO [Chrome 41.0.2272 (Mac OS X 10.10.2)]: Connected on socket JBQp0aEyu8KSqUfGoxsd with id 94772581
+</span><span class='line'>Chrome 41.0.2272 (Mac OS X 10.10.2): Executed 2 of 2 SUCCESS (0.061 secs / 0.002 secs)
+</span><span class='line'>[05:28:05] Finished 'unit' after 3.23 s
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Now for the e2e tests:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;ol&gt;
+</span><span class='line'>&lt;li&gt;1st terminal window: &lt;code&gt;webdriver-manager start&lt;/code&gt;&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;2nd terminal window (within the project directory): &lt;code&gt;gulp&lt;/code&gt;&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;3rd terminal window (within the project directory): &lt;code&gt;gulp e2e&lt;/code&gt;&lt;/li&gt;
+</span><span class='line'>&lt;/ol&gt;
+</span><span class='line'>
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;They should pass as well:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="sh"&gt;[05:29:45] Using gulpfile ~/angular-testing-tutorial/Gulpfile.js
+</span><span class='line'>[05:29:45] Starting 'e2e'...
+</span><span class='line'>Using the selenium server at http://localhost:4444/wd/hub
+</span><span class='line'>[launcher] Running 1 instances of WebDriver
+</span><span class='line'>.
+</span><span class='line'>
+</span><span class='line'>Finished in 0.921 seconds
+</span><span class='line'>1 test, 1 assertion, 0 failures
+</span><span class='line'>
+</span><span class='line'>[launcher] 0 instance(s) of WebDriver still running
+</span><span class='line'>[launcher] chrome #1 passed
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;So, what&rsquo;s happening here&hellip;&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h2&gt;Configuration Files&lt;/h2&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;There are two configuration files in the &ldquo;tests&rdquo; folder - one for Karma and the other for Protractor.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h3&gt;Karma&lt;/h3&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;&lt;a href="http://karma-runner.github.io/"&gt;Karma&lt;/a&gt; is a test runner built by the AngularJS team that executes the unit tests and reports the results.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Let&rsquo;s look the config file, &lt;em&gt;karma.conf.js&lt;/em&gt;:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;module.exports = function(config) {
+</span><span class='line'>  config.set({
+</span><span class='line'>
+</span><span class='line'>    // base path that will be used to resolve all patterns
+</span><span class='line'>    basePath: '.',
+</span><span class='line'>
+</span><span class='line'>    // frameworks to use
+</span><span class='line'>    frameworks: ['mocha', 'chai'],
+</span><span class='line'>
+</span><span class='line'>    // list of files / patterns to load in the browser
+</span><span class='line'>    files: [
+</span><span class='line'>      '../app/bower_components/angular/angular.js',
+</span><span class='line'>      '../app/bower_components/jquery/dist/jquery.js',
+</span><span class='line'>      '../app/bower_components/angular-strap/dist/angular-strap.js',
+</span><span class='line'>      '../app/bower_components/angular-strap/dist/angular-strap.tpl.js',
+</span><span class='line'>      '../app/bower_components/angular-mocks/angular-mocks.js',
+</span><span class='line'>      '../app/bower_components/angular-route/angular-route.js',
+</span><span class='line'>      './unit/*.js',
+</span><span class='line'>      '../app/app.js'
+</span><span class='line'>    ],
+</span><span class='line'>
+</span><span class='line'>    // test result reporter
+</span><span class='line'>    reporters: ['progress'],
+</span><span class='line'>
+</span><span class='line'>    // web server port
+</span><span class='line'>    port: 9876,
+</span><span class='line'>
+</span><span class='line'>    // enable / disable colors in the output (reporters and logs)
+</span><span class='line'>    colors: true,
+</span><span class='line'>
+</span><span class='line'>    // level of logging
+</span><span class='line'>    logLevel: config.LOG_INFO,
+</span><span class='line'>
+</span><span class='line'>    // enable / disable watching file and executing tests whenever any file changes
+</span><span class='line'>    autoWatch: true,
+</span><span class='line'>
+</span><span class='line'>    // start these browsers
+</span><span class='line'>    browsers: ['Chrome'],
+</span><span class='line'>
+</span><span class='line'>    // Continuous Integration mode
+</span><span class='line'>    singleRun: false
+</span><span class='line'>  });
+</span><span class='line'>};
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;blockquote&gt;&lt;p&gt;You can also run &lt;code&gt;karma init&lt;/code&gt; to be guided through the creation of a config file.&lt;/p&gt;&lt;/blockquote&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Be sure to read over the comments for an overview of each config option. For more information, review the &lt;a href="http://karma-runner.github.io/0.12/config/configuration-file.html"&gt;official documentation&lt;/a&gt;.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h3&gt;Protractor&lt;/h3&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;&lt;a href="http://angular.github.io/protractor/#/"&gt;Protractor&lt;/a&gt; provides a nice wrapper around &lt;a href="https://github.com/SeleniumHQ/selenium/wiki/WebDriverJs"&gt;WebDriverJS&lt;/a&gt;, the JavaScript bindings for &lt;a href="http://seleniumhq.github.io/selenium/docs/api/javascript/"&gt;Selenium Webdriver&lt;/a&gt;, to run tests against an AngularJS application running live in a browser.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Turn your attention to the Protractor config file, &lt;em&gt;protractor.conf.js&lt;/em&gt;:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;exports.config = {
+</span><span class='line'>  seleniumAddress: 'http://localhost:4444/wd/hub',
+</span><span class='line'>  specs: ['tests/e2e/*.js']
+</span><span class='line'>};
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;This tells protractor where to find the test files (called specs) and specifies the address that the Selenium server is running on. Simple.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Ready to start testing?&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h2&gt;Unit Tests&lt;/h2&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;We&rsquo;ll start with unit tests since they are much easier to write, debug, and maintain.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Keep in mind that unit tests, by definition, only test isolated units of code so they rely heavily on mocking fake data. This can add much complexity to your tests and can decrease the effectiveness of the actual tests. For example, if you&rsquo;re mocking out an HTTP request to a back-end API, then you&rsquo;re not really testing your application. Instead you&rsquo;re simulating the request and then using fake JSON data to simulate the response back. The tests may run faster, but they are much less effective.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;When starting out, mock out only the most expensive requests and make the actual API call in other situations. Over time you will develop a better sense of which requests should be mocked and which should not.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Finally, if you decide not to mock a request in a specific test, then the test is no longer a unit test since it&rsquo;s not testing an isolated unit of code. Instead you are testing multiple units, which is an integration test. For simplicity, we will continue to refer to such tests as unit tests.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;With that, let&rsquo;s create some tests, broken up by controller!&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h3&gt;TestOneController&lt;/h3&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Take a look at the code in the first controller:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;myApp.controller('TestOneController', function($scope) {
+</span><span class='line'>  $scope.greeting = "Hello, World!";
+</span><span class='line'>  $scope.newText = undefined;
+</span><span class='line'>  $scope.changeGreeting = function() {
+</span><span class='line'>    $scope.greeting = $scope.newText;
+</span><span class='line'>  };
+</span><span class='line'>});
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;What&rsquo;s happening here? Confirm your answer by running your app and watching what happens. Now, what can/should we test?&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;ol&gt;
+</span><span class='line'>&lt;li&gt;&lt;code&gt;greeting&lt;/code&gt; has an initial value of &lt;code&gt;"Hello, World!"&lt;/code&gt;, and&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;The &lt;code&gt;changeGreeting&lt;/code&gt; function updates &lt;code&gt;greeting&lt;/code&gt;.&lt;/li&gt;
+</span><span class='line'>&lt;/ol&gt;
+</span><span class='line'>
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;You probably noticed that we are already testing this in the spec:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;describe('TestOneController', function () {
+</span><span class='line'>
+</span><span class='line'>  var controller = null;
+</span><span class='line'>  $scope = null;
+</span><span class='line'>
+</span><span class='line'>  beforeEach(function () {
+</span><span class='line'>    module('myApp');
+</span><span class='line'>  });
+</span><span class='line'>
+</span><span class='line'>  beforeEach(inject(function ($controller, $rootScope) {
+</span><span class='line'>    $scope = $rootScope.$new();
+</span><span class='line'>    controller = $controller('TestOneController', {
+</span><span class='line'>      $scope: $scope
+</span><span class='line'>    });
+</span><span class='line'>  }));
+</span><span class='line'>
+</span><span class='line'>  it('initially has a greeting', function () {
+</span><span class='line'>    assert.equal($scope.greeting, "Hello, World!");
+</span><span class='line'>  });
+</span><span class='line'>
+</span><span class='line'>  it('clicking the button changes the greeting', function () {
+</span><span class='line'>    $scope.newText = "Hi!";
+</span><span class='line'>    $scope.changeGreeting();
+</span><span class='line'>    assert.equal($scope.greeting, "Hi!");
+</span><span class='line'>  });
+</span><span class='line'>
+</span><span class='line'>});
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;What&rsquo;s happening?&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;ol&gt;
+</span><span class='line'>&lt;li&gt;The &lt;code&gt;describe&lt;/code&gt; block is used to group similar tests.&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;The module, &lt;code&gt;myApp&lt;/code&gt;, is loaded, into each test, in the first &lt;code&gt;beforeEach&lt;/code&gt; block, which instantiates a clean testing environment.&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;The dependencies are injected, a new scope is created, and the controller is instantiated in the second &lt;code&gt;beforeEach&lt;/code&gt;.&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;Each &lt;code&gt;it&lt;/code&gt; function is a separate test, which includes a title, in human readable form, and a function with the actual test code.&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;The first test asserts that the initial state of &lt;code&gt;greeting&lt;/code&gt; is &lt;code&gt;"Hello, World!"&lt;/code&gt;.&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;Meanwhile, the second test assets that the &lt;code&gt;changeGreeting()&lt;/code&gt; function actually changes the value of &lt;code&gt;greeting&lt;/code&gt;.&lt;/li&gt;
+</span><span class='line'>&lt;/ol&gt;
+</span><span class='line'>
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Make sense?&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;&lt;em&gt;In most cases, unit tests simply change the scope and assert that the results are what we expected.&lt;/em&gt;&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;blockquote&gt;&lt;p&gt;In general, when testing controllers, you inject then register the controller with a &lt;code&gt;beforeEach&lt;/code&gt; block, along with the &lt;code&gt;$rootScope&lt;/code&gt; and then test that the functions within the controller act as expected.&lt;/p&gt;&lt;/blockquote&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Run the tests again to ensure they still pass - &lt;code&gt;gulp unit&lt;/code&gt;.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;What else could we test? How about if &lt;code&gt;newText&lt;/code&gt; doesn&rsquo;t change - e.g., if the user submits the button without entering any text in the input box - then the value of &lt;code&gt;greeting&lt;/code&gt; should stay the same. Try writing this on your own, before you look at my answer:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;it('clicking the button does not change the greeting if text is not inputed', function () {
+</span><span class='line'>  $scope.changeGreeting();
+</span><span class='line'>  assert.equal($scope.greeting, "Hello, World!");
+</span><span class='line'>});
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Try running this. It should fail.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="sh"&gt;Chrome 41.0.2272 (Mac OS X 10.10.2) TestOneController clicking the button does not change the greeting FAILED
+</span><span class='line'>  AssertionError: expected undefined to equal 'Hello, World!'
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;So, we&rsquo;ve revealed a bug. We could fix this by adding validation to the input box to ensure the end user enters a value or we could update &lt;code&gt;changeGreeting&lt;/code&gt; to only update &lt;code&gt;greeting&lt;/code&gt; if &lt;code&gt;newText&lt;/code&gt; is not &lt;code&gt;undefined&lt;/code&gt;. Let&rsquo;s go with the latter.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;$scope.changeGreeting = function() {
+</span><span class='line'>  if ($scope.newText !== undefined) {
+</span><span class='line'>    $scope.greeting = $scope.newText;
+</span><span class='line'>  }
+</span><span class='line'>};
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Save the code, and then run the tests again:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="sh"&gt;$ gulp unit
+</span><span class='line'>[08:28:18] Using gulpfile ~/angular-testing-tutorial/Gulpfile.js
+</span><span class='line'>[08:28:18] Starting 'unit'...
+</span><span class='line'>INFO [karma]: Karma v0.12.31 server started at http://localhost:9876/
+</span><span class='line'>INFO [launcher]: Starting browser Chrome
+</span><span class='line'>INFO [Chrome 41.0.2272 (Mac OS X 10.10.2)]: Connected on socket HGnVC5-cAXOZjAsrSCWj with id 83240025
+</span><span class='line'>Chrome 41.0.2272 (Mac OS X 10.10.2): Executed 3 of 3 SUCCESS (0.065 secs / 0.001 secs)
+</span><span class='line'>[08:28:21] Finished 'unit' after 3.13 s
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Nice!&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;blockquote&gt;&lt;p&gt;Since controllers are used to bind data to the template (via scope), unit tests are perfect for testing the controller logic - e.g., what happens to the scope as the controller runs - while E2E tests ensure that the template is updated accordingly.&lt;/p&gt;&lt;/blockquote&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h3&gt;TestTwoController&lt;/h3&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Start by analyzing the code:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;myApp.controller('TestTwoController', function($scope) {
+</span><span class='line'>  $scope.total = 6;
+</span><span class='line'>  $scope.newItem = undefined;
+</span><span class='line'>  $scope.items = [1, 2, 3];
+</span><span class='line'>  $scope.add = function () {
+</span><span class='line'>    $scope.items.push($scope.newItem);
+</span><span class='line'>    $scope.total = 0;
+</span><span class='line'>    for(var i = 0; i &lt; $scope.items.length; i++){
+</span><span class='line'>      $scope.total += parseInt($scope.items[i]);
+</span><span class='line'>    }
+</span><span class='line'>  };
+</span><span class='line'>});
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;What should we test? Take out a pen and paper and write down everything that should be tested. Once done, write the code. Check your code against mine.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Be sure to start with the following boilerplate:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;describe('TestTwoController', function () {
+</span><span class='line'>
+</span><span class='line'>  var controller = null;
+</span><span class='line'>  $scope = null;
+</span><span class='line'>
+</span><span class='line'>  beforeEach(function () {
+</span><span class='line'>    module('myApp');
+</span><span class='line'>  });
+</span><span class='line'>
+</span><span class='line'>  beforeEach(inject(function ($controller, $rootScope) {
+</span><span class='line'>    $scope = $rootScope.$new();
+</span><span class='line'>    controller = $controller('TestTwoController', {
+</span><span class='line'>      $scope: $scope
+</span><span class='line'>    });
+</span><span class='line'>  }));
+</span><span class='line'>
+</span><span class='line'>});
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h4&gt;Test 1: The initial value of &lt;code&gt;total&lt;/code&gt;&lt;/h4&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;it('initially has a total', function () {
+</span><span class='line'>  assert.equal($scope.total, 6);
+</span><span class='line'>});
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h4&gt;Test 2: The initial value of &lt;code&gt;items&lt;/code&gt;&lt;/h4&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;it('initially has items', function () {
+</span><span class='line'>  assert.isArray($scope.items);
+</span><span class='line'>  assert.deepEqual($scope.items, [1, 2, 3]);
+</span><span class='line'>});
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h4&gt;Test 3: The &lt;code&gt;add&lt;/code&gt; function updates the &lt;code&gt;total&lt;/code&gt; and &lt;code&gt;items&lt;/code&gt; array when a value is added&lt;/h4&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;it('the `add` function updates the `total` and `items` array when a value is added', function () {
+</span><span class='line'>  $scope.newItem = 7;
+</span><span class='line'>  $scope.add();
+</span><span class='line'>  assert.equal($scope.total, 13);
+</span><span class='line'>  assert.deepEqual($scope.items, [1, 2, 3, 7]);
+</span><span class='line'>});
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h4&gt;Test 4: The &lt;code&gt;add&lt;/code&gt; function does not update the &lt;code&gt;total&lt;/code&gt; and &lt;code&gt;items&lt;/code&gt; array when an empty value is added&lt;/h4&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;it('does not update the `total` and `items` array when an empty value is added', function () {
+</span><span class='line'>  $scope.newItem = undefined;
+</span><span class='line'>  $scope.add();
+</span><span class='line'>  assert.equal($scope.total, 6);
+</span><span class='line'>  assert.deepEqual($scope.items, [1, 2, 3]);
+</span><span class='line'>  $scope.newItem = 22;
+</span><span class='line'>  $scope.add();
+</span><span class='line'>  assert.equal($scope.total, 28);
+</span><span class='line'>  assert.deepEqual($scope.items, [1, 2, 3, 22]);
+</span><span class='line'>});
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h4&gt;Run&lt;/h4&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Each test should be straightforward. Run the tests. There should be one failure:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;Chrome 41.0.2272 (Mac OS X 10.10.2) TestTwoController does not update the `total` and `items` array when an empty value is added FAILED
+</span><span class='line'>  AssertionError: expected NaN to equal 6
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Update the code, adding a conditional again:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;$scope.add = function () {
+</span><span class='line'>  if(typeof $scope.newItem == 'number') {
+</span><span class='line'>    $scope.items.push($scope.newItem);
+</span><span class='line'>    $scope.total = 0;
+</span><span class='line'>    for(var i = 0; i &lt; $scope.items.length; i++){
+</span><span class='line'>      $scope.total += parseInt($scope.items[i]);
+</span><span class='line'>    }
+</span><span class='line'>  }
+</span><span class='line'>};
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Also update the partial, &lt;em&gt;/app/partials/two.html&lt;/em&gt;:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="html"&gt;&lt;input type="number" ng-model="newItem"&gt;
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Run it again:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="sh"&gt;$ gulp unit
+</span><span class='line'>[09:56:10] Using gulpfile ~/angular-testing-tutorial/Gulpfile.js
+</span><span class='line'>[09:56:10] Starting 'unit'...
+</span><span class='line'>INFO [karma]: Karma v0.12.31 server started at http://localhost:9876/
+</span><span class='line'>INFO [launcher]: Starting browser Chrome
+</span><span class='line'>INFO [Chrome 41.0.2272 (Mac OS X 10.10.2)]: Connected on socket Lbv1sROpYrEHgotlmJZf with id 91008249
+</span><span class='line'>Chrome 41.0.2272 (Mac OS X 10.10.2): Executed 7 of 7 SUCCESS (0.082 secs / 0.003 secs)
+</span><span class='line'>[09:56:13] Finished 'unit' after 3.05 s
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Success!&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Did I miss anything? Comment below.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h3&gt;TestThreeController&lt;/h3&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Again, check out the code in &lt;em&gt;app.js&lt;/em&gt;:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;myApp.controller('TestThreeController', function($scope) {
+</span><span class='line'>  $scope.modal = {title: 'Hi!', content: 'This is a message!'};
+</span><span class='line'>});
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;What can we test here?&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;it('initially has a modal', function () {
+</span><span class='line'>  assert.isObject($scope.modal);
+</span><span class='line'>  assert.deepEqual($scope.modal, {title: 'Hi!', content: 'This is a message!'});
+</span><span class='line'>});
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Perhaps a better question is: What &lt;em&gt;should&lt;/em&gt; we test here? Is the above test really necessary? Probably not. But we may need to test it out more in the future if we build out the functionality. Let&rsquo;s go for it!&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h4&gt;Update &lt;em&gt;app.js&lt;/em&gt;:&lt;/h4&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;myApp.controller('TestThreeController', function($scope, $modal) {
+</span><span class='line'>  $scope.modalNumber = 1;
+</span><span class='line'>  var myModal = $modal({scope: $scope, template: 'modal.tpl.html', show: false});
+</span><span class='line'>  $scope.showModal = function() {
+</span><span class='line'>    myModal.$promise.then(myModal.show);
+</span><span class='line'>  };
+</span><span class='line'>  $scope.changeModalText = function() {
+</span><span class='line'>    $scope.modalNumber++;
+</span><span class='line'>    };
+</span><span class='line'>});
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Here we are defined a custom template, &lt;code&gt;modal.tpl.html&lt;/code&gt;, to be used for the modal text and then we assigned &lt;code&gt;$scope.modalNumber&lt;/code&gt; to &lt;code&gt;1&lt;/code&gt; as well as function to iterate the number.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h4&gt;Add &lt;em&gt;modal.tpl.html&lt;/em&gt;:&lt;/h4&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;<figure class='code'><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>
@@ -1734,36 +4754,36 @@ Chrome 41.0.2272 (Mac OS X 10.10.2): Executed 7 of 7 SUCCESS (0.082 secs / 0.003
 <span class='line-number'>19</span>
 <span class='line-number'>20</span>
 <span class='line-number'>21</span>
-</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;/p&gt;</span>
+</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="ni">&amp;lt;</span>/p<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span><span class="ni">&amp;lt;</span>div class=&quot;modal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>  <span class="ni">&amp;lt;</span>div class=&quot;modal-dialog&quot;<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>    <span class="ni">&amp;lt;</span>div class=&quot;modal-content&quot;<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>      <span class="ni">&amp;lt;</span>div class=&quot;modal-body&quot;<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>        <span class="ni">&amp;lt;</span>span<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>          <span class="ni">&amp;lt;</span>button class=&quot;btn btn-default&quot; ng-click=&quot;changeModalText()&quot;<span class="ni">&amp;gt;</span>Iterate<span class="ni">&amp;lt;</span>/button<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>          <span class="ni">&amp;nbsp;&amp;#8594;&amp;nbsp;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>          <span class="ni">&amp;lt;</span>span<span class="ni">&amp;gt;&amp;lt;</span>/span<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>        <span class="ni">&amp;lt;</span>/span<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>      <span class="ni">&amp;lt;</span>/div<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>      <span class="ni">&amp;lt;</span>div class=&quot;modal-footer&quot;<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>        <span class="ni">&amp;lt;</span>button type=&quot;button&quot; class=&quot;btn btn-default&quot; ng-click=&quot;$hide()&quot;<span class="ni">&amp;gt;</span>Close<span class="ni">&amp;lt;</span>/button<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>      <span class="ni">&amp;lt;</span>/div<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>    <span class="ni">&amp;lt;</span>/div<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>  <span class="ni">&amp;lt;</span>/div<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span><span class="ni">&amp;lt;</span>/div<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span><span class="ni">&amp;lt;</span>p<span class="ni">&amp;gt;</span>
+</span></code></pre></td></tr></table></div></figure>&lt;/p&gt;
 </span><span class='line'>
-</span><span class='line'><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;modal&quot;</span> <span class="na">tabindex=</span><span class="s">&quot;-1&quot;</span> <span class="na">role=</span><span class="s">&quot;dialog&quot;</span><span class="nt">&gt;</span>
-</span><span class='line'>  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;modal-dialog&quot;</span><span class="nt">&gt;</span>
-</span><span class='line'>    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;modal-content&quot;</span><span class="nt">&gt;</span>
-</span><span class='line'>      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;modal-body&quot;</span><span class="nt">&gt;</span>
-</span><span class='line'>        <span class="nt">&lt;span&gt;</span>
-</span><span class='line'>          <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btn-default&quot;</span> <span class="na">ng-click=</span><span class="s">&quot;changeModalText()&quot;</span><span class="nt">&gt;</span>Iterate<span class="nt">&lt;/button&gt;</span>
-</span><span class='line'>          <span class="ni">&amp;nbsp;&amp;#8594;&amp;nbsp;</span>
-</span><span class='line'>          <span class="nt">&lt;span&gt;&lt;/span&gt;</span>
-</span><span class='line'>        <span class="nt">&lt;/span&gt;</span>
-</span><span class='line'>      <span class="nt">&lt;/div&gt;</span>
-</span><span class='line'>      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;modal-footer&quot;</span><span class="nt">&gt;</span>
-</span><span class='line'>        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">&quot;button&quot;</span> <span class="na">class=</span><span class="s">&quot;btn btn-default&quot;</span> <span class="na">ng-click=</span><span class="s">&quot;$hide()&quot;</span><span class="nt">&gt;</span>Close<span class="nt">&lt;/button&gt;</span>
-</span><span class='line'>      <span class="nt">&lt;/div&gt;</span>
-</span><span class='line'>    <span class="nt">&lt;/div&gt;</span>
-</span><span class='line'>  <span class="nt">&lt;/div&gt;</span>
-</span><span class='line'><span class="nt">&lt;/div&gt;</span>
+</span><span class='line'>&lt;p&gt;Add this template to the &ldquo;app&rdquo; folder.&lt;/p&gt;
 </span><span class='line'>
+</span><span class='line'>&lt;h4&gt;Update &lt;em&gt;three.html&lt;/em&gt;:&lt;/h4&gt;
 </span><span class='line'>
-</span><span class='line'><span class="nt">&lt;p&gt;</span>
-</span></code></pre></td></tr></table></div></figure></p>
-
-<p>Add this template to the &ldquo;app&rdquo; folder.</p>
-
-<h4>Update <em>three.html</em>:</h4>
-
-<p>Finally, update the partial:</p>
-
-<p><figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+</span><span class='line'>&lt;p&gt;Finally, update the partial:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;<figure class='code'><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>
@@ -1771,286 +4791,287 @@ Chrome 41.0.2272 (Mac OS X 10.10.2): Executed 7 of 7 SUCCESS (0.082 secs / 0.003
 <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='html'><span class='line'><span class="nt">&lt;/p&gt;</span>
+<span class='line-number'>9</span>
+</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="ni">&amp;lt;</span>/p<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span><span class="ni">&amp;lt;</span>h2<span class="ni">&amp;gt;</span>Just a modal<span class="ni">&amp;lt;</span>/h2<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span><span class="ni">&amp;lt;</span>p<span class="ni">&amp;gt;&amp;lt;</span>button type=&quot;button&quot; class=&quot;btn btn-lg btn-default&quot; data-template=&quot;modal.tpl.html&quot; bs-modal=&quot;modal&quot;<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>  Launch modal!
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span><span class="ni">&amp;lt;</span>/button<span class="ni">&amp;gt;</span>
+</span><span class='line'><span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&#39;line&#39;</span><span class="nt">&gt;</span>
+</span></code></pre></td></tr></table></div></figure>&lt;/p&gt;
 </span><span class='line'>
-</span><span class='line'><span class="nt">&lt;h2&gt;</span>Just a modal<span class="nt">&lt;/h2&gt;</span>
+</span><span class='line'>&lt;p&gt;Run the app to make sure everything works, and then update the test&hellip;&lt;/p&gt;
 </span><span class='line'>
+</span><span class='line'>&lt;h4&gt;Test redux&lt;/h4&gt;
 </span><span class='line'>
-</span><span class='line'><span class="nt">&lt;p&gt;&lt;button</span> <span class="na">type=</span><span class="s">&quot;button&quot;</span> <span class="na">class=</span><span class="s">&quot;btn btn-lg btn-default&quot;</span> <span class="na">data-template=</span><span class="s">&quot;modal.tpl.html&quot;</span> <span class="na">bs-modal=</span><span class="s">&quot;modal&quot;</span><span class="nt">&gt;</span>
-</span><span class='line'>  Launch modal!
-</span><span class='line'><span class="nt">&lt;/button&gt;</span>
-</span></code></pre></td></tr></table></div></figure></p>
-
-<p>Run the app to make sure everything works, and then update the test&hellip;</p>
-
-<h4>Test redux</h4>
-
-<pre><code class="javascript">describe('TestThreeController', function () {
-
-  var controller = null;
-  $scope = null;
-
-  beforeEach(function () {
-    module('myApp');
-  });
-
-  beforeEach(inject(function ($controller, $rootScope) {
-    $scope = $rootScope.$new();
-    controller = $controller('TestThreeController', {
-      $scope: $scope
-    });
-  }));
-
-  it('initially has a modalNumber', function () {
-    assert.equal($scope.modalNumber, 1);
-  });
-
-  it('updates the `modalNumber` when a value is added', function () {
-    $scope.changeModalText();
-    assert.equal($scope.modalNumber, 2);
-    $scope.changeModalText();
-    assert.equal($scope.modalNumber, 3);
-  });
-
-});
-</code></pre>
-
-<p>Notice how we&rsquo;re no longer testing that a modal is present. We&rsquo;ll test that via the E2E tests.</p>
-
-<h3>TestFourController</h3>
-
-<p>Finally, let&rsquo;s test the AJAX request:</p>
-
-<pre><code class="sh">myApp.controller('TestFourController', function($scope, $http) {
-  $scope.repos = [];
-  $scope.loadRepos = function () {
-    $http.get('https://api.github.com/repositories').then(function (repos) {
-      $scope.repos = repos.data;
-    });
-  };
-});
-</code></pre>
-
-<p>Remember the discussion earlier on mocking HTTP requests? Well, here&rsquo;s probably a good place to actually use a mocking library since this request hits an external API. To do this, we can use the <code>$httpBackend</code> directive from the <a href="https://docs.angularjs.org/api/ngMock">angular-mocks</a> library.</p>
-
-<p>First, let&rsquo;s first add the <em>mock.js</em> file found in the <a href="https://github.com/mjhea0/angular-testing-tutorial/tree/master/tests/mock">repo</a> into a new folder called &ldquo;mock&rdquo; within the &ldquo;tests&rdquo; folder. This module uses <code>angular.module().value</code> to set a JSON value to use as the fake data.</p>
-
-<p>Update the list of files in <em>karma.conf.js</em> so that the the mock file is loaded and served by Karma:</p>
-
-<pre><code class="javascript">files: [
-  '../app/bower_components/angular/angular.js',
-  '../app/bower_components/jquery/dist/jquery.js',
-  '../app/bower_components/angular-strap/dist/angular-strap.js',
-  '../app/bower_components/angular-strap/dist/angular-strap.tpl.js',
-  '../app/bower_components/angular-mocks/angular-mocks.js',
-  '../app/bower_components/angular-route/angular-route.js',
-  './unit/*.js',
-  './mock/*.js',
-  '../app/app.js'
-],
-</code></pre>
-
-<p>Next, add the test:</p>
-
-<pre><code class="javascript">describe('TestFourController', function () {
-
-  var controller = null;
-  var $scope = null;
-  var $httpBackend = null;
-  var mockedDashboardJSON = null;
-
-  beforeEach(function () {
-    module('myApp', 'mockedDashboardJSON');
-  });
-
-    beforeEach(inject(function ($controller, $rootScope, _$httpBackend_, defaultJSON) {
-      $httpBackend = _$httpBackend_;
-      $scope = $rootScope.$new();
-      $httpBackend.when('GET','https://api.github.com/repositories').respond(defaultJSON.fakeData);
-      controller = $controller('TestFourController', {
-          $scope: $scope
-      });
-    }));
-
-    afterEach(function () {
-      $httpBackend.verifyNoOutstandingExpectation();
-      $httpBackend.verifyNoOutstandingRequest();
-    });
-
-  it('initially has repos', function () {
-    assert.isArray($scope.repos);
-    assert.deepEqual($scope.repos, []);
-  });
-
-  it('clicking the button updates the repos', function () {
-      $scope.loadRepos();
-      $httpBackend.flush();
-      assert.equal($scope.repos.length, 100);
-  });
-
-});
-</code></pre>
-
-<p>What&rsquo;s happening?</p>
-
-<ol>
-<li>Essentially, here we&rsquo;re injecting <code>defaultJSON</code> so that when the app tries to make the HTTP request, it triggers <code>$httpBackend</code>, which, in turn, uses the <code>defaultJSON</code> value.</li>
-<li>Did you notice the underscores surrounding the <code>$httpBackend</code> directive? This is a hack that allows us to use the dependency in multiple tests. You can find more information on this from the <a href="https://docs.angularjs.org/api/ngMock/function/angular.mock.inject">official documentation</a>.</li>
-<li>Finally, we&rsquo;re using an <code>afterEach</code> block to check that we&rsquo;re not missing any HTTP requests in our tests via the <code>verifyNoOutstandingExpectation()</code> and <code>verifyNoOutstandingRequest()</code> methods. Again, you can read more about these methods from the <a href="https://docs.angularjs.org/api/ngMock/service/$httpBackend">Angular docs</a>.</li>
-</ol>
-
-
-<p>Test it out!</p>
-
-<h3>Routes</h3>
-
-<p>How about the routes, templates, and partials?</p>
-
-<pre><code class="javascript">describe('routes', function(){
-
-  beforeEach(function () {
-    module('myApp');
-  });
-
-  beforeEach(inject(function (_$httpBackend_, _$route_, _$location_, $rootScope) {
-    $httpBackend = _$httpBackend_;
-    $route = _$route_;
-    $location = _$location_;
-    $scope = $rootScope.$new();
-  }));
-
-  it('should load the one.html template', function(){
-    $httpBackend.whenGET('partials/one.html').respond('...');
-    $scope.$apply(function() {
-      $location.path('/one');
-    });
-    assert.equal($route.current.templateUrl, 'partials/one.html');
-    assert.equal($route.current.controller, 'TestOneController');
-  });
-
-});
-</code></pre>
-
-<ol>
-<li>When the route is loaded, the <code>current</code> property is updated. We then test to ensure that the current controller and template are <code>TestOneController</code> and <code>partials/one.html</code>, respectively.</li>
-<li>Did you notice that we wrapped the route change inside the <code>$apply</code> callback? Since unit tests don&rsquo;t run the full Angular app, we had to simulate it by triggering the <a href="https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$digest">digest cycle</a>.</li>
-<li>Curious about <code>WhenGET</code>? Check out the <a href="https://docs.angularjs.org/api/ngMock/service/$httpBackend">Angular documentation</a>. Take note of <code>ExpectGET</code> as well. Can you re-write the above test to use <code>ExpectGET</code>?</li>
-</ol>
-
-
-<p>Make sure to run the tests one last time:</p>
-
-<pre><code class="sh">$ gulp unit
-[05:20:07] Using gulpfile ~/angular-testing-tutorial/Gulpfile.js
-[05:20:07] Starting 'unit'...
-INFO [karma]: Karma v0.12.31 server started at http://localhost:9876/
-INFO [launcher]: Starting browser Chrome
-INFO [Chrome 41.0.2272 (Mac OS X 10.10.2)]: Connected on socket R5qQUcjswAbpcvMK6JKu with id 67365006
-Chrome 41.0.2272 (Mac OS X 10.10.2): Executed 12 of 12 SUCCESS (0.16 secs / 0.027 secs)
-[05:20:10] Finished 'unit' after 3.44 s
-</code></pre>
-
-<h2>Conclusion</h2>
-
-<p>That&rsquo;s it for unit tests. In the next <a href="http://mherman.org/blog/2015/04/26/testing-angularjs-with-protractor-and-karma-part-2">part</a>, we&rsquo;ll test the entire application, front to back, using end-to-end (E2E) tests via Protractor.</p>
-
-<p>Checkout the third tag, <code>v3</code>, to view all the completed unit tests:</p>
-
-<pre><code class="sh">$ git checkout tags/v3
-</code></pre>
-
-<p>Ready for more?</p>
-
-<p>Try adding some <a href="http://mherman.org/blog/2014/06/12/primer-on-angularjs-service-types/">Factories/Services</a> and Filters to your app to continue practicing. Since the syntax is relatively the same for testing all parts of an Angular app, you should be able to extend your testing knowledge to both factories and filters. Take a look at this <a href="https://github.com/mjhea0/thinkful-mentor/tree/master/angular/projects/angular-unit-test-demo/app/components">example</a> for help getting started. Once you feel comfortable with factories, controllers, and filters, move on to testing more difficult components, like directives, resources, and animations. Good luck!</p>
-
-<p>Comment below with questions.</p>
-]]></content>
-  </entry>
-  
-  <entry>
-    <title type="html"><![CDATA[Kickstarting Angular With Gulp and Browserify, Part 2 - Browserify]]></title>
-    <link href="http://mherman.org/blog/2014/08/15/kickstarting-angular-with-gulp-and-browserify-part-2/"/>
-    <updated>2014-08-15T09:56:00-06:00</updated>
-    <id>http://mherman.org/blog/2014/08/15/kickstarting-angular-with-gulp-and-browserify-part-2</id>
-    <content type="html"><![CDATA[<p>Hello. Welcome to the second half. <a href="http://mherman.org/blog/2014/08/14/kickstarting-angular-with-gulp">Last time</a>, we built a nice Angular starter project, utilizing Gulp and Bower. Let&rsquo;s take this a step further and add the power of <a href="http://browserify.org/">Browserify</a> into the mix. Before you read any further, check out the <a href="https://github.com/substack/browserify-handbook#introduction">Introduction</a> to the <a href="https://github.com/substack/browserify-handbook">Browserify Handbook</a> to learn about the problems that Browserify solves.</p>
-
-<blockquote><p>Just want the code? Get it <a href="https://github.com/mjhea0/angular-gulp-browserify-seed">here</a>.</p></blockquote>
-
-<h2>Install Dependencies</h2>
-
-<p>Let&rsquo;s get Browserify installed&hellip;</p>
-
-<h3>First, install Browserify globally</h3>
-
-<pre><code class="sh">$ npm install -g browserify
-</code></pre>
-
-<h3>Then install the Gulp dependencies locally</h3>
-
-<pre><code class="sh">$ npm install gulp-browserify gulp-concat --save
-</code></pre>
-
-<p>The <a href="https://github.com/deepak1556/gulp-browserify">former</a> dependency allows you to run Browserify from Gulp, while the <a href="https://github.com/wearefractal/gulp-concat">latter</a> concatenates all the Bowerserify dependencies into a single JS file.</p>
-
-<h2>Update the Gulpfile</h2>
-
-<h3>Update the requirements</h3>
-
-<pre><code class="javascript">var browserify = require('gulp-browserify');
-var concat = require('gulp-concat');
-</code></pre>
-
-<h3>Add the following tasks</h3>
-
-<pre><code class="javascript">gulp.task('browserify', function() {
-  gulp.src(['app/js/main.js'])
-  .pipe(browserify({
-    insertGlobals: true,
-    debug: true
-  }))
-  .pipe(concat('bundled.js'))
-  .pipe(gulp.dest('./app/js'))
-});
-</code></pre>
-
-<h3>Now update the default task</h3>
-
-<pre><code class="javascript">// default task
-gulp.task('default',
-  ['lint', 'browserify', 'connect']
-);
-</code></pre>
-
-<h2>Update the HTML</h2>
-
-<p>Change the included JS file in <em>index.html</em>.</p>
-
-<p>From:</p>
-
-<p>``` html</p>
-
-<script src="./js/main.js"></script>
-
-
-<pre><code>
-To:
-</code></pre>
-
-<script src="./js/bundled.js"></script>
-
-
-<pre><code>
-### Test
-
-To recap:
-
-1. We added Browserify
-2. Updated the build process so that a single JS file named *bundled.js* is created
-3. Updated *index.html* to include that new JS file
-</code></pre>
-
-<p>$ gulp
-```</p>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;describe('TestThreeController', function () {
+</span><span class='line'>
+</span><span class='line'>  var controller = null;
+</span><span class='line'>  $scope = null;
+</span><span class='line'>
+</span><span class='line'>  beforeEach(function () {
+</span><span class='line'>    module('myApp');
+</span><span class='line'>  });
+</span><span class='line'>
+</span><span class='line'>  beforeEach(inject(function ($controller, $rootScope) {
+</span><span class='line'>    $scope = $rootScope.$new();
+</span><span class='line'>    controller = $controller('TestThreeController', {
+</span><span class='line'>      $scope: $scope
+</span><span class='line'>    });
+</span><span class='line'>  }));
+</span><span class='line'>
+</span><span class='line'>  it('initially has a modalNumber', function () {
+</span><span class='line'>    assert.equal($scope.modalNumber, 1);
+</span><span class='line'>  });
+</span><span class='line'>
+</span><span class='line'>  it('updates the `modalNumber` when a value is added', function () {
+</span><span class='line'>    $scope.changeModalText();
+</span><span class='line'>    assert.equal($scope.modalNumber, 2);
+</span><span class='line'>    $scope.changeModalText();
+</span><span class='line'>    assert.equal($scope.modalNumber, 3);
+</span><span class='line'>  });
+</span><span class='line'>
+</span><span class='line'>});
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Notice how we&rsquo;re no longer testing that a modal is present. We&rsquo;ll test that via the E2E tests.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h3&gt;TestFourController&lt;/h3&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Finally, let&rsquo;s test the AJAX request:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="sh"&gt;myApp.controller('TestFourController', function($scope, $http) {
+</span><span class='line'>  $scope.repos = [];
+</span><span class='line'>  $scope.loadRepos = function () {
+</span><span class='line'>    $http.get('https://api.github.com/repositories').then(function (repos) {
+</span><span class='line'>      $scope.repos = repos.data;
+</span><span class='line'>    });
+</span><span class='line'>  };
+</span><span class='line'>});
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Remember the discussion earlier on mocking HTTP requests? Well, here&rsquo;s probably a good place to actually use a mocking library since this request hits an external API. To do this, we can use the &lt;code&gt;$httpBackend&lt;/code&gt; directive from the &lt;a href="https://docs.angularjs.org/api/ngMock"&gt;angular-mocks&lt;/a&gt; library.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;First, let&rsquo;s first add the &lt;em&gt;mock.js&lt;/em&gt; file found in the &lt;a href="https://github.com/mjhea0/angular-testing-tutorial/tree/master/tests/mock"&gt;repo&lt;/a&gt; into a new folder called &ldquo;mock&rdquo; within the &ldquo;tests&rdquo; folder. This module uses &lt;code&gt;angular.module().value&lt;/code&gt; to set a JSON value to use as the fake data.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Update the list of files in &lt;em&gt;karma.conf.js&lt;/em&gt; so that the the mock file is loaded and served by Karma:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;files: [
+</span><span class='line'>  '../app/bower_components/angular/angular.js',
+</span><span class='line'>  '../app/bower_components/jquery/dist/jquery.js',
+</span><span class='line'>  '../app/bower_components/angular-strap/dist/angular-strap.js',
+</span><span class='line'>  '../app/bower_components/angular-strap/dist/angular-strap.tpl.js',
+</span><span class='line'>  '../app/bower_components/angular-mocks/angular-mocks.js',
+</span><span class='line'>  '../app/bower_components/angular-route/angular-route.js',
+</span><span class='line'>  './unit/*.js',
+</span><span class='line'>  './mock/*.js',
+</span><span class='line'>  '../app/app.js'
+</span><span class='line'>],
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Next, add the test:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;describe('TestFourController', function () {
+</span><span class='line'>
+</span><span class='line'>  var controller = null;
+</span><span class='line'>  var $scope = null;
+</span><span class='line'>  var $httpBackend = null;
+</span><span class='line'>  var mockedDashboardJSON = null;
+</span><span class='line'>
+</span><span class='line'>  beforeEach(function () {
+</span><span class='line'>    module('myApp', 'mockedDashboardJSON');
+</span><span class='line'>  });
+</span><span class='line'>
+</span><span class='line'>    beforeEach(inject(function ($controller, $rootScope, _$httpBackend_, defaultJSON) {
+</span><span class='line'>      $httpBackend = _$httpBackend_;
+</span><span class='line'>      $scope = $rootScope.$new();
+</span><span class='line'>      $httpBackend.when('GET','https://api.github.com/repositories').respond(defaultJSON.fakeData);
+</span><span class='line'>      controller = $controller('TestFourController', {
+</span><span class='line'>          $scope: $scope
+</span><span class='line'>      });
+</span><span class='line'>    }));
+</span><span class='line'>
+</span><span class='line'>    afterEach(function () {
+</span><span class='line'>      $httpBackend.verifyNoOutstandingExpectation();
+</span><span class='line'>      $httpBackend.verifyNoOutstandingRequest();
+</span><span class='line'>    });
+</span><span class='line'>
+</span><span class='line'>  it('initially has repos', function () {
+</span><span class='line'>    assert.isArray($scope.repos);
+</span><span class='line'>    assert.deepEqual($scope.repos, []);
+</span><span class='line'>  });
+</span><span class='line'>
+</span><span class='line'>  it('clicking the button updates the repos', function () {
+</span><span class='line'>      $scope.loadRepos();
+</span><span class='line'>      $httpBackend.flush();
+</span><span class='line'>      assert.equal($scope.repos.length, 100);
+</span><span class='line'>  });
+</span><span class='line'>
+</span><span class='line'>});
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;What&rsquo;s happening?&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;ol&gt;
+</span><span class='line'>&lt;li&gt;Essentially, here we&rsquo;re injecting &lt;code&gt;defaultJSON&lt;/code&gt; so that when the app tries to make the HTTP request, it triggers &lt;code&gt;$httpBackend&lt;/code&gt;, which, in turn, uses the &lt;code&gt;defaultJSON&lt;/code&gt; value.&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;Did you notice the underscores surrounding the &lt;code&gt;$httpBackend&lt;/code&gt; directive? This is a hack that allows us to use the dependency in multiple tests. You can find more information on this from the &lt;a href="https://docs.angularjs.org/api/ngMock/function/angular.mock.inject"&gt;official documentation&lt;/a&gt;.&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;Finally, we&rsquo;re using an &lt;code&gt;afterEach&lt;/code&gt; block to check that we&rsquo;re not missing any HTTP requests in our tests via the &lt;code&gt;verifyNoOutstandingExpectation()&lt;/code&gt; and &lt;code&gt;verifyNoOutstandingRequest()&lt;/code&gt; methods. Again, you can read more about these methods from the &lt;a href="https://docs.angularjs.org/api/ngMock/service/$httpBackend"&gt;Angular docs&lt;/a&gt;.&lt;/li&gt;
+</span><span class='line'>&lt;/ol&gt;
+</span><span class='line'>
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Test it out!&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h3&gt;Routes&lt;/h3&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;How about the routes, templates, and partials?&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;describe('routes', function(){
+</span><span class='line'>
+</span><span class='line'>  beforeEach(function () {
+</span><span class='line'>    module('myApp');
+</span><span class='line'>  });
+</span><span class='line'>
+</span><span class='line'>  beforeEach(inject(function (_$httpBackend_, _$route_, _$location_, $rootScope) {
+</span><span class='line'>    $httpBackend = _$httpBackend_;
+</span><span class='line'>    $route = _$route_;
+</span><span class='line'>    $location = _$location_;
+</span><span class='line'>    $scope = $rootScope.$new();
+</span><span class='line'>  }));
+</span><span class='line'>
+</span><span class='line'>  it('should load the one.html template', function(){
+</span><span class='line'>    $httpBackend.whenGET('partials/one.html').respond('...');
+</span><span class='line'>    $scope.$apply(function() {
+</span><span class='line'>      $location.path('/one');
+</span><span class='line'>    });
+</span><span class='line'>    assert.equal($route.current.templateUrl, 'partials/one.html');
+</span><span class='line'>    assert.equal($route.current.controller, 'TestOneController');
+</span><span class='line'>  });
+</span><span class='line'>
+</span><span class='line'>});
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;ol&gt;
+</span><span class='line'>&lt;li&gt;When the route is loaded, the &lt;code&gt;current&lt;/code&gt; property is updated. We then test to ensure that the current controller and template are &lt;code&gt;TestOneController&lt;/code&gt; and &lt;code&gt;partials/one.html&lt;/code&gt;, respectively.&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;Did you notice that we wrapped the route change inside the &lt;code&gt;$apply&lt;/code&gt; callback? Since unit tests don&rsquo;t run the full Angular app, we had to simulate it by triggering the &lt;a href="https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$digest"&gt;digest cycle&lt;/a&gt;.&lt;/li&gt;
+</span><span class='line'>&lt;li&gt;Curious about &lt;code&gt;WhenGET&lt;/code&gt;? Check out the &lt;a href="https://docs.angularjs.org/api/ngMock/service/$httpBackend"&gt;Angular documentation&lt;/a&gt;. Take note of &lt;code&gt;ExpectGET&lt;/code&gt; as well. Can you re-write the above test to use &lt;code&gt;ExpectGET&lt;/code&gt;?&lt;/li&gt;
+</span><span class='line'>&lt;/ol&gt;
+</span><span class='line'>
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Make sure to run the tests one last time:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="sh"&gt;$ gulp unit
+</span><span class='line'>[05:20:07] Using gulpfile ~/angular-testing-tutorial/Gulpfile.js
+</span><span class='line'>[05:20:07] Starting 'unit'...
+</span><span class='line'>INFO [karma]: Karma v0.12.31 server started at http://localhost:9876/
+</span><span class='line'>INFO [launcher]: Starting browser Chrome
+</span><span class='line'>INFO [Chrome 41.0.2272 (Mac OS X 10.10.2)]: Connected on socket R5qQUcjswAbpcvMK6JKu with id 67365006
+</span><span class='line'>Chrome 41.0.2272 (Mac OS X 10.10.2): Executed 12 of 12 SUCCESS (0.16 secs / 0.027 secs)
+</span><span class='line'>[05:20:10] Finished 'unit' after 3.44 s
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h2&gt;Conclusion&lt;/h2&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;That&rsquo;s it for unit tests. In the next &lt;a href="http://mherman.org/blog/2015/04/26/testing-angularjs-with-protractor-and-karma-part-2"&gt;part&lt;/a&gt;, we&rsquo;ll test the entire application, front to back, using end-to-end (E2E) tests via Protractor.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Checkout the third tag, &lt;code&gt;v3&lt;/code&gt;, to view all the completed unit tests:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="sh"&gt;$ git checkout tags/v3
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Ready for more?&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Try adding some &lt;a href="http://mherman.org/blog/2014/06/12/primer-on-angularjs-service-types/"&gt;Factories/Services&lt;/a&gt; and Filters to your app to continue practicing. Since the syntax is relatively the same for testing all parts of an Angular app, you should be able to extend your testing knowledge to both factories and filters. Take a look at this &lt;a href="https://github.com/mjhea0/thinkful-mentor/tree/master/angular/projects/angular-unit-test-demo/app/components"&gt;example&lt;/a&gt; for help getting started. Once you feel comfortable with factories, controllers, and filters, move on to testing more difficult components, like directives, resources, and animations. Good luck!&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Comment below with questions.&lt;/p&gt;
+</span><span class='line'>]]&gt;&lt;/content&gt;
+</span><span class='line'>  &lt;/entry&gt;
+</span><span class='line'>  
+</span><span class='line'>  &lt;entry&gt;
+</span><span class='line'>    &lt;title type="html"&gt;&lt;![CDATA[Kickstarting Angular With Gulp and Browserify, Part 2 - Browserify]]&gt;&lt;/title&gt;
+</span><span class='line'>    &lt;link href="http://mherman.org/blog/2014/08/15/kickstarting-angular-with-gulp-and-browserify-part-2/"/&gt;
+</span><span class='line'>    &lt;updated&gt;2014-08-15T09:56:00-06:00&lt;/updated&gt;
+</span><span class='line'>    &lt;id&gt;http://mherman.org/blog/2014/08/15/kickstarting-angular-with-gulp-and-browserify-part-2&lt;/id&gt;
+</span><span class='line'>    &lt;content type="html"&gt;&lt;![CDATA[&lt;p&gt;Hello. Welcome to the second half. &lt;a href="http://mherman.org/blog/2014/08/14/kickstarting-angular-with-gulp"&gt;Last time&lt;/a&gt;, we built a nice Angular starter project, utilizing Gulp and Bower. Let&rsquo;s take this a step further and add the power of &lt;a href="http://browserify.org/"&gt;Browserify&lt;/a&gt; into the mix. Before you read any further, check out the &lt;a href="https://github.com/substack/browserify-handbook#introduction"&gt;Introduction&lt;/a&gt; to the &lt;a href="https://github.com/substack/browserify-handbook"&gt;Browserify Handbook&lt;/a&gt; to learn about the problems that Browserify solves.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;blockquote&gt;&lt;p&gt;Just want the code? Get it &lt;a href="https://github.com/mjhea0/angular-gulp-browserify-seed"&gt;here&lt;/a&gt;.&lt;/p&gt;&lt;/blockquote&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h2&gt;Install Dependencies&lt;/h2&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Let&rsquo;s get Browserify installed&hellip;&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h3&gt;First, install Browserify globally&lt;/h3&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="sh"&gt;$ npm install -g browserify
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h3&gt;Then install the Gulp dependencies locally&lt;/h3&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="sh"&gt;$ npm install gulp-browserify gulp-concat --save
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;The &lt;a href="https://github.com/deepak1556/gulp-browserify"&gt;former&lt;/a&gt; dependency allows you to run Browserify from Gulp, while the &lt;a href="https://github.com/wearefractal/gulp-concat"&gt;latter&lt;/a&gt; concatenates all the Bowerserify dependencies into a single JS file.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h2&gt;Update the Gulpfile&lt;/h2&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h3&gt;Update the requirements&lt;/h3&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;var browserify = require('gulp-browserify');
+</span><span class='line'>var concat = require('gulp-concat');
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h3&gt;Add the following tasks&lt;/h3&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;gulp.task('browserify', function() {
+</span><span class='line'>  gulp.src(['app/js/main.js'])
+</span><span class='line'>  .pipe(browserify({
+</span><span class='line'>    insertGlobals: true,
+</span><span class='line'>    debug: true
+</span><span class='line'>  }))
+</span><span class='line'>  .pipe(concat('bundled.js'))
+</span><span class='line'>  .pipe(gulp.dest('./app/js'))
+</span><span class='line'>});
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h3&gt;Now update the default task&lt;/h3&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code class="javascript"&gt;// default task
+</span><span class='line'>gulp.task('default',
+</span><span class='line'>  ['lint', 'browserify', 'connect']
+</span><span class='line'>);
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;h2&gt;Update the HTML&lt;/h2&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;Change the included JS file in &lt;em&gt;index.html&lt;/em&gt;.&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;From:&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;``` html&lt;/p&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;script src="./js/main.js"&gt;&lt;/script&gt;
+</span><span class='line'>
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code&gt;
+</span><span class='line'>To:
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;script src="./js/bundled.js"&gt;&lt;/script&gt;
+</span><span class='line'>
+</span><span class='line'>
+</span><span class='line'>&lt;pre&gt;&lt;code&gt;
+</span><span class='line'>### Test
+</span><span class='line'>
+</span><span class='line'>To recap:
+</span><span class='line'>
+</span><span class='line'>1. We added Browserify
+</span><span class='line'>2. Updated the build process so that a single JS file named *bundled.js* is created
+</span><span class='line'>3. Updated *index.html* to include that new JS file
+</span><span class='line'>&lt;/code&gt;&lt;/pre&gt;
+</span><span class='line'>
+</span><span class='line'>&lt;p&gt;$ gulp</span></code></pre></td></tr></table></div></figure></notextile></div></p>
 
 <p>Navigate to <a href="http://localhost:8888/">http://localhost:8888/</a> and you should still see:</p>
 
@@ -2281,348 +5302,6 @@ gulp.task('build', function() {
 <p><strong>As always, I&rsquo;d love to hear your feedback. How are you using Browserify in your projects? Comment below.</strong></p>
 
 <p>Thanks for reading.</p>
-]]></content>
-  </entry>
-  
-  <entry>
-    <title type="html"><![CDATA[Kickstarting Angular With Gulp and Browserify, Part 1 - Gulp and Bower]]></title>
-    <link href="http://mherman.org/blog/2014/08/14/kickstarting-angular-with-gulp/"/>
-    <updated>2014-08-14T08:17:00-06:00</updated>
-    <id>http://mherman.org/blog/2014/08/14/kickstarting-angular-with-gulp</id>
-    <content type="html"><![CDATA[<p>Let&rsquo;s develop an Angular boilerplate. Why? Despite the plethora of Angular seeds/generators/templates/boilerplates/starters/etc. on Github, none of them will ever do <em>exactly</em> what you want unless you build your own, piece by piece. By designing your own, you will better understand each component as well as how each fits into the greater project. Stop fighting against a boilerplate that just doesn&rsquo;t fit your needs and start from scratch. Keep it simple, as you learn the process.</p>
-
-<p><strong>In this first part, we&rsquo;ll start with Angular and Gulp, getting a working project setup. Next <a href="http://mherman.org/blog/2014/08/15/kickstarting-angular-with-gulp-and-browserify-part-2/#.U-4co4BdUZ0">time</a> we&rsquo;ll add Browserify into the mix.</strong></p>
-
-<blockquote><p>This tutorial assumes you have Node.js installed and have working knowledge of NPM and Angular. Just want the code? Get it <a href="https://github.com/mjhea0/angular-gulp-browserify-seed">here</a>.</p></blockquote>
-
-<h2>Project Setup</h2>
-
-<h3>Install Dependencies</h3>
-
-<h4>Setup a project folder and create a <em>package.json</em> file:</h4>
-
-<pre><code class="sh">$ mkdir project_name &amp;&amp; cd project_name
-$ npm init
-</code></pre>
-
-<p>The <code>npm init</code> command helps you create your project&rsquo;s base configuration through an interactive prompt. Be sure to update the &lsquo;entry point&rsquo; to &lsquo;gulpfile.js&rsquo;. You can just accept the defaults on the remaining prompts.</p>
-
-<p>Do the same for Bower:</p>
-
-<pre><code class="sh">$ bower init
-</code></pre>
-
-<p>Accept all the defaults. After the file is created update the <code>ignore</code> list:</p>
-
-<pre><code class="javascript">"ignore": [
-  "**/.*",
-  "node_modules",
-  "app/bower_components",
-  "test",
-  "tests"
-],
-</code></pre>
-
-<h4>Install global dependencies:</h4>
-
-<pre><code class="sh">$ npm install -g gulp bower
-</code></pre>
-
-<h4>Bower install directory</h4>
-
-<p>You can specify where you want the dependencies (commonly known as bower components) installed to by adding a <em>.bowerrc</em> file and adding the following code:</p>
-
-<pre><code class="javascript">{
-  "directory": "/app/bower_components"
-}
-</code></pre>
-
-<h4>Install local dependencies:</h4>
-
-<p><em>NPM</em></p>
-
-<pre><code class="sh">$ npm install gulp bower gulp-clean gulp-jshint gulp-uglify gulp-minify-css gulp-connect --save
-</code></pre>
-
-<p><em>Bower</em></p>
-
-<pre><code class="sh">$bower install angular angular-animate angular-route jquery animate.css bootstrap fontawesome --save
-</code></pre>
-
-<blockquote><p>The <code>--save</code> flag adds the dependencies to the <em>package.json</em> and <em>bower.json</em> files, respectively.</p></blockquote>
-
-<p>We&rsquo;ll address each of these dependencies shortly. For now, be sure you understand the project&rsquo;s core dependencies:</p>
-
-<ul>
-<li><strong><a href="http://gulpjs.com/">Gulp</a></strong> is a Javascript task runner, used to automate repetitive tasks (i.e., minifying, linting, testing, building, compiling) to simplify the build process.</li>
-<li><strong><a href="http://bower.io/">Bower</a></strong> manages front-end dependencies.</li>
-</ul>
-
-
-<h3>Folder Structure</h3>
-
-<p>Let&rsquo;s setup a base folder structure:</p>
-
-<pre><code class="sh">.
-├── app
-│   ├── bower_components
-│   ├── css
-│   │    └── main.css
-│   ├── img
-│   ├── index.html
-│   ├── partials
-│   │    ├── partial1.html
-│   │    └── partial2.html
-│   └── js
-│   │    └── main.js
-├── .bowerrc
-├── .gitignore
-├── bower.json
-├── gulpfile.js
-├── node_modules
-└── package.json
-</code></pre>
-
-<p>Add the files and folders not already included. This structure is based on the popular <a href="https://github.com/angular/angular-seed">Angular Seed</a> boilerplate, developed by the Angular team.</p>
-
-<h3>Gulp</h3>
-
-<p>To start, we just need the following code:</p>
-
-<pre><code class="javascript">// gulp
-var gulp = require('gulp');
-
-// plugins
-var connect = require('gulp-connect');
-
-
-gulp.task('connect', function () {
-  connect.server({
-    root: 'app/',
-    port: 8888
-  });
-});
-</code></pre>
-
-<p>This allows us to serve our future Angular app on a development server running on port 8888.</p>
-
-<h3>Test</h3>
-
-<p>Let&rsquo;s test it out. Add the word &lsquo;hi&rsquo; to the <em>index.html</em> file, then run the following command:</p>
-
-<pre><code class="sh">$ gulp connect
-</code></pre>
-
-<p>Navigate to <a href="http://localhost:8888/">http://localhost:8888/</a> and you should see &lsquo;hi&rsquo; staring back at you. Let&rsquo;s build a quick sample app. Keep the server running&hellip;</p>
-
-<h2>Develop a Sample App</h2>
-
-<h3><em>index.html</em></h3>
-
-<pre><code class="html">&lt;!DOCTYPE html&gt;
-&lt;html ng-app="SampleApp"&gt;
-  &lt;head lang="en"&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
-    &lt;meta name="description" content=""&gt;
-    &lt;meta name="author" content=""&gt;
-    &lt;title&gt;Angular-Gulp-Browserify-Starter&lt;/title&gt;
-    &lt;!-- styles --&gt;
-    &lt;link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/&gt;
-    &lt;link rel="stylesheet" href="bower_components/fontawesome/css/font-awesome.css"/&gt;
-    &lt;link rel="stylesheet" href="bower_components/animate.css/animate.css"/&gt;
-    &lt;link rel="stylesheet" href="css/main.css"/&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;div class="container"&gt;
-      &lt;h1&gt;Angular-Gulp-Browserify-Starter&lt;/h1&gt;
-      &lt;!-- views --&gt;
-      &lt;div ng-view&gt;&lt;/div&gt;
-    &lt;/div&gt;
-    &lt;!-- scripts --&gt;
-    &lt;script src="bower_components/jquery/dist/jquery.js"&gt;&lt;/script&gt;
-    &lt;script src="bower_components/angular/angular.js"&gt;&lt;/script&gt;
-    &lt;script src="bower_components/angular-route/angular-route.js"&gt;&lt;/script&gt;
-    &lt;script src="bower_components/angular-animate/angular-animate.js"&gt;&lt;/script&gt;
-    &lt;script src="bower_components/bootstrap/dist/js/bootstrap.js"&gt;&lt;/script&gt;
-    &lt;script src="js/main.js"&gt;&lt;/script&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
-</code></pre>
-
-<p>This should look familiar. The <code>ng-app</code> directive initiates an Angular app while <code>ng-view</code> sets the stage for routing.</p>
-
-<h3><em>main.js</em></h3>
-
-<pre><code class="javascript">(function () {
-
-'use strict';
-
-
-  angular.module('SampleApp', ['ngRoute', 'ngAnimate'])
-
-  .config([
-    '$locationProvider',
-    '$routeProvider',
-    function($locationProvider, $routeProvider) {
-      $locationProvider.hashPrefix('!');
-      // routes
-      $routeProvider
-        .when("/", {
-          templateUrl: "./partials/partial1.html",
-          controller: "MainController"
-        })
-        .otherwise({
-           redirectTo: '/'
-        });
-    }
-  ]);
-
-  //Load controller
-  angular.module('SampleApp')
-
-  .controller('MainController', [
-    '$scope',
-    function($scope) {
-      $scope.test = "Testing...";
-    }
-  ]);
-
-}());
-</code></pre>
-
-<p>Again, this should be relatively straightforward. We setup the basic Angular code to establish a route handler along with a controller that passes the variable <code>test</code> to the template.</p>
-
-<h3><em>partial1.html</em></h3>
-
-<p>Now let&rsquo;s add the partial template:</p>
-
-<p><figure class='code'><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="nt">&lt;/p&gt;</span>
-</span><span class='line'>
-</span><span class='line'><span class="nt">&lt;p&gt;</span>{{ test }}<span class="nt">&lt;/p&gt;</span>
-</span><span class='line'>
-</span><span class='line'>
-</span><span class='line'><span class="nt">&lt;p&gt;</span>
-</span></code></pre></td></tr></table></div></figure></p>
-
-<h3>Test</h3>
-
-<p>Back in your browser, refresh the page. You should see the text:</p>
-
-<pre><code>Angular-Gulp-Browserify-Starter
-
-Testing...
-</code></pre>
-
-<h2>Create the Build</h2>
-
-<p>Now that our app is working locally, let&rsquo;s modify our <em>gulpfile.js</em> to generate a deployable build. Kill the server.</p>
-
-<pre><code class="javascript">// gulp
-var gulp = require('gulp');
-
-// plugins
-var connect = require('gulp-connect');
-var jshint = require('gulp-jshint');
-var uglify = require('gulp-uglify');
-var minifyCSS = require('gulp-minify-css');
-var clean = require('gulp-clean');
-var runSequence = require('run-sequence');
-
-// tasks
-gulp.task('lint', function() {
-  gulp.src(['./app/**/*.js', '!./app/bower_components/**'])
-    .pipe(jshint())
-    .pipe(jshint.reporter('default'))
-    .pipe(jshint.reporter('fail'));
-});
-gulp.task('clean', function() {
-    gulp.src('./dist/*')
-      .pipe(clean({force: true}));
-});
-gulp.task('minify-css', function() {
-  var opts = {comments:true,spare:true};
-  gulp.src(['./app/**/*.css', '!./app/bower_components/**'])
-    .pipe(minifyCSS(opts))
-    .pipe(gulp.dest('./dist/'))
-});
-gulp.task('minify-js', function() {
-  gulp.src(['./app/**/*.js', '!./app/bower_components/**'])
-    .pipe(uglify({
-      // inSourceMap:
-      // outSourceMap: "app.js.map"
-    }))
-    .pipe(gulp.dest('./dist/'))
-});
-gulp.task('copy-bower-components', function () {
-  gulp.src('./app/bower_components/**')
-    .pipe(gulp.dest('dist/bower_components'));
-});
-gulp.task('copy-html-files', function () {
-  gulp.src('./app/**/*.html')
-    .pipe(gulp.dest('dist/'));
-});
-gulp.task('connect', function () {
-  connect.server({
-    root: 'app/',
-    port: 8888
-  });
-});
-gulp.task('connectDist', function () {
-  connect.server({
-    root: 'dist/',
-    port: 9999
-  });
-});
-
-
-// default task
-gulp.task('default',
-  ['lint', 'connect']
-);
-gulp.task('build', function() {
-  runSequence(
-    ['clean'],
-    ['lint', 'minify-css', 'minify-js', 'copy-html-files', 'copy-bower-components', 'connectDist']
-  );
-});
-</code></pre>
-
-<p><strong>What&rsquo;s happening here?</strong></p>
-
-<ol>
-<li><a href="https://github.com/spenceralger/gulp-jshint">gulp-jshint</a> checks for code quality in the JS files. If there are any issues the build fails and all errors output to the console.</li>
-<li><a href="https://github.com/peter-vilja/gulp-clean">gulp-clean</a> removes the entire build folder so that we start fresh every time we generate a new build.</li>
-<li><a href="https://github.com/terinjokes/gulp-uglify">gulp-uglify</a> and <a href="https://github.com/jonathanepollack/gulp-minify-css">gulp-minify-css</a> minify JS and CSS, respectively.</li>
-</ol>
-
-
-<h3>Build commands</h3>
-
-<p><strong>Default</strong></p>
-
-<p>The default task, <code>gulp</code>, is a compound task that runs both the <code>lint</code> and <code>connect</code> tasks. Again, this just serves the files in the &ldquo;app&rdquo; folder on <a href="http://localhost:8888/">http://localhost:8888/</a>.</p>
-
-<p><strong>Build</strong></p>
-
-<p>The build task creates a new directory called &ldquo;dist&rdquo;, runs the linter, minifies the CSS and JS files, and copies all the HTML files and Bower Components. You can then see what the final build looks like on <a href="http://localhost:9999/">http://localhost:9999/</a> before deployment. You should also run the <code>clean</code> task before you generate a build.</p>
-
-<p>Test this out:</p>
-
-<pre><code class="sh">$ gulp build
-</code></pre>
-
-<h2>Conclusion</h2>
-
-<p>Well, hopefully you now have a better understanding of how Gulp can greatly simply the build process, handling a number of repetitive tasks. Next time we&rsquo;ll clean up some of the mess that the Bower components leave behind by adding Browserify into the mix and detail a nice workflow that you can use for all your Angular projects.</p>
-
-<p>Leave questions and comments below. Cheers!</p>
 ]]></content>
   </entry>
   
diff --git a/blog/categories/angular/index.html b/blog/categories/angular/index.html
index 124d3076..e4f4290f 100644
--- a/blog/categories/angular/index.html
+++ b/blog/categories/angular/index.html
@@ -102,6 +102,23 @@ <h1 class="entry-title">Category: Angular</h1>
 
 
   
+  <h2>2017</h2>
+
+<article>
+  
+<h1><a href="/blog/2017/01/05/token-based-authentication-with-angular/">Token-Based Authentication With Angular</a></h1>
+<time datetime="2017-01-05T07:30:21-07:00" pubdate><span class='month'>Jan</span> <span class='day'>05</span> <span class='year'>2017</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+  
   <h2>2015</h2>
 
 <article>
@@ -207,7 +224,7 @@ <h1><a href="/blog/2014/06/12/primer-on-angularjs-service-types/">Primer on Angu
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/categories/atom/atom.xml b/blog/categories/atom/atom.xml
index a8735615..2ab27e29 100644
--- a/blog/categories/atom/atom.xml
+++ b/blog/categories/atom/atom.xml
@@ -4,7 +4,7 @@
   <title><![CDATA[Category: Atom | Michael Herman]]></title>
   <link href="http://mherman.org/blog/categories/atom/atom.xml" rel="self"/>
   <link href="http://mherman.org/"/>
-  <updated>2016-12-23T05:09:36-07:00</updated>
+  <updated>2017-01-05T08:08:25-07:00</updated>
   <id>http://mherman.org/</id>
   <author>
     <name><![CDATA[Michael Herman]]></name>
diff --git a/blog/categories/atom/index.html b/blog/categories/atom/index.html
index 37651b07..b9db2020 100644
--- a/blog/categories/atom/index.html
+++ b/blog/categories/atom/index.html
@@ -134,7 +134,7 @@ <h1><a href="/blog/2016/08/16/atom-for-web-developers/">Atom for Web Developers<
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/categories/crowdfunding/atom.xml b/blog/categories/crowdfunding/atom.xml
index 47838664..1f153819 100644
--- a/blog/categories/crowdfunding/atom.xml
+++ b/blog/categories/crowdfunding/atom.xml
@@ -4,7 +4,7 @@
   <title><![CDATA[Category: Crowdfunding | Michael Herman]]></title>
   <link href="http://mherman.org/blog/categories/crowdfunding/atom.xml" rel="self"/>
   <link href="http://mherman.org/"/>
-  <updated>2016-12-23T05:09:36-07:00</updated>
+  <updated>2017-01-05T08:08:25-07:00</updated>
   <id>http://mherman.org/</id>
   <author>
     <name><![CDATA[Michael Herman]]></name>
diff --git a/blog/categories/crowdfunding/index.html b/blog/categories/crowdfunding/index.html
index 25435e2d..26c7acfa 100644
--- a/blog/categories/crowdfunding/index.html
+++ b/blog/categories/crowdfunding/index.html
@@ -134,7 +134,7 @@ <h1><a href="/blog/2013/08/06/kickstarting-at-the-local-level/">Kickstarting at
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/categories/docker/atom.xml b/blog/categories/docker/atom.xml
index 123e4517..1d1826c9 100644
--- a/blog/categories/docker/atom.xml
+++ b/blog/categories/docker/atom.xml
@@ -4,7 +4,7 @@
   <title><![CDATA[Category: Docker | Michael Herman]]></title>
   <link href="http://mherman.org/blog/categories/docker/atom.xml" rel="self"/>
   <link href="http://mherman.org/"/>
-  <updated>2016-12-23T05:09:36-07:00</updated>
+  <updated>2017-01-05T08:08:25-07:00</updated>
   <id>http://mherman.org/</id>
   <author>
     <name><![CDATA[Michael Herman]]></name>
diff --git a/blog/categories/docker/index.html b/blog/categories/docker/index.html
index bb85a747..d798af1e 100644
--- a/blog/categories/docker/index.html
+++ b/blog/categories/docker/index.html
@@ -134,7 +134,7 @@ <h1><a href="/blog/2015/03/06/node-with-docker-continuous-integration-and-delive
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/categories/excel/atom.xml b/blog/categories/excel/atom.xml
index b5849be7..9242abac 100644
--- a/blog/categories/excel/atom.xml
+++ b/blog/categories/excel/atom.xml
@@ -4,7 +4,7 @@
   <title><![CDATA[Category: Excel | Michael Herman]]></title>
   <link href="http://mherman.org/blog/categories/excel/atom.xml" rel="self"/>
   <link href="http://mherman.org/"/>
-  <updated>2016-12-23T05:09:36-07:00</updated>
+  <updated>2017-01-05T08:08:25-07:00</updated>
   <id>http://mherman.org/</id>
   <author>
     <name><![CDATA[Michael Herman]]></name>
diff --git a/blog/categories/excel/index.html b/blog/categories/excel/index.html
index 876d4f6f..5e622f1c 100644
--- a/blog/categories/excel/index.html
+++ b/blog/categories/excel/index.html
@@ -162,7 +162,7 @@ <h1><a href="/blog/2012/09/30/import-data-from-excel-into-mysql-using-python/">I
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/categories/finance/atom.xml b/blog/categories/finance/atom.xml
index 19d6cd17..1f0c981a 100644
--- a/blog/categories/finance/atom.xml
+++ b/blog/categories/finance/atom.xml
@@ -4,7 +4,7 @@
   <title><![CDATA[Category: Finance | Michael Herman]]></title>
   <link href="http://mherman.org/blog/categories/finance/atom.xml" rel="self"/>
   <link href="http://mherman.org/"/>
-  <updated>2016-12-23T05:09:36-07:00</updated>
+  <updated>2017-01-05T08:08:25-07:00</updated>
   <id>http://mherman.org/</id>
   <author>
     <name><![CDATA[Michael Herman]]></name>
diff --git a/blog/categories/finance/index.html b/blog/categories/finance/index.html
index 57de6d9b..9061d4f0 100644
--- a/blog/categories/finance/index.html
+++ b/blog/categories/finance/index.html
@@ -148,7 +148,7 @@ <h1><a href="/blog/2013/01/10/how-to-build-a-financial-model-for-your-startup/">
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/categories/frontend/atom.xml b/blog/categories/frontend/atom.xml
index e5a39dbb..a369026e 100644
--- a/blog/categories/frontend/atom.xml
+++ b/blog/categories/frontend/atom.xml
@@ -4,7 +4,7 @@
   <title><![CDATA[Category: Frontend | Michael Herman]]></title>
   <link href="http://mherman.org/blog/categories/frontend/atom.xml" rel="self"/>
   <link href="http://mherman.org/"/>
-  <updated>2016-12-23T05:09:36-07:00</updated>
+  <updated>2017-01-05T08:08:25-07:00</updated>
   <id>http://mherman.org/</id>
   <author>
     <name><![CDATA[Michael Herman]]></name>
diff --git a/blog/categories/frontend/index.html b/blog/categories/frontend/index.html
index 4a04c25b..dc2c82ea 100644
--- a/blog/categories/frontend/index.html
+++ b/blog/categories/frontend/index.html
@@ -134,7 +134,7 @@ <h1><a href="/blog/2014/01/15/mad-libs-with-jquery-a-gentle-introduction-to-jque
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/categories/git/atom.xml b/blog/categories/git/atom.xml
index aaf5e920..35b23b4d 100644
--- a/blog/categories/git/atom.xml
+++ b/blog/categories/git/atom.xml
@@ -4,7 +4,7 @@
   <title><![CDATA[Category: Git | Michael Herman]]></title>
   <link href="http://mherman.org/blog/categories/git/atom.xml" rel="self"/>
   <link href="http://mherman.org/"/>
-  <updated>2016-12-23T05:09:36-07:00</updated>
+  <updated>2017-01-05T08:08:25-07:00</updated>
   <id>http://mherman.org/</id>
   <author>
     <name><![CDATA[Michael Herman]]></name>
diff --git a/blog/categories/git/index.html b/blog/categories/git/index.html
index 7fbb83da..45f258ea 100644
--- a/blog/categories/git/index.html
+++ b/blog/categories/git/index.html
@@ -134,7 +134,7 @@ <h1><a href="/blog/2013/10/11/basic-git-commands/">Basic Git Commands</a></h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/categories/github/atom.xml b/blog/categories/github/atom.xml
index aaba2001..7f0ec06d 100644
--- a/blog/categories/github/atom.xml
+++ b/blog/categories/github/atom.xml
@@ -4,7 +4,7 @@
   <title><![CDATA[Category: Github | Michael Herman]]></title>
   <link href="http://mherman.org/blog/categories/github/atom.xml" rel="self"/>
   <link href="http://mherman.org/"/>
-  <updated>2016-12-23T05:09:36-07:00</updated>
+  <updated>2017-01-05T08:08:25-07:00</updated>
   <id>http://mherman.org/</id>
   <author>
     <name><![CDATA[Michael Herman]]></name>
diff --git a/blog/categories/github/index.html b/blog/categories/github/index.html
index 459ed49b..11192e35 100644
--- a/blog/categories/github/index.html
+++ b/blog/categories/github/index.html
@@ -134,7 +134,7 @@ <h1><a href="/blog/2013/09/16/managing-multiple-github-accounts/">Managing Multi
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/categories/meteor/atom.xml b/blog/categories/meteor/atom.xml
index 9751a8bf..49712d13 100644
--- a/blog/categories/meteor/atom.xml
+++ b/blog/categories/meteor/atom.xml
@@ -4,7 +4,7 @@
   <title><![CDATA[Category: Meteor | Michael Herman]]></title>
   <link href="http://mherman.org/blog/categories/meteor/atom.xml" rel="self"/>
   <link href="http://mherman.org/"/>
-  <updated>2016-12-23T05:09:36-07:00</updated>
+  <updated>2017-01-05T08:08:25-07:00</updated>
   <id>http://mherman.org/</id>
   <author>
     <name><![CDATA[Michael Herman]]></name>
diff --git a/blog/categories/meteor/index.html b/blog/categories/meteor/index.html
index f9fcbec4..fe5b7b18 100644
--- a/blog/categories/meteor/index.html
+++ b/blog/categories/meteor/index.html
@@ -134,7 +134,7 @@ <h1><a href="/blog/2014/01/29/meteor-dot-js-in-action-create-an-app-test-with-la
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/categories/news/atom.xml b/blog/categories/news/atom.xml
index 0d5589e2..0f336277 100644
--- a/blog/categories/news/atom.xml
+++ b/blog/categories/news/atom.xml
@@ -4,7 +4,7 @@
   <title><![CDATA[Category: News | Michael Herman]]></title>
   <link href="http://mherman.org/blog/categories/news/atom.xml" rel="self"/>
   <link href="http://mherman.org/"/>
-  <updated>2016-12-23T05:09:36-07:00</updated>
+  <updated>2017-01-05T08:08:25-07:00</updated>
   <id>http://mherman.org/</id>
   <author>
     <name><![CDATA[Michael Herman]]></name>
diff --git a/blog/categories/news/index.html b/blog/categories/news/index.html
index 528f07ad..3f60e782 100644
--- a/blog/categories/news/index.html
+++ b/blog/categories/news/index.html
@@ -148,7 +148,7 @@ <h1><a href="/blog/2013/05/27/what-am-i-good-at/">What Am I Good At?</a></h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/categories/node/atom.xml b/blog/categories/node/atom.xml
index dd8ee8ae..acfb3ecd 100644
--- a/blog/categories/node/atom.xml
+++ b/blog/categories/node/atom.xml
@@ -4,7 +4,7 @@
   <title><![CDATA[Category: Node | Michael Herman]]></title>
   <link href="http://mherman.org/blog/categories/node/atom.xml" rel="self"/>
   <link href="http://mherman.org/"/>
-  <updated>2016-12-23T05:09:36-07:00</updated>
+  <updated>2017-01-05T08:08:25-07:00</updated>
   <id>http://mherman.org/</id>
   <author>
     <name><![CDATA[Michael Herman]]></name>
@@ -2455,6 +2455,8 @@ exports.seed = (knex, Promise) =&gt; {
 
 <p>Feel free to share your comments, questions, or tips in the comments below. The full code can be found in the <a href="https://github.com/mjhea0/node-token-auth">node-token-auth</a> repository. Cheers!</p>
 
+<blockquote><p>Check out the <a href="https://news.ycombinator.com/item?id=13301105">HN Discussion</a> as well!</p></blockquote>
+
 <p>Did you enjoy this post? Please share. Sharing is caring.</p>
 ]]></content>
   </entry>
diff --git a/blog/categories/node/index.html b/blog/categories/node/index.html
index 02ebfaf3..548a8592 100644
--- a/blog/categories/node/index.html
+++ b/blog/categories/node/index.html
@@ -507,7 +507,7 @@ <h1><a href="/blog/2013/10/20/handling-ajax-calls-with-node-dot-js-and-express-s
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/categories/python/atom.xml b/blog/categories/python/atom.xml
index d19627fd..6034f29b 100644
--- a/blog/categories/python/atom.xml
+++ b/blog/categories/python/atom.xml
@@ -4,7 +4,7 @@
   <title><![CDATA[Category: Python | Michael Herman]]></title>
   <link href="http://mherman.org/blog/categories/python/atom.xml" rel="self"/>
   <link href="http://mherman.org/"/>
-  <updated>2016-12-23T05:09:36-07:00</updated>
+  <updated>2017-01-05T08:08:25-07:00</updated>
   <id>http://mherman.org/</id>
   <author>
     <name><![CDATA[Michael Herman]]></name>
diff --git a/blog/categories/python/index.html b/blog/categories/python/index.html
index 780f3934..6e352472 100644
--- a/blog/categories/python/index.html
+++ b/blog/categories/python/index.html
@@ -277,7 +277,7 @@ <h1><a href="/blog/2012/10/05/web-scraping-with-regular-expressions/">Web Scrapi
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/categories/ruby/atom.xml b/blog/categories/ruby/atom.xml
index 66d27f95..8f1e078e 100644
--- a/blog/categories/ruby/atom.xml
+++ b/blog/categories/ruby/atom.xml
@@ -4,7 +4,7 @@
   <title><![CDATA[Category: Ruby | Michael Herman]]></title>
   <link href="http://mherman.org/blog/categories/ruby/atom.xml" rel="self"/>
   <link href="http://mherman.org/"/>
-  <updated>2016-12-23T05:09:36-07:00</updated>
+  <updated>2017-01-05T08:08:25-07:00</updated>
   <id>http://mherman.org/</id>
   <author>
     <name><![CDATA[Michael Herman]]></name>
diff --git a/blog/categories/ruby/index.html b/blog/categories/ruby/index.html
index fb92ae10..6d4e004c 100644
--- a/blog/categories/ruby/index.html
+++ b/blog/categories/ruby/index.html
@@ -165,7 +165,7 @@ <h1><a href="/blog/2013/06/08/designing-with-class-sinatra-plus-postgresql-plus-
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/categories/startups/atom.xml b/blog/categories/startups/atom.xml
index b56388d4..14e6f4bc 100644
--- a/blog/categories/startups/atom.xml
+++ b/blog/categories/startups/atom.xml
@@ -4,7 +4,7 @@
   <title><![CDATA[Category: Startups | Michael Herman]]></title>
   <link href="http://mherman.org/blog/categories/startups/atom.xml" rel="self"/>
   <link href="http://mherman.org/"/>
-  <updated>2016-12-23T05:09:36-07:00</updated>
+  <updated>2017-01-05T08:08:25-07:00</updated>
   <id>http://mherman.org/</id>
   <author>
     <name><![CDATA[Michael Herman]]></name>
diff --git a/blog/categories/startups/index.html b/blog/categories/startups/index.html
index a65cbd3f..fb253664 100644
--- a/blog/categories/startups/index.html
+++ b/blog/categories/startups/index.html
@@ -165,7 +165,7 @@ <h1><a href="/blog/2013/06/28/less-is-more/">Less Is More</a></h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/categories/sublime/atom.xml b/blog/categories/sublime/atom.xml
index 61057587..3861fe32 100644
--- a/blog/categories/sublime/atom.xml
+++ b/blog/categories/sublime/atom.xml
@@ -4,7 +4,7 @@
   <title><![CDATA[Category: Sublime | Michael Herman]]></title>
   <link href="http://mherman.org/blog/categories/sublime/atom.xml" rel="self"/>
   <link href="http://mherman.org/"/>
-  <updated>2016-12-23T05:09:36-07:00</updated>
+  <updated>2017-01-05T08:08:25-07:00</updated>
   <id>http://mherman.org/</id>
   <author>
     <name><![CDATA[Michael Herman]]></name>
diff --git a/blog/categories/sublime/index.html b/blog/categories/sublime/index.html
index c6faaed1..be864a63 100644
--- a/blog/categories/sublime/index.html
+++ b/blog/categories/sublime/index.html
@@ -134,7 +134,7 @@ <h1><a href="/blog/2015/02/05/sublime-text-for-web-developers/">Sublime Text for
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/blog/index.html b/blog/index.html
index 8e1bf000..24d0d9ff 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -100,7 +100,7 @@ <h2>Software Developer</h2>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/index.html b/index.html
index 2648dc64..28d497fc 100644
--- a/index.html
+++ b/index.html
@@ -9,9 +9,9 @@
   <meta name="author" content="Michael Herman">
 
   
-  <meta name="description" content="2016 Building a RESTful API With Node, Flow, and Jest
-Dec 23 2016 Developing a RESTful API With Node and TypeScript
-Nov 05 2016 Token-Based &hellip;">
+  <meta name="description" content="2017 Token-Based Authentication With Angular
+Jan 05 2017 2016 Building a RESTful API With Node, Flow, and Jest
+Dec 23 2016 Developing a RESTful API &hellip;">
   
 
   <!-- http://t.co/dKP3o1e -->
@@ -99,6 +99,23 @@ <h2>Software Developer</h2>
 
 
   
+  <h2>2017</h2>
+
+<article>
+  
+<h1><a href="/blog/2017/01/05/token-based-authentication-with-angular/">Token-Based Authentication With Angular</a></h1>
+<time datetime="2017-01-05T07:30:21-07:00" pubdate><span class='month'>Jan</span> <span class='day'>05</span> <span class='year'>2017</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+  
   <h2>2016</h2>
 
 <article>
@@ -1138,7 +1155,7 @@ <h1><a href="/blog/2012/09/01/predictive-analytics-top-5-trends-going-forward/">
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/posts/10/index.html b/posts/10/index.html
index 36af281c..cd55fc9a 100644
--- a/posts/10/index.html
+++ b/posts/10/index.html
@@ -9,9 +9,9 @@
   <meta name="author" content="Michael Herman">
 
   
-  <meta name="description" content="2016 Building a RESTful API With Node, Flow, and Jest
-Dec 23 2016 Developing a RESTful API With Node and TypeScript
-Nov 05 2016 Token-Based &hellip;">
+  <meta name="description" content="2017 Token-Based Authentication With Angular
+Jan 05 2017 2016 Building a RESTful API With Node, Flow, and Jest
+Dec 23 2016 Developing a RESTful API &hellip;">
   
 
   <!-- http://t.co/dKP3o1e -->
@@ -99,6 +99,23 @@ <h2>Software Developer</h2>
 
 
   
+  <h2>2017</h2>
+
+<article>
+  
+<h1><a href="/blog/2017/01/05/token-based-authentication-with-angular/">Token-Based Authentication With Angular</a></h1>
+<time datetime="2017-01-05T07:30:21-07:00" pubdate><span class='month'>Jan</span> <span class='day'>05</span> <span class='year'>2017</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+  
   <h2>2016</h2>
 
 <article>
@@ -1138,7 +1155,7 @@ <h1><a href="/blog/2012/09/01/predictive-analytics-top-5-trends-going-forward/">
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/posts/11/index.html b/posts/11/index.html
index 6c0be855..930e375e 100644
--- a/posts/11/index.html
+++ b/posts/11/index.html
@@ -9,9 +9,9 @@
   <meta name="author" content="Michael Herman">
 
   
-  <meta name="description" content="2016 Building a RESTful API With Node, Flow, and Jest
-Dec 23 2016 Developing a RESTful API With Node and TypeScript
-Nov 05 2016 Token-Based &hellip;">
+  <meta name="description" content="2017 Token-Based Authentication With Angular
+Jan 05 2017 2016 Building a RESTful API With Node, Flow, and Jest
+Dec 23 2016 Developing a RESTful API &hellip;">
   
 
   <!-- http://t.co/dKP3o1e -->
@@ -99,6 +99,23 @@ <h2>Software Developer</h2>
 
 
   
+  <h2>2017</h2>
+
+<article>
+  
+<h1><a href="/blog/2017/01/05/token-based-authentication-with-angular/">Token-Based Authentication With Angular</a></h1>
+<time datetime="2017-01-05T07:30:21-07:00" pubdate><span class='month'>Jan</span> <span class='day'>05</span> <span class='year'>2017</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+  
   <h2>2016</h2>
 
 <article>
@@ -1138,7 +1155,7 @@ <h1><a href="/blog/2012/09/01/predictive-analytics-top-5-trends-going-forward/">
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/posts/12/index.html b/posts/12/index.html
index 56aa0e51..c81b92bb 100644
--- a/posts/12/index.html
+++ b/posts/12/index.html
@@ -9,9 +9,9 @@
   <meta name="author" content="Michael Herman">
 
   
-  <meta name="description" content="2016 Building a RESTful API With Node, Flow, and Jest
-Dec 23 2016 Developing a RESTful API With Node and TypeScript
-Nov 05 2016 Token-Based &hellip;">
+  <meta name="description" content="2017 Token-Based Authentication With Angular
+Jan 05 2017 2016 Building a RESTful API With Node, Flow, and Jest
+Dec 23 2016 Developing a RESTful API &hellip;">
   
 
   <!-- http://t.co/dKP3o1e -->
@@ -99,6 +99,23 @@ <h2>Software Developer</h2>
 
 
   
+  <h2>2017</h2>
+
+<article>
+  
+<h1><a href="/blog/2017/01/05/token-based-authentication-with-angular/">Token-Based Authentication With Angular</a></h1>
+<time datetime="2017-01-05T07:30:21-07:00" pubdate><span class='month'>Jan</span> <span class='day'>05</span> <span class='year'>2017</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+  
   <h2>2016</h2>
 
 <article>
@@ -1138,7 +1155,7 @@ <h1><a href="/blog/2012/09/01/predictive-analytics-top-5-trends-going-forward/">
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/posts/13/index.html b/posts/13/index.html
index bd7bad86..8adbf751 100644
--- a/posts/13/index.html
+++ b/posts/13/index.html
@@ -9,9 +9,9 @@
   <meta name="author" content="Michael Herman">
 
   
-  <meta name="description" content="2016 Building a RESTful API With Node, Flow, and Jest
-Dec 23 2016 Developing a RESTful API With Node and TypeScript
-Nov 05 2016 Token-Based &hellip;">
+  <meta name="description" content="2017 Token-Based Authentication With Angular
+Jan 05 2017 2016 Building a RESTful API With Node, Flow, and Jest
+Dec 23 2016 Developing a RESTful API &hellip;">
   
 
   <!-- http://t.co/dKP3o1e -->
@@ -99,6 +99,23 @@ <h2>Software Developer</h2>
 
 
   
+  <h2>2017</h2>
+
+<article>
+  
+<h1><a href="/blog/2017/01/05/token-based-authentication-with-angular/">Token-Based Authentication With Angular</a></h1>
+<time datetime="2017-01-05T07:30:21-07:00" pubdate><span class='month'>Jan</span> <span class='day'>05</span> <span class='year'>2017</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+  
   <h2>2016</h2>
 
 <article>
@@ -1138,7 +1155,7 @@ <h1><a href="/blog/2012/09/01/predictive-analytics-top-5-trends-going-forward/">
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/posts/14/index.html b/posts/14/index.html
index 62fd00bb..d0715947 100644
--- a/posts/14/index.html
+++ b/posts/14/index.html
@@ -9,9 +9,9 @@
   <meta name="author" content="Michael Herman">
 
   
-  <meta name="description" content="2016 Building a RESTful API With Node, Flow, and Jest
-Dec 23 2016 Developing a RESTful API With Node and TypeScript
-Nov 05 2016 Token-Based &hellip;">
+  <meta name="description" content="2017 Token-Based Authentication With Angular
+Jan 05 2017 2016 Building a RESTful API With Node, Flow, and Jest
+Dec 23 2016 Developing a RESTful API &hellip;">
   
 
   <!-- http://t.co/dKP3o1e -->
@@ -99,6 +99,23 @@ <h2>Software Developer</h2>
 
 
   
+  <h2>2017</h2>
+
+<article>
+  
+<h1><a href="/blog/2017/01/05/token-based-authentication-with-angular/">Token-Based Authentication With Angular</a></h1>
+<time datetime="2017-01-05T07:30:21-07:00" pubdate><span class='month'>Jan</span> <span class='day'>05</span> <span class='year'>2017</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+  
   <h2>2016</h2>
 
 <article>
@@ -1138,7 +1155,7 @@ <h1><a href="/blog/2012/09/01/predictive-analytics-top-5-trends-going-forward/">
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/posts/15/index.html b/posts/15/index.html
index 3910c148..0f2d8874 100644
--- a/posts/15/index.html
+++ b/posts/15/index.html
@@ -9,9 +9,9 @@
   <meta name="author" content="Michael Herman">
 
   
-  <meta name="description" content="2016 Building a RESTful API With Node, Flow, and Jest
-Dec 23 2016 Developing a RESTful API With Node and TypeScript
-Nov 05 2016 Token-Based &hellip;">
+  <meta name="description" content="2017 Token-Based Authentication With Angular
+Jan 05 2017 2016 Building a RESTful API With Node, Flow, and Jest
+Dec 23 2016 Developing a RESTful API &hellip;">
   
 
   <!-- http://t.co/dKP3o1e -->
@@ -99,6 +99,23 @@ <h2>Software Developer</h2>
 
 
   
+  <h2>2017</h2>
+
+<article>
+  
+<h1><a href="/blog/2017/01/05/token-based-authentication-with-angular/">Token-Based Authentication With Angular</a></h1>
+<time datetime="2017-01-05T07:30:21-07:00" pubdate><span class='month'>Jan</span> <span class='day'>05</span> <span class='year'>2017</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+  
   <h2>2016</h2>
 
 <article>
@@ -1138,7 +1155,7 @@ <h1><a href="/blog/2012/09/01/predictive-analytics-top-5-trends-going-forward/">
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/posts/16/index.html b/posts/16/index.html
index 3bfd98aa..9ab500ee 100644
--- a/posts/16/index.html
+++ b/posts/16/index.html
@@ -9,9 +9,9 @@
   <meta name="author" content="Michael Herman">
 
   
-  <meta name="description" content="2016 Building a RESTful API With Node, Flow, and Jest
-Dec 23 2016 Developing a RESTful API With Node and TypeScript
-Nov 05 2016 Token-Based &hellip;">
+  <meta name="description" content="2017 Token-Based Authentication With Angular
+Jan 05 2017 2016 Building a RESTful API With Node, Flow, and Jest
+Dec 23 2016 Developing a RESTful API &hellip;">
   
 
   <!-- http://t.co/dKP3o1e -->
@@ -99,6 +99,23 @@ <h2>Software Developer</h2>
 
 
   
+  <h2>2017</h2>
+
+<article>
+  
+<h1><a href="/blog/2017/01/05/token-based-authentication-with-angular/">Token-Based Authentication With Angular</a></h1>
+<time datetime="2017-01-05T07:30:21-07:00" pubdate><span class='month'>Jan</span> <span class='day'>05</span> <span class='year'>2017</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+  
   <h2>2016</h2>
 
 <article>
@@ -1138,7 +1155,7 @@ <h1><a href="/blog/2012/09/01/predictive-analytics-top-5-trends-going-forward/">
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/posts/17/index.html b/posts/17/index.html
index 82a0769b..c5f7885b 100644
--- a/posts/17/index.html
+++ b/posts/17/index.html
@@ -9,9 +9,9 @@
   <meta name="author" content="Michael Herman">
 
   
-  <meta name="description" content="2016 Building a RESTful API With Node, Flow, and Jest
-Dec 23 2016 Developing a RESTful API With Node and TypeScript
-Nov 05 2016 Token-Based &hellip;">
+  <meta name="description" content="2017 Token-Based Authentication With Angular
+Jan 05 2017 2016 Building a RESTful API With Node, Flow, and Jest
+Dec 23 2016 Developing a RESTful API &hellip;">
   
 
   <!-- http://t.co/dKP3o1e -->
@@ -99,6 +99,23 @@ <h2>Software Developer</h2>
 
 
   
+  <h2>2017</h2>
+
+<article>
+  
+<h1><a href="/blog/2017/01/05/token-based-authentication-with-angular/">Token-Based Authentication With Angular</a></h1>
+<time datetime="2017-01-05T07:30:21-07:00" pubdate><span class='month'>Jan</span> <span class='day'>05</span> <span class='year'>2017</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+  
   <h2>2016</h2>
 
 <article>
@@ -1138,7 +1155,7 @@ <h1><a href="/blog/2012/09/01/predictive-analytics-top-5-trends-going-forward/">
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/posts/18/index.html b/posts/18/index.html
index 3beef893..55808ae6 100644
--- a/posts/18/index.html
+++ b/posts/18/index.html
@@ -9,9 +9,9 @@
   <meta name="author" content="Michael Herman">
 
   
-  <meta name="description" content="2016 Building a RESTful API With Node, Flow, and Jest
-Dec 23 2016 Developing a RESTful API With Node and TypeScript
-Nov 05 2016 Token-Based &hellip;">
+  <meta name="description" content="2017 Token-Based Authentication With Angular
+Jan 05 2017 2016 Building a RESTful API With Node, Flow, and Jest
+Dec 23 2016 Developing a RESTful API &hellip;">
   
 
   <!-- http://t.co/dKP3o1e -->
@@ -99,6 +99,23 @@ <h2>Software Developer</h2>
 
 
   
+  <h2>2017</h2>
+
+<article>
+  
+<h1><a href="/blog/2017/01/05/token-based-authentication-with-angular/">Token-Based Authentication With Angular</a></h1>
+<time datetime="2017-01-05T07:30:21-07:00" pubdate><span class='month'>Jan</span> <span class='day'>05</span> <span class='year'>2017</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+  
   <h2>2016</h2>
 
 <article>
@@ -1138,7 +1155,7 @@ <h1><a href="/blog/2012/09/01/predictive-analytics-top-5-trends-going-forward/">
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/posts/19/index.html b/posts/19/index.html
index d0acd8de..a60cb4cf 100644
--- a/posts/19/index.html
+++ b/posts/19/index.html
@@ -9,9 +9,9 @@
   <meta name="author" content="Michael Herman">
 
   
-  <meta name="description" content="2016 Building a RESTful API With Node, Flow, and Jest
-Dec 23 2016 Developing a RESTful API With Node and TypeScript
-Nov 05 2016 Token-Based &hellip;">
+  <meta name="description" content="2017 Token-Based Authentication With Angular
+Jan 05 2017 2016 Building a RESTful API With Node, Flow, and Jest
+Dec 23 2016 Developing a RESTful API &hellip;">
   
 
   <!-- http://t.co/dKP3o1e -->
@@ -99,6 +99,23 @@ <h2>Software Developer</h2>
 
 
   
+  <h2>2017</h2>
+
+<article>
+  
+<h1><a href="/blog/2017/01/05/token-based-authentication-with-angular/">Token-Based Authentication With Angular</a></h1>
+<time datetime="2017-01-05T07:30:21-07:00" pubdate><span class='month'>Jan</span> <span class='day'>05</span> <span class='year'>2017</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+  
   <h2>2016</h2>
 
 <article>
@@ -1138,7 +1155,7 @@ <h1><a href="/blog/2012/09/01/predictive-analytics-top-5-trends-going-forward/">
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/posts/2/index.html b/posts/2/index.html
index c88d5926..2fb2ba75 100644
--- a/posts/2/index.html
+++ b/posts/2/index.html
@@ -9,9 +9,9 @@
   <meta name="author" content="Michael Herman">
 
   
-  <meta name="description" content="2016 Building a RESTful API With Node, Flow, and Jest
-Dec 23 2016 Developing a RESTful API With Node and TypeScript
-Nov 05 2016 Token-Based &hellip;">
+  <meta name="description" content="2017 Token-Based Authentication With Angular
+Jan 05 2017 2016 Building a RESTful API With Node, Flow, and Jest
+Dec 23 2016 Developing a RESTful API &hellip;">
   
 
   <!-- http://t.co/dKP3o1e -->
@@ -99,6 +99,23 @@ <h2>Software Developer</h2>
 
 
   
+  <h2>2017</h2>
+
+<article>
+  
+<h1><a href="/blog/2017/01/05/token-based-authentication-with-angular/">Token-Based Authentication With Angular</a></h1>
+<time datetime="2017-01-05T07:30:21-07:00" pubdate><span class='month'>Jan</span> <span class='day'>05</span> <span class='year'>2017</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+  
   <h2>2016</h2>
 
 <article>
@@ -1138,7 +1155,7 @@ <h1><a href="/blog/2012/09/01/predictive-analytics-top-5-trends-going-forward/">
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/posts/20/index.html b/posts/20/index.html
index 47b5aef9..dd6277f8 100644
--- a/posts/20/index.html
+++ b/posts/20/index.html
@@ -9,9 +9,9 @@
   <meta name="author" content="Michael Herman">
 
   
-  <meta name="description" content="2016 Building a RESTful API With Node, Flow, and Jest
-Dec 23 2016 Developing a RESTful API With Node and TypeScript
-Nov 05 2016 Token-Based &hellip;">
+  <meta name="description" content="2017 Token-Based Authentication With Angular
+Jan 05 2017 2016 Building a RESTful API With Node, Flow, and Jest
+Dec 23 2016 Developing a RESTful API &hellip;">
   
 
   <!-- http://t.co/dKP3o1e -->
@@ -99,6 +99,23 @@ <h2>Software Developer</h2>
 
 
   
+  <h2>2017</h2>
+
+<article>
+  
+<h1><a href="/blog/2017/01/05/token-based-authentication-with-angular/">Token-Based Authentication With Angular</a></h1>
+<time datetime="2017-01-05T07:30:21-07:00" pubdate><span class='month'>Jan</span> <span class='day'>05</span> <span class='year'>2017</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+  
   <h2>2016</h2>
 
 <article>
@@ -1138,7 +1155,7 @@ <h1><a href="/blog/2012/09/01/predictive-analytics-top-5-trends-going-forward/">
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/posts/21/index.html b/posts/21/index.html
index bde983aa..d67aa57e 100644
--- a/posts/21/index.html
+++ b/posts/21/index.html
@@ -9,9 +9,9 @@
   <meta name="author" content="Michael Herman">
 
   
-  <meta name="description" content="2016 Building a RESTful API With Node, Flow, and Jest
-Dec 23 2016 Developing a RESTful API With Node and TypeScript
-Nov 05 2016 Token-Based &hellip;">
+  <meta name="description" content="2017 Token-Based Authentication With Angular
+Jan 05 2017 2016 Building a RESTful API With Node, Flow, and Jest
+Dec 23 2016 Developing a RESTful API &hellip;">
   
 
   <!-- http://t.co/dKP3o1e -->
@@ -99,6 +99,23 @@ <h2>Software Developer</h2>
 
 
   
+  <h2>2017</h2>
+
+<article>
+  
+<h1><a href="/blog/2017/01/05/token-based-authentication-with-angular/">Token-Based Authentication With Angular</a></h1>
+<time datetime="2017-01-05T07:30:21-07:00" pubdate><span class='month'>Jan</span> <span class='day'>05</span> <span class='year'>2017</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+  
   <h2>2016</h2>
 
 <article>
@@ -1138,7 +1155,7 @@ <h1><a href="/blog/2012/09/01/predictive-analytics-top-5-trends-going-forward/">
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/posts/22/index.html b/posts/22/index.html
index 7ecb4372..342ca2cf 100644
--- a/posts/22/index.html
+++ b/posts/22/index.html
@@ -9,9 +9,9 @@
   <meta name="author" content="Michael Herman">
 
   
-  <meta name="description" content="2016 Building a RESTful API With Node, Flow, and Jest
-Dec 23 2016 Developing a RESTful API With Node and TypeScript
-Nov 05 2016 Token-Based &hellip;">
+  <meta name="description" content="2017 Token-Based Authentication With Angular
+Jan 05 2017 2016 Building a RESTful API With Node, Flow, and Jest
+Dec 23 2016 Developing a RESTful API &hellip;">
   
 
   <!-- http://t.co/dKP3o1e -->
@@ -99,6 +99,23 @@ <h2>Software Developer</h2>
 
 
   
+  <h2>2017</h2>
+
+<article>
+  
+<h1><a href="/blog/2017/01/05/token-based-authentication-with-angular/">Token-Based Authentication With Angular</a></h1>
+<time datetime="2017-01-05T07:30:21-07:00" pubdate><span class='month'>Jan</span> <span class='day'>05</span> <span class='year'>2017</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+  
   <h2>2016</h2>
 
 <article>
@@ -1138,7 +1155,7 @@ <h1><a href="/blog/2012/09/01/predictive-analytics-top-5-trends-going-forward/">
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/posts/23/index.html b/posts/23/index.html
index 64876a71..53155605 100644
--- a/posts/23/index.html
+++ b/posts/23/index.html
@@ -9,9 +9,9 @@
   <meta name="author" content="Michael Herman">
 
   
-  <meta name="description" content="2016 Building a RESTful API With Node, Flow, and Jest
-Dec 23 2016 Developing a RESTful API With Node and TypeScript
-Nov 05 2016 Token-Based &hellip;">
+  <meta name="description" content="2017 Token-Based Authentication With Angular
+Jan 05 2017 2016 Building a RESTful API With Node, Flow, and Jest
+Dec 23 2016 Developing a RESTful API &hellip;">
   
 
   <!-- http://t.co/dKP3o1e -->
@@ -99,6 +99,23 @@ <h2>Software Developer</h2>
 
 
   
+  <h2>2017</h2>
+
+<article>
+  
+<h1><a href="/blog/2017/01/05/token-based-authentication-with-angular/">Token-Based Authentication With Angular</a></h1>
+<time datetime="2017-01-05T07:30:21-07:00" pubdate><span class='month'>Jan</span> <span class='day'>05</span> <span class='year'>2017</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+  
   <h2>2016</h2>
 
 <article>
@@ -1138,7 +1155,7 @@ <h1><a href="/blog/2012/09/01/predictive-analytics-top-5-trends-going-forward/">
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/posts/24/index.html b/posts/24/index.html
index fe0b09cf..752c284f 100644
--- a/posts/24/index.html
+++ b/posts/24/index.html
@@ -9,9 +9,9 @@
   <meta name="author" content="Michael Herman">
 
   
-  <meta name="description" content="2016 Building a RESTful API With Node, Flow, and Jest
-Dec 23 2016 Developing a RESTful API With Node and TypeScript
-Nov 05 2016 Token-Based &hellip;">
+  <meta name="description" content="2017 Token-Based Authentication With Angular
+Jan 05 2017 2016 Building a RESTful API With Node, Flow, and Jest
+Dec 23 2016 Developing a RESTful API &hellip;">
   
 
   <!-- http://t.co/dKP3o1e -->
@@ -99,6 +99,23 @@ <h2>Software Developer</h2>
 
 
   
+  <h2>2017</h2>
+
+<article>
+  
+<h1><a href="/blog/2017/01/05/token-based-authentication-with-angular/">Token-Based Authentication With Angular</a></h1>
+<time datetime="2017-01-05T07:30:21-07:00" pubdate><span class='month'>Jan</span> <span class='day'>05</span> <span class='year'>2017</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+  
   <h2>2016</h2>
 
 <article>
@@ -1138,7 +1155,7 @@ <h1><a href="/blog/2012/09/01/predictive-analytics-top-5-trends-going-forward/">
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/posts/25/index.html b/posts/25/index.html
new file mode 100644
index 00000000..8d2c8e70
--- /dev/null
+++ b/posts/25/index.html
@@ -0,0 +1,1214 @@
+
+<!DOCTYPE html>
+<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
+<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
+<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
+<head>
+  <meta charset="utf-8">
+  <title>Michael Herman</title>
+  <meta name="author" content="Michael Herman">
+
+  
+  <meta name="description" content="2017 Token-Based Authentication With Angular
+Jan 05 2017 2016 Building a RESTful API With Node, Flow, and Jest
+Dec 23 2016 Developing a RESTful API &hellip;">
+  
+
+  <!-- http://t.co/dKP3o1e -->
+  <meta name="HandheldFriendly" content="True">
+  <meta name="MobileOptimized" content="320">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  
+  <link rel="canonical" href="http://mherman.org/posts/25">
+  <link href="/favicon.png" rel="icon">
+  <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
+  <link href="/atom.xml" rel="alternate" title="Michael Herman" type="application/atom+xml">
+  <script src="/javascripts/modernizr-2.0.js"></script>
+  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+  <script>!window.jQuery && document.write(unescape('%3Cscript src="/javascripts/libs/jquery.min.js"%3E%3C/script%3E'))</script>
+  <script src="/javascripts/octopress.js" type="text/javascript"></script>
+  <!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
+<link href="//fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
+<link href="//fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
+<link href="//fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" type="text/css">
+<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
+<!--- MathJax Configuration -->
+<script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
+  
+  <script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+    ga('create', 'UA-37074204-1', 'auto');
+    ga('send', 'pageview');
+
+  </script>
+
+
+
+</head>
+
+<body   class="collapse-sidebar sidebar-footer" >
+  <header role="banner"><hgroup>
+  <h1><a href="/">Michael Herman</a></h1>
+  
+    <h2>Software Developer</h2>
+  
+</hgroup>
+
+</header>
+  <nav role="navigation"><ul class="subscribe" data-subscription="rss">
+  <li><a href="/atom.xml" rel="subscribe-rss" title="subscribe via RSS" target="_blank"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="25" height="25" viewbox="0 0 100 100"><path class="social" d="M 13.310204,73.332654 C 5.967347,73.332654 0,79.322448 0,86.621428 c 0,7.338776 5.967347,13.262246 13.310204,13.262246 7.370408,0 13.328572,-5.92245 13.328572,-13.262246 0,-7.29898 -5.958164,-13.288774 -13.328572,-13.288774 z M 0.01530612,33.978572 V 53.143878 C 12.493878,53.143878 24.229592,58.02347 33.068368,66.865306 41.894898,75.685714 46.767346,87.47449 46.767346,100 h 19.25 C 66.017346,63.592858 36.4,33.979592 0.01530612,33.978572 l 0,0 z M 0.03877552,0 V 19.17449 C 44.54796,19.17551 80.77551,55.437756 80.77551,100 H 100 C 100,44.87653 55.15102,0 0.03877552,0 z"></path></svg></a></li>
+  
+</ul>
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+    
+      <form action="http://google.com/search" method="get">
+        <fieldset role="search">
+          <input type="hidden" name="sitesearch" value="mherman.org" />
+    
+          <input class="search" type="text" name="q" results="0" placeholder="Search"/>
+        </fieldset>
+      </form>
+  
+<ul class="main-navigation">
+  <li><a href="/">Blog</a></li>
+  <li><a href="/about">About</a></li>
+</ul>
+
+</nav>
+  <div id="main">
+    <div id="content">
+      <div>
+<article role="article">
+  
+  <div id="blog-archives">
+
+
+
+  
+  <h2>2017</h2>
+
+<article>
+  
+<h1><a href="/blog/2017/01/05/token-based-authentication-with-angular/">Token-Based Authentication With Angular</a></h1>
+<time datetime="2017-01-05T07:30:21-07:00" pubdate><span class='month'>Jan</span> <span class='day'>05</span> <span class='year'>2017</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+  
+  <h2>2016</h2>
+
+<article>
+  
+<h1><a href="/blog/2016/12/23/building-a-restful-api-with-node-and-flow/">Building a RESTful API With Node, Flow, and Jest</a></h1>
+<time datetime="2016-12-23T07:59:54-07:00" pubdate><span class='month'>Dec</span> <span class='day'>23</span> <span class='year'>2016</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/node/'>node</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2016/11/05/developing-a-restful-api-with-node-and-typescript/">Developing a RESTful API With Node and TypeScript</a></h1>
+<time datetime="2016-11-05T07:38:56-06:00" pubdate><span class='month'>Nov</span> <span class='day'>05</span> <span class='year'>2016</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/node/'>node</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2016/10/28/token-based-authentication-with-node/">Token-Based Authentication With Node</a></h1>
+<time datetime="2016-10-28T07:36:51-06:00" pubdate><span class='month'>Oct</span> <span class='day'>28</span> <span class='year'>2016</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/node/'>node</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2016/09/25/node-passport-and-postgres/">Node, Passport, and Postgres</a></h1>
+<time datetime="2016-09-25T13:10:34-06:00" pubdate><span class='month'>Sep</span> <span class='day'>25</span> <span class='year'>2016</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/node/'>node</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2016/09/12/testing-node-and-express/">Testing Node and Express</a></h1>
+<time datetime="2016-09-12T07:09:13-06:00" pubdate><span class='month'>Sep</span> <span class='day'>12</span> <span class='year'>2016</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/node/'>node</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2016/08/16/atom-for-web-developers/">Atom for Web Developers</a></h1>
+<time datetime="2016-08-16T07:25:39-06:00" pubdate><span class='month'>Aug</span> <span class='day'>16</span> <span class='year'>2016</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/atom/'>atom</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2016/05/26/swagger-and-nodejs/">Swagger and NodeJS</a></h1>
+<time datetime="2016-05-26T07:22:46-06:00" pubdate><span class='month'>May</span> <span class='day'>26</span> <span class='year'>2016</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/node/'>node</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2016/04/28/test-driven-development-with-node/">Test Driven Development With Node, Postgres, and Knex (Red/Green/Refactor)</a></h1>
+<time datetime="2016-04-28T08:07:39-06:00" pubdate><span class='month'>Apr</span> <span class='day'>28</span> <span class='year'>2016</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/node/'>node</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2016/03/13/designing-a-restful-api-with-node-and-postgres/">Designing a RESTful API With Node and Postgres</a></h1>
+<time datetime="2016-03-13T07:56:00-06:00" pubdate><span class='month'>Mar</span> <span class='day'>13</span> <span class='year'>2016</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/node/'>node</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+  
+  <h2>2015</h2>
+
+<article>
+  
+<h1><a href="/blog/2015/10/22/node-postgres-sequelize/">Node, Postgres, and Sequelize</a></h1>
+<time datetime="2015-10-22T10:52:00-06:00" pubdate><span class='month'>Oct</span> <span class='day'>22</span> <span class='year'>2015</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/node/'>node</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2015/09/26/social-authentication-in-node-dot-js-with-passport/">Social Authentication in Node.js With Passport</a></h1>
+<time datetime="2015-09-26T13:37:00-06:00" pubdate><span class='month'>Sep</span> <span class='day'>26</span> <span class='year'>2015</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/node/'>node</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2015/09/10/testing-node-js-with-mocha-and-chai/">Testing Node.js With Mocha and Chai</a></h1>
+<time datetime="2015-09-10T10:52:00-06:00" pubdate><span class='month'>Sep</span> <span class='day'>10</span> <span class='year'>2015</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/node/'>node</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2015/08/24/node-express-swig-mongo-primer/">Node, Express, Swig, and MongoDB - Getting Started With CRUD</a></h1>
+<time datetime="2015-08-24T08:11:00-06:00" pubdate><span class='month'>Aug</span> <span class='day'>24</span> <span class='year'>2015</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/node/'>node</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2015/08/23/primer-on-swig-templating/">Primer on Swig Templating</a></h1>
+<time datetime="2015-08-23T14:10:00-06:00" pubdate><span class='month'>Aug</span> <span class='day'>23</span> <span class='year'>2015</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/node/'>node</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2015/07/02/handling-user-authentication-with-the-mean-stack/">Handling User Authentication With the MEAN Stack</a></h1>
+<time datetime="2015-07-02T07:04:00-06:00" pubdate><span class='month'>Jul</span> <span class='day'>02</span> <span class='year'>2015</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a>, <a class='category' href='/blog/categories/node/'>node</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2015/04/26/testing-angularjs-with-protractor-and-karma-part-2/">Testing AngularJS With Protractor and Karma - Part 2</a></h1>
+<time datetime="2015-04-26T08:06:00-06:00" pubdate><span class='month'>Apr</span> <span class='day'>26</span> <span class='year'>2015</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2015/04/09/testing-angularjs-with-protractor-and-karma-part-1/">Testing AngularJS With Protractor and Karma - Part 1</a></h1>
+<time datetime="2015-04-09T09:06:00-06:00" pubdate><span class='month'>Apr</span> <span class='day'>09</span> <span class='year'>2015</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2015/03/06/node-with-docker-continuous-integration-and-delivery/">Node With Docker - Continuous Integration and Delivery</a></h1>
+<time datetime="2015-03-06T08:05:00-07:00" pubdate><span class='month'>Mar</span> <span class='day'>06</span> <span class='year'>2015</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/docker/'>docker</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2015/02/12/postgresql-and-nodejs/">PostgreSQL and NodeJS</a></h1>
+<time datetime="2015-02-12T19:07:00-07:00" pubdate><span class='month'>Feb</span> <span class='day'>12</span> <span class='year'>2015</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/node/'>node</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2015/02/05/sublime-text-for-web-developers/">Sublime Text for Web Developers</a></h1>
+<time datetime="2015-02-05T19:07:00-07:00" pubdate><span class='month'>Feb</span> <span class='day'>05</span> <span class='year'>2015</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/sublime/'>sublime</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2015/01/31/local-authentication-with-passport-and-express-4/">User Authentication With Passport and Express 4</a></h1>
+<time datetime="2015-01-31T07:07:00-07:00" pubdate><span class='month'>Jan</span> <span class='day'>31</span> <span class='year'>2015</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/node/'>node</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+  
+  <h2>2014</h2>
+
+<article>
+  
+<h1><a href="/blog/2014/12/31/node-and-mongoose-a-primer/">Node, Express, and MongoDB - a Primer</a></h1>
+<time datetime="2014-12-31T02:28:00-07:00" pubdate><span class='month'>Dec</span> <span class='day'>31</span> <span class='year'>2014</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/node/'>node</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2014/08/15/kickstarting-angular-with-gulp-and-browserify-part-2/">Kickstarting Angular With Gulp and Browserify, Part 2 - Browserify</a></h1>
+<time datetime="2014-08-15T09:56:00-06:00" pubdate><span class='month'>Aug</span> <span class='day'>15</span> <span class='year'>2014</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2014/08/14/kickstarting-angular-with-gulp/">Kickstarting Angular With Gulp and Browserify, Part 1 - Gulp and Bower</a></h1>
+<time datetime="2014-08-14T08:17:00-06:00" pubdate><span class='month'>Aug</span> <span class='day'>14</span> <span class='year'>2014</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2014/06/12/primer-on-angularjs-service-types/">Primer on AngularJS Services</a></h1>
+<time datetime="2014-06-12T07:39:00-06:00" pubdate><span class='month'>Jun</span> <span class='day'>12</span> <span class='year'>2014</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2014/05/04/adding-a-captcha-to-sinatra-to-minimize-spam/">Adding a Captcha to Sinatra to Minimize Spam</a></h1>
+<time datetime="2014-05-04T18:43:00-06:00" pubdate><span class='month'>May</span> <span class='day'>04</span> <span class='year'>2014</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/ruby/'>ruby</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2014/04/15/handling-ajax-calls-with-node-dot-js-and-express-part-5/">Handling AJAX Calls With Node.js and Express (Part 5)</a></h1>
+<time datetime="2014-04-15T20:34:00-06:00" pubdate><span class='month'>Apr</span> <span class='day'>15</span> <span class='year'>2014</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/node/'>node</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2014/04/15/handling-ajax-calls-with-node-dot-js-and-express-part-4/">Handling AJAX Calls With Node.js and Express (Part 4)</a></h1>
+<time datetime="2014-04-15T15:27:00-06:00" pubdate><span class='month'>Apr</span> <span class='day'>15</span> <span class='year'>2014</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/node/'>node</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2014/03/18/node-twitter-sentiment-part-2/">Node Twitter Sentiment - Part 2</a></h1>
+<time datetime="2014-03-18T11:55:00-06:00" pubdate><span class='month'>Mar</span> <span class='day'>18</span> <span class='year'>2014</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/node/'>node</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2014/02/19/node-twitter-sentiment/">Node Twitter Sentiment</a></h1>
+<time datetime="2014-02-19T10:33:00-07:00" pubdate><span class='month'>Feb</span> <span class='day'>19</span> <span class='year'>2014</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/node/'>node</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2014/02/16/getting-started-with-node/">Getting Started With Node</a></h1>
+<time datetime="2014-02-16T07:57:00-07:00" pubdate><span class='month'>Feb</span> <span class='day'>16</span> <span class='year'>2014</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/node/'>node</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2014/01/29/meteor-dot-js-in-action-create-an-app-test-with-laika/">Meteor.js in Action: Create an App, Test With Laika</a></h1>
+<time datetime="2014-01-29T10:51:00-07:00" pubdate><span class='month'>Jan</span> <span class='day'>29</span> <span class='year'>2014</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/meteor/'>meteor</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2014/01/23/so-you-want-be-an-entrepreneur/">So You Want Be an Entrepreneur?</a></h1>
+<time datetime="2014-01-23T08:23:00-07:00" pubdate><span class='month'>Jan</span> <span class='day'>23</span> <span class='year'>2014</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/startups/'>startups</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2014/01/15/mad-libs-with-jquery-a-gentle-introduction-to-jquery/">Mad Libs With jQuery: A Gentle Introduction to Javascript and jQuery</a></h1>
+<time datetime="2014-01-15T19:39:00-07:00" pubdate><span class='month'>Jan</span> <span class='day'>15</span> <span class='year'>2014</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/frontend/'>frontend</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+  
+  <h2>2013</h2>
+
+<article>
+  
+<h1><a href="/blog/2013/12/21/handling-ajax-calls-with-node-dot-js-and-express-part-3/">Handling AJAX Calls With Node.js and Express (Part 3)</a></h1>
+<time datetime="2013-12-21T14:34:00-07:00" pubdate><span class='month'>Dec</span> <span class='day'>21</span> <span class='year'>2013</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/node/'>node</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2013/11/11/user-authentication-with-passport-dot-js/">User Authentication With Passport.js</a></h1>
+<time datetime="2013-11-11T07:45:00-07:00" pubdate><span class='month'>Nov</span> <span class='day'>11</span> <span class='year'>2013</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/node/'>node</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2013/11/10/social-authentication-with-passport-dot-js/">Social Authentication With Passport.js</a></h1>
+<time datetime="2013-11-10T08:28:00-07:00" pubdate><span class='month'>Nov</span> <span class='day'>10</span> <span class='year'>2013</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/node/'>node</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2013/11/01/handling-ajax-calls-with-node-dot-js-and-express-part-2/">Handling AJAX Calls With Node.js and Express (Part 2)</a></h1>
+<time datetime="2013-11-01T07:01:00-06:00" pubdate><span class='month'>Nov</span> <span class='day'>01</span> <span class='year'>2013</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/node/'>node</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2013/10/20/handling-ajax-calls-with-node-dot-js-and-express-scraping-craigslist/">Handling AJAX Calls With Node.js and Express (Scraping Craigslist)</a></h1>
+<time datetime="2013-10-20T01:12:00-06:00" pubdate><span class='month'>Oct</span> <span class='day'>20</span> <span class='year'>2013</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/node/'>node</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2013/10/11/basic-git-commands/">Basic Git Commands</a></h1>
+<time datetime="2013-10-11T11:19:00-06:00" pubdate><span class='month'>Oct</span> <span class='day'>11</span> <span class='year'>2013</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/git/'>git</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2013/09/16/managing-multiple-github-accounts/">Managing Multiple Github Accounts</a></h1>
+<time datetime="2013-09-16T07:43:00-06:00" pubdate><span class='month'>Sep</span> <span class='day'>16</span> <span class='year'>2013</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/github/'>github</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2013/09/07/whats-the-difference-between-a-pre-order-and-an-mvp/">What’s the Difference Between a Pre-Order and an MVP?</a></h1>
+<time datetime="2013-09-07T14:02:00-06:00" pubdate><span class='month'>Sep</span> <span class='day'>07</span> <span class='year'>2013</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/startups/'>startups</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2013/08/25/custom-apache-config-for-php-and-web2py/">Custom Apache Config for PHP and Web2Py</a></h1>
+<time datetime="2013-08-25T15:34:00-06:00" pubdate><span class='month'>Aug</span> <span class='day'>25</span> <span class='year'>2013</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/python/'>python</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2013/08/06/kickstarting-at-the-local-level/">Kickstarting at the Local Level</a></h1>
+<time datetime="2013-08-06T14:07:00-06:00" pubdate><span class='month'>Aug</span> <span class='day'>06</span> <span class='year'>2013</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/crowdfunding/'>crowdfunding</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2013/08/02/multitasking-vs-batching/">Multitasking vs. Batching</a></h1>
+<time datetime="2013-08-02T17:14:00-06:00" pubdate><span class='month'>Aug</span> <span class='day'>02</span> <span class='year'>2013</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/news/'>news</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2013/07/19/cohort-analysis-data-sourcing-with-sql/">Cohort Analysis: Data Sourcing With SQL</a></h1>
+<time datetime="2013-07-19T09:48:00-06:00" pubdate><span class='month'>Jul</span> <span class='day'>19</span> <span class='year'>2013</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/analytics/'>analytics</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2013/07/04/removing-a-django-app/">Removing a Django App</a></h1>
+<time datetime="2013-07-04T09:43:00-06:00" pubdate><span class='month'>Jul</span> <span class='day'>04</span> <span class='year'>2013</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/python/'>python</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2013/06/28/less-is-more/">Less Is More</a></h1>
+<time datetime="2013-06-28T10:52:00-06:00" pubdate><span class='month'>Jun</span> <span class='day'>28</span> <span class='year'>2013</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/startups/'>startups</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2013/06/13/up-and-running-with-espresso-rapid-web-development-in-the-browser/">Up and Running With Espresso: Rapid Web Development in the Browser</a></h1>
+<time datetime="2013-06-13T08:06:00-06:00" pubdate><span class='month'>Jun</span> <span class='day'>13</span> <span class='year'>2013</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/ruby/'>ruby</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2013/06/08/designing-with-class-sinatra-plus-postgresql-plus-heroku/">Designing With Class: Sinatra + PostgreSQL + Heroku</a></h1>
+<time datetime="2013-06-08T07:37:00-06:00" pubdate><span class='month'>Jun</span> <span class='day'>08</span> <span class='year'>2013</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/ruby/'>ruby</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2013/05/27/what-am-i-good-at/">What Am I Good At?</a></h1>
+<time datetime="2013-05-27T20:43:00-06:00" pubdate><span class='month'>May</span> <span class='day'>27</span> <span class='year'>2013</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/news/'>news</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2013/04/28/charting-best-practices-proper-data-visualization/">Charting Best Practices - Proper Data Visualization</a></h1>
+<time datetime="2013-04-28T13:20:00-06:00" pubdate><span class='month'>Apr</span> <span class='day'>28</span> <span class='year'>2013</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/analytics/'>analytics</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2013/01/28/startup-tips-for-forecasting-revenues-and-growth/">Startup Tips for Forecasting Revenues and Growth</a></h1>
+<time datetime="2013-01-28T17:48:00-07:00" pubdate><span class='month'>Jan</span> <span class='day'>28</span> <span class='year'>2013</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/finance/'>finance</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2013/01/10/how-to-build-a-financial-model-for-your-startup/">How to Build a Financial Model for Your Startup</a></h1>
+<time datetime="2013-01-10T09:30:00-07:00" pubdate><span class='month'>Jan</span> <span class='day'>10</span> <span class='year'>2013</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/finance/'>finance</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2013/01/09/understand-your-support-system-better-with-sentiment-analysis/">Understand Your Support System Better With Sentiment Analysis</a></h1>
+<time datetime="2013-01-09T09:13:00-07:00" pubdate><span class='month'>Jan</span> <span class='day'>09</span> <span class='year'>2013</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/analytics/'>analytics</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+  
+  <h2>2012</h2>
+
+<article>
+  
+<h1><a href="/blog/2012/12/30/django-basics/">Django Basics - Installing Django and Setting Up a Project and App</a></h1>
+<time datetime="2012-12-30T09:48:00-07:00" pubdate><span class='month'>Dec</span> <span class='day'>30</span> <span class='year'>2012</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/python/'>python</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2012/12/12/excel-tips-how-to-cut-down-on-calculations-using-sumif-and-sumifs/">Excel Tips: How to Cut Down on Calculations Using SUMIF and SUMIFS</a></h1>
+<time datetime="2012-12-12T20:23:00-07:00" pubdate><span class='month'>Dec</span> <span class='day'>12</span> <span class='year'>2012</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/excel/'>excel</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2012/12/10/crash-course-in-web2py-part-5-modifying-the-appearance-and-deploying-the-web-form/">Crash Course in Web2py (Part 5 - Modifying the Appearance and Deploying the Web Form)</a></h1>
+<time datetime="2012-12-10T07:39:00-07:00" pubdate><span class='month'>Dec</span> <span class='day'>10</span> <span class='year'>2012</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/python/'>python</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2012/12/09/crash-course-in-web2py-part-4-managing-form-records/">Crash Course in Web2py (Part 4 - Managing Form Records)</a></h1>
+<time datetime="2012-12-09T22:32:00-07:00" pubdate><span class='month'>Dec</span> <span class='day'>09</span> <span class='year'>2012</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/python/'>python</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2012/12/06/crash-course-in-web2py-part-3-form-validation/">Crash Course in Web2py (Part 3 - Form Validation)</a></h1>
+<time datetime="2012-12-06T21:52:00-07:00" pubdate><span class='month'>Dec</span> <span class='day'>06</span> <span class='year'>2012</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/python/'>python</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2012/12/01/crash-course-in-web2py-part-2-web-forms/">Crash Course in Web2py (Part 2 - Web Forms)</a></h1>
+<time datetime="2012-12-01T21:27:00-07:00" pubdate><span class='month'>Dec</span> <span class='day'>01</span> <span class='year'>2012</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/python/'>python</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2012/11/27/crash-course-in-web2py-part-1/">Crash Course in Web2py (Part 1)</a></h1>
+<time datetime="2012-11-27T19:53:00-07:00" pubdate><span class='month'>Nov</span> <span class='day'>27</span> <span class='year'>2012</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/python/'>python</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2012/11/18/integration-of-content-creation-leads-google-towards-the-slippery-slope-of-monopolies/">Integration of Content Creation Leads Google Towards the Slippery Slope of Monopolies</a></h1>
+<time datetime="2012-11-18T19:19:00-07:00" pubdate><span class='month'>Nov</span> <span class='day'>18</span> <span class='year'>2012</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/analytics/'>analytics</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2012/11/16/the-benefits-of-performing-a-cohort-analysis-in-determining-engagement-over-time/">The Benefits of Performing a Cohort Analysis in Determining Engagement Over Time</a></h1>
+<time datetime="2012-11-16T18:57:00-07:00" pubdate><span class='month'>Nov</span> <span class='day'>16</span> <span class='year'>2012</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/analytics/'>analytics</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2012/11/09/51-new-excel-2013-functions/">51 New Excel 2013 Functions</a></h1>
+<time datetime="2012-11-09T15:50:00-07:00" pubdate><span class='month'>Nov</span> <span class='day'>09</span> <span class='year'>2012</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/excel/'>excel</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2012/11/08/recursively-scraping-web-pages-with-scrapy/">Recursively Scraping Web Pages With Scrapy</a></h1>
+<time datetime="2012-11-08T15:39:00-07:00" pubdate><span class='month'>Nov</span> <span class='day'>08</span> <span class='year'>2012</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/python/'>python</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2012/11/05/scraping-web-pages-with-scrapy/">Scraping Web Pages With Scrapy</a></h1>
+<time datetime="2012-11-05T14:59:00-07:00" pubdate><span class='month'>Nov</span> <span class='day'>05</span> <span class='year'>2012</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/python/'>python</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2012/10/19/sentiment-analysis-feelings-not-facts/">Sentiment Analysis: Feelings, Not Facts</a></h1>
+<time datetime="2012-10-19T14:32:00-06:00" pubdate><span class='month'>Oct</span> <span class='day'>19</span> <span class='year'>2012</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/analytics/'>analytics</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2012/10/06/differentiating-between-bounce-rates/">Differentiating Between Bounce Rates</a></h1>
+<time datetime="2012-10-06T14:09:00-06:00" pubdate><span class='month'>Oct</span> <span class='day'>06</span> <span class='year'>2012</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/analytics/'>analytics</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2012/10/05/web-scraping-with-regular-expressions/">Web Scraping With Regular Expressions</a></h1>
+<time datetime="2012-10-05T13:26:00-06:00" pubdate><span class='month'>Oct</span> <span class='day'>05</span> <span class='year'>2012</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/python/'>python</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2012/09/30/import-data-from-excel-into-mysql-using-python/">Import Data From Excel Into MySQL Using Python</a></h1>
+<time datetime="2012-09-30T13:13:00-06:00" pubdate><span class='month'>Sep</span> <span class='day'>30</span> <span class='year'>2012</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/excel/'>excel</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+<article>
+  
+<h1><a href="/blog/2012/09/01/predictive-analytics-top-5-trends-going-forward/">Predictive Analytics - Top 5 Trends Going Forward</a></h1>
+<time datetime="2012-09-01T12:50:00-06:00" pubdate><span class='month'>Sep</span> <span class='day'>01</span> <span class='year'>2012</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/analytics/'>analytics</a></span>
+</footer>
+ -->
+
+</article>
+
+</div>
+
+
+  
+</article>
+
+
+</div>
+
+<aside class="sidebar">
+  
+    
+  
+</aside>
+
+
+    </div>
+  </div>
+  <footer role="contentinfo"><div>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
+  <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
+  <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
+  <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
+  <a href="http://www.youtube.com/hermanmu"><i class="fa fa-youtube-square" style="font-size:2em" aria-hidden="true"></i></a>
+</div>
+
+</footer>
+  
+
+<script type="text/javascript">
+      var disqus_shortname = 'michaelherman';
+      
+        
+        var disqus_script = 'count.js';
+      
+    (function () {
+      var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+      dsq.src = '//' + disqus_shortname + '.disqus.com/' + disqus_script;
+      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+    }());
+</script>
+
+
+
+
+
+
+<div id="fb-root"></div>
+<script>(function(d, s, id) {
+  var js, fjs = d.getElementsByTagName(s)[0];
+  if (d.getElementById(id)) {return;}
+  js = d.createElement(s); js.id = id; js.async = true;
+  js.src = "//connect.facebook.net/en_US/all.js#appId=212934732101925&xfbml=1";
+  fjs.parentNode.insertBefore(js, fjs);
+}(document, 'script', 'facebook-jssdk'));</script>
+
+
+
+
+
+  <script type="text/javascript">
+    (function(){
+      var twitterWidgets = document.createElement('script');
+      twitterWidgets.type = 'text/javascript';
+      twitterWidgets.async = true;
+      twitterWidgets.src = '//platform.twitter.com/widgets.js';
+      document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
+    })();
+  </script>
+
+
+
+
+
+</body>
+</html>
diff --git a/posts/3/index.html b/posts/3/index.html
index 48b44155..c401eaaa 100644
--- a/posts/3/index.html
+++ b/posts/3/index.html
@@ -9,9 +9,9 @@
   <meta name="author" content="Michael Herman">
 
   
-  <meta name="description" content="2016 Building a RESTful API With Node, Flow, and Jest
-Dec 23 2016 Developing a RESTful API With Node and TypeScript
-Nov 05 2016 Token-Based &hellip;">
+  <meta name="description" content="2017 Token-Based Authentication With Angular
+Jan 05 2017 2016 Building a RESTful API With Node, Flow, and Jest
+Dec 23 2016 Developing a RESTful API &hellip;">
   
 
   <!-- http://t.co/dKP3o1e -->
@@ -99,6 +99,23 @@ <h2>Software Developer</h2>
 
 
   
+  <h2>2017</h2>
+
+<article>
+  
+<h1><a href="/blog/2017/01/05/token-based-authentication-with-angular/">Token-Based Authentication With Angular</a></h1>
+<time datetime="2017-01-05T07:30:21-07:00" pubdate><span class='month'>Jan</span> <span class='day'>05</span> <span class='year'>2017</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+  
   <h2>2016</h2>
 
 <article>
@@ -1138,7 +1155,7 @@ <h1><a href="/blog/2012/09/01/predictive-analytics-top-5-trends-going-forward/">
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/posts/4/index.html b/posts/4/index.html
index 1b13b3ba..c87cead1 100644
--- a/posts/4/index.html
+++ b/posts/4/index.html
@@ -9,9 +9,9 @@
   <meta name="author" content="Michael Herman">
 
   
-  <meta name="description" content="2016 Building a RESTful API With Node, Flow, and Jest
-Dec 23 2016 Developing a RESTful API With Node and TypeScript
-Nov 05 2016 Token-Based &hellip;">
+  <meta name="description" content="2017 Token-Based Authentication With Angular
+Jan 05 2017 2016 Building a RESTful API With Node, Flow, and Jest
+Dec 23 2016 Developing a RESTful API &hellip;">
   
 
   <!-- http://t.co/dKP3o1e -->
@@ -99,6 +99,23 @@ <h2>Software Developer</h2>
 
 
   
+  <h2>2017</h2>
+
+<article>
+  
+<h1><a href="/blog/2017/01/05/token-based-authentication-with-angular/">Token-Based Authentication With Angular</a></h1>
+<time datetime="2017-01-05T07:30:21-07:00" pubdate><span class='month'>Jan</span> <span class='day'>05</span> <span class='year'>2017</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+  
   <h2>2016</h2>
 
 <article>
@@ -1138,7 +1155,7 @@ <h1><a href="/blog/2012/09/01/predictive-analytics-top-5-trends-going-forward/">
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/posts/5/index.html b/posts/5/index.html
index 56b4ead3..87bdb489 100644
--- a/posts/5/index.html
+++ b/posts/5/index.html
@@ -9,9 +9,9 @@
   <meta name="author" content="Michael Herman">
 
   
-  <meta name="description" content="2016 Building a RESTful API With Node, Flow, and Jest
-Dec 23 2016 Developing a RESTful API With Node and TypeScript
-Nov 05 2016 Token-Based &hellip;">
+  <meta name="description" content="2017 Token-Based Authentication With Angular
+Jan 05 2017 2016 Building a RESTful API With Node, Flow, and Jest
+Dec 23 2016 Developing a RESTful API &hellip;">
   
 
   <!-- http://t.co/dKP3o1e -->
@@ -99,6 +99,23 @@ <h2>Software Developer</h2>
 
 
   
+  <h2>2017</h2>
+
+<article>
+  
+<h1><a href="/blog/2017/01/05/token-based-authentication-with-angular/">Token-Based Authentication With Angular</a></h1>
+<time datetime="2017-01-05T07:30:21-07:00" pubdate><span class='month'>Jan</span> <span class='day'>05</span> <span class='year'>2017</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+  
   <h2>2016</h2>
 
 <article>
@@ -1138,7 +1155,7 @@ <h1><a href="/blog/2012/09/01/predictive-analytics-top-5-trends-going-forward/">
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/posts/6/index.html b/posts/6/index.html
index 6620b7e3..9871b263 100644
--- a/posts/6/index.html
+++ b/posts/6/index.html
@@ -9,9 +9,9 @@
   <meta name="author" content="Michael Herman">
 
   
-  <meta name="description" content="2016 Building a RESTful API With Node, Flow, and Jest
-Dec 23 2016 Developing a RESTful API With Node and TypeScript
-Nov 05 2016 Token-Based &hellip;">
+  <meta name="description" content="2017 Token-Based Authentication With Angular
+Jan 05 2017 2016 Building a RESTful API With Node, Flow, and Jest
+Dec 23 2016 Developing a RESTful API &hellip;">
   
 
   <!-- http://t.co/dKP3o1e -->
@@ -99,6 +99,23 @@ <h2>Software Developer</h2>
 
 
   
+  <h2>2017</h2>
+
+<article>
+  
+<h1><a href="/blog/2017/01/05/token-based-authentication-with-angular/">Token-Based Authentication With Angular</a></h1>
+<time datetime="2017-01-05T07:30:21-07:00" pubdate><span class='month'>Jan</span> <span class='day'>05</span> <span class='year'>2017</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+  
   <h2>2016</h2>
 
 <article>
@@ -1138,7 +1155,7 @@ <h1><a href="/blog/2012/09/01/predictive-analytics-top-5-trends-going-forward/">
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/posts/7/index.html b/posts/7/index.html
index 8aa5c3af..303e897b 100644
--- a/posts/7/index.html
+++ b/posts/7/index.html
@@ -9,9 +9,9 @@
   <meta name="author" content="Michael Herman">
 
   
-  <meta name="description" content="2016 Building a RESTful API With Node, Flow, and Jest
-Dec 23 2016 Developing a RESTful API With Node and TypeScript
-Nov 05 2016 Token-Based &hellip;">
+  <meta name="description" content="2017 Token-Based Authentication With Angular
+Jan 05 2017 2016 Building a RESTful API With Node, Flow, and Jest
+Dec 23 2016 Developing a RESTful API &hellip;">
   
 
   <!-- http://t.co/dKP3o1e -->
@@ -99,6 +99,23 @@ <h2>Software Developer</h2>
 
 
   
+  <h2>2017</h2>
+
+<article>
+  
+<h1><a href="/blog/2017/01/05/token-based-authentication-with-angular/">Token-Based Authentication With Angular</a></h1>
+<time datetime="2017-01-05T07:30:21-07:00" pubdate><span class='month'>Jan</span> <span class='day'>05</span> <span class='year'>2017</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+  
   <h2>2016</h2>
 
 <article>
@@ -1138,7 +1155,7 @@ <h1><a href="/blog/2012/09/01/predictive-analytics-top-5-trends-going-forward/">
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/posts/8/index.html b/posts/8/index.html
index e997f6b1..2cbb9982 100644
--- a/posts/8/index.html
+++ b/posts/8/index.html
@@ -9,9 +9,9 @@
   <meta name="author" content="Michael Herman">
 
   
-  <meta name="description" content="2016 Building a RESTful API With Node, Flow, and Jest
-Dec 23 2016 Developing a RESTful API With Node and TypeScript
-Nov 05 2016 Token-Based &hellip;">
+  <meta name="description" content="2017 Token-Based Authentication With Angular
+Jan 05 2017 2016 Building a RESTful API With Node, Flow, and Jest
+Dec 23 2016 Developing a RESTful API &hellip;">
   
 
   <!-- http://t.co/dKP3o1e -->
@@ -99,6 +99,23 @@ <h2>Software Developer</h2>
 
 
   
+  <h2>2017</h2>
+
+<article>
+  
+<h1><a href="/blog/2017/01/05/token-based-authentication-with-angular/">Token-Based Authentication With Angular</a></h1>
+<time datetime="2017-01-05T07:30:21-07:00" pubdate><span class='month'>Jan</span> <span class='day'>05</span> <span class='year'>2017</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+  
   <h2>2016</h2>
 
 <article>
@@ -1138,7 +1155,7 @@ <h1><a href="/blog/2012/09/01/predictive-analytics-top-5-trends-going-forward/">
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/posts/9/index.html b/posts/9/index.html
index 66dc718b..6bd2bde9 100644
--- a/posts/9/index.html
+++ b/posts/9/index.html
@@ -9,9 +9,9 @@
   <meta name="author" content="Michael Herman">
 
   
-  <meta name="description" content="2016 Building a RESTful API With Node, Flow, and Jest
-Dec 23 2016 Developing a RESTful API With Node and TypeScript
-Nov 05 2016 Token-Based &hellip;">
+  <meta name="description" content="2017 Token-Based Authentication With Angular
+Jan 05 2017 2016 Building a RESTful API With Node, Flow, and Jest
+Dec 23 2016 Developing a RESTful API &hellip;">
   
 
   <!-- http://t.co/dKP3o1e -->
@@ -99,6 +99,23 @@ <h2>Software Developer</h2>
 
 
   
+  <h2>2017</h2>
+
+<article>
+  
+<h1><a href="/blog/2017/01/05/token-based-authentication-with-angular/">Token-Based Authentication With Angular</a></h1>
+<time datetime="2017-01-05T07:30:21-07:00" pubdate><span class='month'>Jan</span> <span class='day'>05</span> <span class='year'>2017</span></time>
+<!-- 
+<footer>
+  <span class="categories">posted in <a class='category' href='/blog/categories/angular/'>angular</a></span>
+</footer>
+ -->
+
+</article>
+
+
+
+  
   <h2>2016</h2>
 
 <article>
@@ -1138,7 +1155,7 @@ <h1><a href="/blog/2012/09/01/predictive-analytics-top-5-trends-going-forward/">
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>
diff --git a/sitemap.xml b/sitemap.xml
index 772a9c18..0c48ed89 100644
--- a/sitemap.xml
+++ b/sitemap.xml
@@ -1,6 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
 <url>
+<loc>http://mherman.org/blog/2017/01/05/token-based-authentication-with-angular/</loc>
+<lastmod>2017-01-05T07:30:21-07:00</lastmod>
+</url>
+<url>
 <loc>http://mherman.org/blog/2016/12/23/building-a-restful-api-with-node-and-flow/</loc>
 <lastmod>2016-12-23T07:59:54-07:00</lastmod>
 </url>
diff --git a/youtube-tutorials/index.html b/youtube-tutorials/index.html
index ff0d774e..c25d7677 100644
--- a/youtube-tutorials/index.html
+++ b/youtube-tutorials/index.html
@@ -310,7 +310,7 @@ <h1>Comments</h1>
     </div>
   </div>
   <footer role="contentinfo"><div>
-  <span>Copyright &copy; 2016 - Michael Herman</span><br>
+  <span>Copyright &copy; 2017 - Michael Herman</span><br>
   <a href="https://github.com/mjhea0"><i class="fa fa-github-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="https://twitter.com/mikeherman"><i class="fa fa-twitter-square" style="font-size:2em" aria-hidden="true"></i></a>
   <a href="http://www.linkedin.com/pub/michael-herman/3b/a94/4"><i class="fa fa-linkedin-square" style="font-size:2em" aria-hidden="true"></i></a>