<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	xmlns:georss="http://www.georss.org/georss" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" xmlns:media="http://search.yahoo.com/mrss/"
	>

<channel>
	<title>Jeremy Howard</title>
	<atom:link href="http://jphoward.wordpress.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://jphoward.wordpress.com</link>
	<description>I really should work out what this is for</description>
	<lastBuildDate>Sun, 12 May 2013 23:24:28 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.com/</generator>
<cloud domain='jphoward.wordpress.com' port='80' path='/?rsscloud=notify' registerProcedure='' protocol='http-post' />
<image>
		<url>http://s2.wp.com/i/buttonw-com.png</url>
		<title>Jeremy Howard</title>
		<link>http://jphoward.wordpress.com</link>
	</image>
	<atom:link rel="search" type="application/opensearchdescription+xml" href="http://jphoward.wordpress.com/osd.xml" title="Jeremy Howard" />
	<atom:link rel='hub' href='http://jphoward.wordpress.com/?pushpress=hub'/>
		<item>
		<title>Create a random sample using PowerShell</title>
		<link>http://jphoward.wordpress.com/2013/05/13/creare-a-random-sample-using-powershell/</link>
		<comments>http://jphoward.wordpress.com/2013/05/13/creare-a-random-sample-using-powershell/#comments</comments>
		<pubDate>Sun, 12 May 2013 23:20:25 +0000</pubDate>
		<dc:creator>jphoward</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://jphoward.wordpress.com/?p=150</guid>
		<description><![CDATA[Very often you will need a random sample of a file. This is really handy to quickly prototype script, before you run it on a really large file. Or, if you are just doing some statistical analysis, it is very likely that you won&#8217;t even need to run it on the full file at all. [&#8230;]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=jphoward.wordpress.com&#038;blog=460421&#038;post=150&#038;subd=jphoward&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
				<content:encoded><![CDATA[<p>Very often you will need a random sample of a file. This is really handy to quickly prototype script, before you run it on a really large file. Or, if you are just doing some statistical analysis, it is very likely that you won&#8217;t even need to run it on the full file at all. Therefore, I generally create 10% and 1% samples of any large files that I am working with correctly. When using Windows I find this easiest to do using PowerShell. Here is the command that I use (replace the &#8217;10&#8242; with &#8217;100&#8242; to get a 1% sample):</p>
<pre>
<pre class="brush: r; title: ; notranslate">
cat file.txt | ?{$_.ReadCount -eq 1 -or (Get-Random -max 10) -eq 1} &gt; file_sample10.txt
</pre>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/jphoward.wordpress.com/150/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/jphoward.wordpress.com/150/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=jphoward.wordpress.com&#038;blog=460421&#038;post=150&#038;subd=jphoward&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://jphoward.wordpress.com/2013/05/13/creare-a-random-sample-using-powershell/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/1172fce7691410ce1b50830aa1ad44a0?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">jphoward</media:title>
		</media:content>
	</item>
		<item>
		<title>HBR Visualization Webinar data</title>
		<link>http://jphoward.wordpress.com/2013/04/18/hbr-visualization-webinar-data/</link>
		<comments>http://jphoward.wordpress.com/2013/04/18/hbr-visualization-webinar-data/#comments</comments>
		<pubDate>Wed, 17 Apr 2013 23:35:59 +0000</pubDate>
		<dc:creator>jphoward</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">https://jphoward.wordpress.com/?p=141</guid>
		<description><![CDATA[I’ll be presenting an HBR Visualization Webinar tomorrow. For those interested in following along, here are the data files I’ll be using: Tourism Forecasting Predict Grant Applications R Package Recommendation RTA Freeway Travel Time Blue Book For Bulldozers And here is some R code that we’ll use for the bulldozers data set:<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=jphoward.wordpress.com&#038;blog=460421&#038;post=141&#038;subd=jphoward&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
				<content:encoded><![CDATA[<p>I’ll be presenting an <a href="http://online.krm.com/iebms/coe/coe_p2_details.aspx?oc=10&amp;cc=0011408&amp;eventid=20229">HBR Visualization Webinar</a> tomorrow. For those interested in following along, here are the data files I’ll be using:</p>
<ul>
<li><a href="https://www.kaggle.com/c/tourism2">Tourism Forecasting</a> </li>
<li><a href="https://www.kaggle.com/c/unimelb">Predict Grant Applications</a> </li>
<li><a href="https://www.kaggle.com/c/R">R Package Recommendation</a> </li>
<li><a href="https://www.kaggle.com/c/RTA">RTA Freeway Travel Time</a> </li>
<li><a href="https://www.kaggle.com/c/bluebook-for-bulldozers">Blue Book For Bulldozers</a></li>
</ul>
<p>And here is some R code that we’ll use for the bulldozers data set:</p>
<div id="scid:C89E2BDB-ADD3-4f7a-9810-1B7EACF446C1:a6c7274d-ce0e-4cb1-ad53-084fc35f38af" class="wlWriterEditableSmartContent" style="float:none;margin:0;display:inline;padding:0;">
<pre style="white-space:normal;">
<pre class="brush: r; pad-line-numbers: true; title: ; notranslate">
setwd(&quot;C:\\YOUR_PATH_HERE&quot;)
df = read.csv(&quot;bulldozers.csv&quot;)
samp = df[sample(1:nrow(df), nrow(df)/10, replace=FALSE),]
summary(samp)
write.csv(samp, &quot;bulldozers_samp.csv&quot;, row.names=F)

library(plyr)

appendNAs &lt;- function(dataset) {
  append_these = data.frame( is.na(dataset[, names(dataset)] ) )
  names(append_these) = paste(names(append_these), &quot;NA&quot;, sep = &quot;_&quot;)
  append_these = colwise(identity, function(x) any(x))(append_these)
  dataset = cbind(dataset, append_these)
  dataset[is.na(dataset)] = -1000
  return(dataset)
}

samp2 = appendNAs(samp)
f0 = function(x) {
  if (nlevels(x)&gt;32) {
    return (unclass(x))
  } else {
    return (x)
  }
}
samp2 = colwise(f0)(samp2)

library(randomForest)
m = randomForest(SalePrice~., data=samp2, ntree=15, sampsize=5000, nodesize=25, do.trace=T)
partialPlot(m, samp2, Enclosure)
partialPlot(m, samp2, ProductSize)
varImpPlot(m)
</pre>
</div>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/jphoward.wordpress.com/141/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/jphoward.wordpress.com/141/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=jphoward.wordpress.com&#038;blog=460421&#038;post=141&#038;subd=jphoward&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://jphoward.wordpress.com/2013/04/18/hbr-visualization-webinar-data/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/1172fce7691410ce1b50830aa1ad44a0?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">jphoward</media:title>
		</media:content>
	</item>
		<item>
		<title>Intermission&#8211;REST API in Python with Flask-Restless</title>
		<link>http://jphoward.wordpress.com/2013/01/09/intermissionrest-api-in-python-with-flask-restless/</link>
		<comments>http://jphoward.wordpress.com/2013/01/09/intermissionrest-api-in-python-with-flask-restless/#comments</comments>
		<pubDate>Wed, 09 Jan 2013 00:34:59 +0000</pubDate>
		<dc:creator>jphoward</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">https://jphoward.wordpress.com/?p=132</guid>
		<description><![CDATA[In my End to end web app in under an hour tutorial I have been using C# for the backend and SQL Server for the DB. What if you’d rather use something else? Easy! For example, here’s how to port what we’ve done in parts 1-4 to Python. We’ll use the handy Flask-Restless library to [&#8230;]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=jphoward.wordpress.com&#038;blog=460421&#038;post=132&#038;subd=jphoward&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
				<content:encoded><![CDATA[<p>In my <a href="http://jphoward.wordpress.com/2013/01/04/end-to-end-web-app-in-under-an-hour/">End to end web app in under an hour</a> tutorial I have been using C# for the backend and SQL Server for the DB. What if you’d rather use something else? Easy! For example, here’s how to port what we’ve done in parts 1-4 to Python. We’ll use the handy <a href="https://flask-restless.readthedocs.org/en/latest/">Flask-Restless</a> library to create the API, along with <a href="http://packages.python.org/Flask-SQLAlchemy/quickstart.html">Flask-Sqlalchemy</a> to handle ORM duties for us. We’ll use <a href="http://www.sqlite.org/">sqlite</a> as our DB in development, since it’s easy to get up and running. You should switch to something more appropriate in production (such as <a href="http://www.postgresql.org/">postgresql</a>), although I won’t be covering that here.</p>
<h2>Creating the model</h2>
<p>To start with, import the appropriate modules, create and configure your flask app (including selecting an appropriate path for your sqlite db), and create your Todo model class.</p>
<div class="wlWriterEditableSmartContent" id="scid:C89E2BDB-ADD3-4f7a-9810-1B7EACF446C1:8bc6fc44-8d40-49db-b310-9c8be6cbde6a" style="float:none;margin:0;display:inline;padding:0;">
<pre class="brush: python; title: ; notranslate">
import flask
import flask.ext.sqlalchemy
import datetime

app = flask.Flask(__name__)
app.config['DEBUG'] = True
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:////tmp/test.db'
db = flask.ext.sqlalchemy.SQLAlchemy(app)

class TodoItem(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    todo= db.Column(db.Unicode)
    priority = db.Column(db.SmallInteger)
    due_date = db.Column(db.Date)
</pre>
</div>
<p>Now you are ready to create your API endpoint.</p>
<div class="wlWriterEditableSmartContent" id="scid:C89E2BDB-ADD3-4f7a-9810-1B7EACF446C1:1fb79e1e-979c-49e8-8af5-085044a25e58" style="float:none;margin:0;display:inline;padding:0;">
<pre class="brush: python; title: ; notranslate">
import flask.ext.restless

db.create_all()
manager = flask.ext.restless.APIManager(app, flask_sqlalchemy_db=db)

manager.create_api(TodoItem, 
    methods=['GET', 'POST', 'DELETE', 'PUT'], results_per_page=20)

app.run()
</pre>
</div>
<p>That’s all you need! Try running that, and go to /api/todo_item in your browser. (Note that flask-restless turns CamelCase class names into underscore_separated names). You may also want to prepopulate your table with some data. I’ll leave that for you to do before moving on to the next section.</p>
<h2>Updating the controller</h2>
<p>Flask-Restless uses a somewhat different format for both its request and its response. Therefore we have to modify a few things in our controller (templates and directives however should not need to change). I created the following method in my ListCtrl, in order to simplify creating a request in the format that Flask-Restless expects:</p>
<div class="wlWriterEditableSmartContent" id="scid:C89E2BDB-ADD3-4f7a-9810-1B7EACF446C1:ba13f7f5-7491-4cff-8902-a65ba0a57674" style="float:none;margin:0;display:inline;padding:0;">
<pre class="brush: jscript; title: ; notranslate">
var make_query = function() {
    var q = {order_by: [{field: $scope.sort_order, direction: $scope.sort_desc ? &quot;desc&quot;: &quot;asc&quot;}]};
    if ($scope.query) {
        q.filters = [{name: &quot;todo&quot;, op: &quot;like&quot;, val: &quot;%&quot; + $scope.query + &quot;%&quot;} ];
    }
    return angular.toJson(q);
}
</pre>
</div>
<p>I also modified $scope.search() to call make_query, and account for the different response format in Flask-Restless.</p>
<div class="wlWriterEditableSmartContent" id="scid:C89E2BDB-ADD3-4f7a-9810-1B7EACF446C1:9eb7a253-da8e-450c-b27d-b01b74df3c1c" style="float:none;margin:0;display:inline;padding:0;">
<pre class="brush: jscript; title: ; notranslate">
$scope.search = function () {
    var res = Todo.get(
        { page: $scope.page, q: make_query() },
        function () {
            $scope.no_more = res.page == res.total_pages;
            if (res.page==1) { $scope.todos=[]; }
            $scope.todos = $scope.todos.concat(res.objects);
        }
    );
};
</pre>
</div>
<p>Finally, I created a small method to call when creating the controller, or when changing sort order:</p>
<div class="wlWriterEditableSmartContent" id="scid:C89E2BDB-ADD3-4f7a-9810-1B7EACF446C1:d1adfb9c-f40b-424a-b548-e22b31a6298a" style="float:none;margin:0;display:inline;padding:0;">
<pre class="brush: jscript; title: ; notranslate">
$scope.reset = function() {
    $scope.page = 1;
    $scope.search();
};
</pre>
</div>
<p>That’s basically all that is required to have this up-and-running in Python!</p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/jphoward.wordpress.com/132/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/jphoward.wordpress.com/132/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=jphoward.wordpress.com&#038;blog=460421&#038;post=132&#038;subd=jphoward&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://jphoward.wordpress.com/2013/01/09/intermissionrest-api-in-python-with-flask-restless/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/1172fce7691410ce1b50830aa1ad44a0?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">jphoward</media:title>
		</media:content>
	</item>
		<item>
		<title>End to end web app in under an hour&#8211;Part 4</title>
		<link>http://jphoward.wordpress.com/2013/01/05/end-to-end-web-app-in-under-an-hourpart-4/</link>
		<comments>http://jphoward.wordpress.com/2013/01/05/end-to-end-web-app-in-under-an-hourpart-4/#comments</comments>
		<pubDate>Fri, 04 Jan 2013 23:04:37 +0000</pubDate>
		<dc:creator>jphoward</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">https://jphoward.wordpress.com/?p=128</guid>
		<description><![CDATA[Here is the video tutorial that goes with this post: Continued from Part 3. Adding Indexes Since we will probably sort frequently by the displayed columns, we should add indexes to them. However, our Todo column is currently unlimited in length, which will be tricky to index. So let’s first add an appropriate constraint in [&#8230;]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=jphoward.wordpress.com&#038;blog=460421&#038;post=128&#038;subd=jphoward&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
				<content:encoded><![CDATA[<p><i>Here is the video tutorial that goes with this post:</i></p>
<span class='embed-youtube' style='text-align:center; display: block;'><iframe class='youtube-player' type='text/html' width='595' height='365' src='http://www.youtube.com/embed/pRHPU-YwJ8c?version=3&#038;rel=1&#038;fs=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;wmode=transparent' frameborder='0'></iframe></span>
<p><em>Continued from <a href="http://jphoward.wordpress.com/2013/01/05/end-to-end-web-app-in-under-an-hourpart-3/">Part 3</a></em>.</p>
<h2>Adding Indexes</h2>
<p>Since we will probably sort frequently by the displayed columns, we should add indexes to them. However, our Todo column is currently unlimited in length, which will be tricky to index. So let’s first add an appropriate constraint in the TodoItem class:</p>
<pre class="code"><span style="background:white;color:black;">[</span><span style="background:white;color:#2b91af;">MaxLength</span><span style="background:white;color:black;">(800)]
</span><span style="background:white;color:blue;">public </span><span style="background:white;color:#2b91af;">String </span><span style="background:white;color:black;">Todo { </span><span style="background:white;color:blue;">get</span><span style="background:white;color:black;">; </span><span style="background:white;color:blue;">set</span><span style="background:white;color:black;">; }</span></pre>
<p>(NB: You’ll need “using System.ComponentModel.DataAnnotations” for this attribute.) Now run ‘Add-Migration CreateTodoIndexes’ in the console (where “CreateTodoIndexes” is the name of migration – use whatever name you prefer), and customize the Up() method to add the indexes. </p>
<pre class="code"><span style="background:white;color:blue;">public override void </span><span style="background:white;color:black;">Up()
{
AlterColumn(</span><span style="background:white;color:#a31515;">&quot;dbo.TodoItems&quot;</span><span style="background:white;color:black;">, </span><span style="background:white;color:#a31515;">&quot;Todo&quot;</span><span style="background:white;color:black;">, c =&gt; c.String(maxLength: 800));

</span><span style="background:white;color:blue;">foreach </span><span style="background:white;color:black;">(</span><span style="background:white;color:blue;">string </span><span style="background:white;color:black;">col </span><span style="background:white;color:blue;">in new</span><span style="background:white;color:black;">[] { </span><span style="background:white;color:#a31515;">&quot;Todo&quot;</span><span style="background:white;color:black;">, </span><span style="background:white;color:#a31515;">&quot;Priority&quot;</span><span style="background:white;color:black;">, </span><span style="background:white;color:#a31515;">&quot;DueDate&quot; </span><span style="background:white;color:black;">})
    CreateIndex(</span><span style="background:white;color:#a31515;">&quot;TodoItems&quot;</span><span style="background:white;color:black;">, col);
}</span></pre>
<p>Finally, run “Update-Database”, to make this changes in the DB. Now you’re truly web-scale!</p>
<h2>Deploying to AppHarbor</h2>
<p>Deployment is already very well covered by the docs at AppHarbor, so I’ll just summarize the steps here.</p>
<p>First, <a href="https://github.com/blog/1127-github-for-windows">create a GitHub project</a> and commit your code. Create an application at AppHarbor, and be sure to add the SQL Server add-on (20MB is free).</p>
<p><a href="http://jphoward.files.wordpress.com/2013/01/image11.png"><img title="image" style="border-top:0;border-right:0;background-image:none;border-bottom:0;padding-top:0;padding-left:0;border-left:0;display:inline;padding-right:0;" border="0" alt="image" src="http://jphoward.files.wordpress.com/2013/01/image_thumb11.png?w=447&#038;h=249" width="447" height="249" /></a></p>
<p>Connect your <a href="http://blog.appharbor.com/2011/10/13/announcing-github-support">AppHarbor application and GitHub</a>, by simply clicking the Configure Github link on your main AppHarbor project page. </p>
<p><a href="http://jphoward.files.wordpress.com/2013/01/image12.png"><img title="image" style="border-top:0;border-right:0;background-image:none;border-bottom:0;padding-top:0;padding-left:0;border-left:0;display:inline;padding-right:0;" border="0" alt="image" src="http://jphoward.files.wordpress.com/2013/01/image_thumb12.png?w=610&#038;h=155" width="610" height="155" /></a></p>
<p>Now we need to configure the DB. Open web.config.release in the root of your project.</p>
<p><a href="http://jphoward.files.wordpress.com/2013/01/image13.png"><img title="image" style="border-top:0;border-right:0;background-image:none;border-bottom:0;padding-top:0;padding-left:0;border-left:0;display:inline;padding-right:0;" border="0" alt="image" src="http://jphoward.files.wordpress.com/2013/01/image_thumb13.png?w=277&#038;h=105" width="277" height="105" /></a></p>
<p>Paste in the following code:</p>
<pre class="code"><span style="background:white;color:blue;">&lt;?</span><span style="background:white;color:#a31515;">xml </span><span style="background:white;color:red;">version</span><span style="background:white;color:blue;">=</span><span style="background:white;color:black;">&quot;</span><span style="background:white;color:blue;">1.0</span><span style="background:white;color:black;">&quot;</span><span style="background:white;color:blue;">?&gt;
&lt;</span><span style="background:white;color:#a31515;">configuration </span><span style="background:white;color:red;">xmlns:xdt</span><span style="background:white;color:blue;">=</span><span style="background:white;color:black;">&quot;</span><span style="background:white;color:blue;">http://schemas.microsoft.com/XML-Document-Transform</span><span style="background:white;color:black;">&quot;</span><span style="background:white;color:blue;">&gt;
  &lt;</span><span style="background:white;color:#a31515;">connectionStrings</span><span style="background:white;color:blue;">&gt;
    &lt;</span><span style="background:white;color:#a31515;">add </span><span style="background:white;color:red;">xdt:Transform</span><span style="background:white;color:blue;">=</span><span style="background:white;color:black;">&quot;</span><span style="background:white;color:blue;">SetAttributes</span><span style="background:white;color:black;">&quot;
         </span><span style="background:white;color:red;">xdt:Locator</span><span style="background:white;color:blue;">=</span><span style="background:white;color:black;">&quot;</span><span style="background:white;color:blue;">Match(name)</span><span style="background:white;color:black;">&quot;
         </span><span style="background:white;color:red;">name</span><span style="background:white;color:blue;">=</span><span style="background:white;color:black;">&quot;</span><span style="background:white;color:blue;">AmazingTodoContext</span><span style="background:white;color:black;">&quot;
         </span><span style="background:white;color:red;">connectionString</span><span style="background:white;color:blue;">=</span><span style="background:white;color:black;">&quot;</span><span style="background:white;color:blue;">...paste...</span><span style="background:white;color:black;">&quot; </span><span style="background:white;color:blue;">/&gt;
  &lt;/</span><span style="background:white;color:#a31515;">connectionStrings</span><span style="background:white;color:blue;">&gt;
&lt;/</span><span style="background:white;color:#a31515;">configuration</span><span style="background:white;color:blue;">&gt;</span></pre>
<p>You need to paste in the unique connection string provided by AppHarbor. You can get this by clicking ‘Configuration Variables’ by the list of AppHarbor addons, and clicking the copy button for the value of ‘SQLSERVER_CONNECTION_STRING’.</p>
<p>Finally, we need to ensure that Update-Database is called automatically as required, by adding this to the database context class (AmazingTodoContext): </p>
<p><pre class="code"><span style="background:white;color:blue;">protected override void </span><span style="background:white;color:black;">OnModelCreating(</span><span style="background:white;color:#2b91af;">DbModelBuilder </span><span style="background:white;color:black;">modelBuilder) {
    </span><span style="background:white;color:#2b91af;">Database</span><span style="background:white;color:black;">.SetInitializer(
        </span><span style="background:white;color:blue;">new </span><span style="background:white;color:#2b91af;">MigrateDatabaseToLatestVersion</span><span style="background:white;color:black;">&lt;</span><span style="background:white;color:#2b91af;">AmazingTodoContext</span><span style="background:white;color:black;">, Migrations.</span><span style="background:white;color:#2b91af;">Configuration</span><span style="background:white;color:black;">&gt;());
}
</span></pre>
</p>
<p>If you now commit to GitHub and sync, AppHarbor will be notified of the commit and will automatically build and deploy your application. Each time you commit a new build and deploy will be kicked off, and status is displayed in AppHarbor.</p>
<p><a href="http://jphoward.files.wordpress.com/2013/01/image14.png"><img title="image" style="border-top:0;border-right:0;background-image:none;border-bottom:0;padding-top:0;padding-left:0;border-left:0;display:inline;padding-right:0;" border="0" alt="image" src="http://jphoward.files.wordpress.com/2013/01/image_thumb14.png?w=484&#038;h=255" width="484" height="255" /></a></p>
<p>The Hostnames link shows you the hostname of your running app. </p>
<p><a href="http://jphoward.files.wordpress.com/2013/01/image15.png"><img title="image" style="border-top:0;border-right:0;background-image:none;border-bottom:0;padding-top:0;padding-left:0;border-left:0;display:inline;padding-right:0;" border="0" alt="image" src="http://jphoward.files.wordpress.com/2013/01/image_thumb15.png?w=211&#038;h=95" width="211" height="95" /></a></p>
<p>Click it (and add ‘index.html’ to the url) to see your stunning addition to internet commerce!</p>
<p><a href="http://jphoward.files.wordpress.com/2013/01/image16.png"><img title="image" style="border-top:0;border-right:0;background-image:none;border-bottom:0;padding-top:0;padding-left:0;border-left:0;display:inline;padding-right:0;" border="0" alt="image" src="http://jphoward.files.wordpress.com/2013/01/image_thumb16.png?w=514&#038;h=159" width="514" height="159" /></a></p>
<p>You can get the code as at the end of part 4 from <a href="https://github.com/jph00/AmazingTodo/commits/v1.0.1">this GitHub link</a>. Don’t forget to set the connection string and also to update your local database if you want to run the code from GitHub, rather than creating it yourself using the tutorial.</p>
<p>In the next part we will add make the application more resilient, by adding error handling and validation.</p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/jphoward.wordpress.com/128/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/jphoward.wordpress.com/128/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=jphoward.wordpress.com&#038;blog=460421&#038;post=128&#038;subd=jphoward&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://jphoward.wordpress.com/2013/01/05/end-to-end-web-app-in-under-an-hourpart-4/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/1172fce7691410ce1b50830aa1ad44a0?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">jphoward</media:title>
		</media:content>

		<media:content url="http://jphoward.files.wordpress.com/2013/01/image_thumb11.png" medium="image">
			<media:title type="html">image</media:title>
		</media:content>

		<media:content url="http://jphoward.files.wordpress.com/2013/01/image_thumb12.png" medium="image">
			<media:title type="html">image</media:title>
		</media:content>

		<media:content url="http://jphoward.files.wordpress.com/2013/01/image_thumb13.png" medium="image">
			<media:title type="html">image</media:title>
		</media:content>

		<media:content url="http://jphoward.files.wordpress.com/2013/01/image_thumb14.png" medium="image">
			<media:title type="html">image</media:title>
		</media:content>

		<media:content url="http://jphoward.files.wordpress.com/2013/01/image_thumb15.png" medium="image">
			<media:title type="html">image</media:title>
		</media:content>

		<media:content url="http://jphoward.files.wordpress.com/2013/01/image_thumb16.png" medium="image">
			<media:title type="html">image</media:title>
		</media:content>
	</item>
		<item>
		<title>End to end web app in under an hour&#8211;Part 3</title>
		<link>http://jphoward.wordpress.com/2013/01/05/end-to-end-web-app-in-under-an-hourpart-3/</link>
		<comments>http://jphoward.wordpress.com/2013/01/05/end-to-end-web-app-in-under-an-hourpart-3/#comments</comments>
		<pubDate>Fri, 04 Jan 2013 18:50:48 +0000</pubDate>
		<dc:creator>jphoward</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">https://jphoward.wordpress.com/?p=113</guid>
		<description><![CDATA[Here is the video tutorial that goes with this post: Continued from Part 2. Create/Update Let’s now create a form to add new items. Here’s the basic HTML: &#60;form name=&#34;form&#34; class=&#34;form-horizontal&#34;&#62; &#60;div class=&#34;control-group&#34; ng-class=&#34;{error: form.Todo.$invalid}&#34;&#62; &#60;label class=&#34;control-label&#34; for=&#34;Todo&#34;&#62;Todo&#60;/label&#62; &#60;div class=&#34;controls&#34;&#62; &#60;input type=&#34;text&#34; ng-model=&#34;item.Todo&#34; id=&#34;Todo&#34;&#62; &#60;/div&#62; &#60;/div&#62; &#60;div class=&#34;form-actions&#34;&#62; &#60;button class=&#34;btn btn-primary&#34;&#62; Submit &#60;/button&#62; &#60;a href=&#34;#/&#34; [&#8230;]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=jphoward.wordpress.com&#038;blog=460421&#038;post=113&#038;subd=jphoward&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
				<content:encoded><![CDATA[<p><i>Here is the video tutorial that goes with this post:</i></p>
<span class='embed-youtube' style='text-align:center; display: block;'><iframe class='youtube-player' type='text/html' width='595' height='365' src='http://www.youtube.com/embed/ilCH2Euobz0?version=3&#038;rel=1&#038;fs=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;wmode=transparent' frameborder='0'></iframe></span>
<p><em>Continued from <a href="http://jphoward.wordpress.com/2013/01/04/end-to-end-web-app-in-under-an-hourpart-2/">Part 2</a></em>.</p>
<h2>Create/Update</h2>
<p>Let’s now create a form to add new items. Here’s the basic HTML:</p>
<pre class="code"><span style="background:white;color:blue;">&lt;</span><span style="background:white;color:maroon;">form </span><span style="background:white;color:red;">name</span><span style="background:white;color:blue;">=&quot;form&quot; </span><span style="background:white;color:red;">class</span><span style="background:white;color:blue;">=&quot;form-horizontal&quot;&gt;
&lt;</span><span style="background:white;color:maroon;">div </span><span style="background:white;color:red;">class</span><span style="background:white;color:blue;">=&quot;control-group&quot; </span><span style="background:white;color:red;">ng-class</span><span style="background:white;color:blue;">=&quot;{error: form.Todo.$invalid}&quot;&gt;
    &lt;</span><span style="background:white;color:maroon;">label </span><span style="background:white;color:red;">class</span><span style="background:white;color:blue;">=&quot;control-label&quot; </span><span style="background:white;color:red;">for</span><span style="background:white;color:blue;">=&quot;Todo&quot;&gt;</span><span style="background:white;color:black;">Todo</span><span style="background:white;color:blue;">&lt;/</span><span style="background:white;color:maroon;">label</span><span style="background:white;color:blue;">&gt;
    &lt;</span><span style="background:white;color:maroon;">div </span><span style="background:white;color:red;">class</span><span style="background:white;color:blue;">=&quot;controls&quot;&gt;
        &lt;</span><span style="background:white;color:maroon;">input </span><span style="background:white;color:red;">type</span><span style="background:white;color:blue;">=&quot;text&quot; </span><span style="background:white;color:red;">ng-model</span><span style="background:white;color:blue;">=&quot;item.Todo&quot; </span><span style="background:white;color:red;">id</span><span style="background:white;color:blue;">=&quot;Todo&quot;&gt;
    &lt;/</span><span style="background:white;color:maroon;">div</span><span style="background:white;color:blue;">&gt;
&lt;/</span><span style="background:white;color:maroon;">div</span><span style="background:white;color:blue;">&gt;
&lt;</span><span style="background:white;color:maroon;">div </span><span style="background:white;color:red;">class</span><span style="background:white;color:blue;">=&quot;form-actions&quot;&gt;
    &lt;</span><span style="background:white;color:maroon;">button </span><span style="background:white;color:red;">class</span><span style="background:white;color:blue;">=&quot;btn btn-primary&quot;&gt;
        </span><span style="background:white;color:black;">Submit
    </span><span style="background:white;color:blue;">&lt;/</span><span style="background:white;color:maroon;">button</span><span style="background:white;color:blue;">&gt;
    &lt;</span><span style="background:white;color:maroon;">a </span><span style="background:white;color:red;">href</span><span style="background:white;color:blue;">=&quot;#/&quot; </span><span style="background:white;color:red;">class</span><span style="background:white;color:blue;">=&quot;btn&quot;&gt;</span><span style="background:white;color:black;">Cancel</span><span style="background:white;color:blue;">&lt;/</span><span style="background:white;color:maroon;">a</span><span style="background:white;color:blue;">&gt;
&lt;/</span><span style="background:white;color:maroon;">div</span><span style="background:white;color:blue;">&gt;
&lt;/</span><span style="background:white;color:maroon;">form</span><span style="background:white;color:blue;">&gt;</span></pre>
<p>The ‘control-group’ div needs to be repeated for each item. This could be made easier by writing a directive, but you know how to do that yourself now… The ng-model is showing something new here – the ability to create properties of an object on-the-fly. In this case, an object called $scope.item is being created.</p>
<p>The Cancel button simply redirects to the ‘/’ template. Note that all AngularJS internal links must start with ‘#’, in order to stay within the same server page. We need to add a route to app.js to allow us to go to this page:</p>
<p>&#160;</p>
<pre class="code"><span style="background:white;color:black;">when(</span><span style="background:white;color:#a31515;">'/new'</span><span style="background:white;color:black;">, { controller: CreateCtrl, templateUrl: </span><span style="background:white;color:#a31515;">'detail.html' </span><span style="background:white;color:black;">}).
</span></pre>
<p>Create an empty controller called CreateCtrl for now, and add a TH to list.html to allow us to jump to the create page. </p>
<pre class="code"><span style="background:white;color:blue;">&lt;</span><span style="background:white;color:maroon;">th</span><span style="background:white;color:blue;">&gt;&lt;</span><span style="background:white;color:maroon;">a </span><span style="background:white;color:red;">href</span><span style="background:white;color:blue;">=&quot;#/new&quot;&gt;&lt;</span><span style="background:white;color:maroon;">i </span><span style="background:white;color:red;">class</span><span style="background:white;color:blue;">=&quot;icon-plus-sign&quot;&gt;&lt;/</span><span style="background:white;color:maroon;">i</span><span style="background:white;color:blue;">&gt;&lt;/</span><span style="background:white;color:maroon;">a</span><span style="background:white;color:blue;">&gt;&lt;/</span><span style="background:white;color:maroon;">th</span><span style="background:white;color:blue;">&gt;
</span></pre>
<p>Check the new form displays correctly.</p>
<p><a href="http://jphoward.files.wordpress.com/2013/01/image10.png"><img title="image" style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border-width:0;" border="0" alt="image" src="http://jphoward.files.wordpress.com/2013/01/image_thumb10.png?w=389&#038;h=276" width="389" height="276" /></a></p>
<p>&#160;</p>
<p>To make this actually do something useful, add ‘ng-click=&quot;save()&quot;’ to the Submit button, and add your save method to CreateCtrl.</p>
<pre class="code"><span style="background:white;color:black;">$scope.save = </span><span style="background:white;color:blue;">function </span><span style="background:white;color:black;">() {
    Todo.save($scope.item, </span><span style="background:white;color:blue;">function</span><span style="background:white;color:black;">() {
        $location.path(</span><span style="background:white;color:#a31515;">'/'</span><span style="background:white;color:black;">);
    });
};</span></pre>
<p>Hopefully the general approach to this method is familiar from our earlier use of query() – we pass a second parameter, which is a callback called on success. We really should add a third parameter: a callback called on failure. I’ll let you tackle that yourself. The good news is that our Create form is now fully working! In the future we will add validation and also use a date-picker to make it easier to pick a due date. </p>
<h2>Edit Form</h2>
<p>We can use the same template for the edit form. But we’ll need a new route and a new controller that captures and displays the item to edit. The route:</p>
<pre class="code"><span style="background:white;color:black;">when(</span><span style="background:white;color:#a31515;">'/edit/:itemId'</span><span style="background:white;color:black;">, { controller: EditCtrl, templateUrl: </span><span style="background:white;color:#a31515;">'detail.html' </span><span style="background:white;color:black;">}).
</span></pre>
<p>The controller needs to load the item when it initializes, and save to the appropriate id.</p>
<pre class="code"><span style="background:white;color:blue;">var </span><span style="background:white;color:black;">EditCtrl = </span><span style="background:white;color:blue;">function </span><span style="background:white;color:black;">($scope, $routeParams, $location, Todo) {
$scope.item = Todo.get({ id: $routeParams.itemId });
    
$scope.save = </span><span style="background:white;color:blue;">function </span><span style="background:white;color:black;">() {
    Todo.update({id: $scope.item.TodoItemId}, $scope.item, </span><span style="background:white;color:blue;">function </span><span style="background:white;color:black;">() {
        $location.path(</span><span style="background:white;color:#a31515;">'/'</span><span style="background:white;color:black;">);
    });
};
};</span></pre>
<p>Note that we’ve added $routeParams to our parameters in order to grab the id we captured from the url (i.e. where ‘:itemId’ appears in the route). Finally, let’s add an edit link as the final TD to each row.</p>
<pre class="code"><span style="background:white;color:blue;">&lt;</span><span style="background:white;color:maroon;">td</span><span style="background:white;color:blue;">&gt;&lt;</span><span style="background:white;color:maroon;">a </span><span style="background:white;color:red;">href</span><span style="background:white;color:blue;">=&quot;#/edit/{{</span><span style="background:white;color:#a9a9a9;">item.TodoItemId</span><span style="background:white;color:blue;">}}&quot;&gt;
        &lt;</span><span style="background:white;color:maroon;">i </span><span style="background:white;color:red;">class</span><span style="background:white;color:blue;">=&quot;icon-edit&quot;&gt;&lt;/</span><span style="background:white;color:maroon;">i</span><span style="background:white;color:blue;">&gt;
    &lt;/</span><span style="background:white;color:maroon;">a</span><span style="background:white;color:blue;">&gt;&lt;/</span><span style="background:white;color:maroon;">td</span><span style="background:white;color:blue;">&gt;</span></pre>
<p>That’s all we need – nice to see that we’re needing less and less code to add features; that’s a very good sign!</p>
<h2>Delete</h2>
<p>Our last major piece of functionality is deletions. Add a delete icon to our last TD that calls an appropriate method: </p>
<pre class="code"><span style="background:white;color:blue;">&lt;</span><span style="background:white;color:maroon;">a </span><span style="background:white;color:red;">ng-click</span><span style="background:white;color:blue;">=&quot;delete()&quot;&gt;&lt;</span><span style="background:white;color:maroon;">i </span><span style="background:white;color:red;">class</span><span style="background:white;color:blue;">=&quot;icon-remove&quot;&gt;&lt;/</span><span style="background:white;color:maroon;">i</span><span style="background:white;color:blue;">&gt;&lt;/</span><span style="background:white;color:maroon;">a</span><span style="background:white;color:blue;">&gt;
</span></pre>
<p>And also add a unique id to the TR, so we can refer to it later. </p>
<pre class="code"><span style="background:white;color:red;">id</span><span style="background:white;color:blue;">=&quot;item_{{</span><span style="background:white;color:#a9a9a9;">item.TodoItemId</span><span style="background:white;color:blue;">}}&quot;</span></pre>
<p>Finally, add the delete() method to ListCtrl: </p>
<pre class="code"><span style="background:white;color:black;">$scope.delete = </span><span style="background:white;color:blue;">function </span><span style="background:white;color:black;">() {
    </span><span style="background:white;color:blue;">var </span><span style="background:white;color:black;">itemId = </span><span style="background:white;color:blue;">this</span><span style="background:white;color:black;">.item.TodoItemId;
    Todo.delete({ id: itemId }, </span><span style="background:white;color:blue;">function </span><span style="background:white;color:black;">() {
        $(</span><span style="background:white;color:#a31515;">&quot;#item_&quot; </span><span style="background:white;color:black;">+ itemId).fadeOut();
    });
};</span></pre>
<p>I’ve used jQuery’s fadeOut() method here so that the user gets some feedback about the successful deletion. Strictly speaking, code that manipulates the DOM should really be in a directive, not a controller – but that seems like overkill for this single line.</p>
<h2>It works!</h2>
<p>So now we have a complete CRUD application. In the next part, we’ll learn how to add indexes using EF Migrations, and we’ll also learn how to make our app available to the public using AppHarbor. I hope you are ready for the fame and fortune that you will receive once your peers can use your amazing todo application!</p>
<p><em>Continued in <a href="http://jphoward.wordpress.com/2013/01/05/end-to-end-web-app-in-under-an-hourpart-4/">Part 4</a>.</em></p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/jphoward.wordpress.com/113/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/jphoward.wordpress.com/113/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=jphoward.wordpress.com&#038;blog=460421&#038;post=113&#038;subd=jphoward&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://jphoward.wordpress.com/2013/01/05/end-to-end-web-app-in-under-an-hourpart-3/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/1172fce7691410ce1b50830aa1ad44a0?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">jphoward</media:title>
		</media:content>

		<media:content url="http://jphoward.files.wordpress.com/2013/01/image_thumb10.png" medium="image">
			<media:title type="html">image</media:title>
		</media:content>
	</item>
		<item>
		<title>End to end web app in under an hour&#8211;Part 2</title>
		<link>http://jphoward.wordpress.com/2013/01/04/end-to-end-web-app-in-under-an-hourpart-2/</link>
		<comments>http://jphoward.wordpress.com/2013/01/04/end-to-end-web-app-in-under-an-hourpart-2/#comments</comments>
		<pubDate>Thu, 03 Jan 2013 23:23:33 +0000</pubDate>
		<dc:creator>jphoward</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">https://jphoward.wordpress.com/?p=109</guid>
		<description><![CDATA[Here is the video tutorial that goes with this post: Continued from Part 1. Search Let’s add a basic search form to the top of list.html: &#60;form class="form-search"&#62; &#60;div class="input-append"&#62; &#60;input type="text" ng-model="query" class="input-medium search-query" placeholder="Search"&#62; &#60;button ng-click="reset()" type="submit" class="btn"&#62;&#60;i class="icon-search"&#62;&#60;/i&#62;&#60;/button&#62; &#60;/div&#62; &#60;button ng-click="query=''; reset()" ng-disabled="!query" type="submit" class="btn"&#62;Reset&#60;/button&#62; &#60;/form&#62; “ng-model” is perhaps the most important [&#8230;]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=jphoward.wordpress.com&#038;blog=460421&#038;post=109&#038;subd=jphoward&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
				<content:encoded><![CDATA[<p><i>Here is the video tutorial that goes with this post:</i></p>
<span class='embed-youtube' style='text-align:center; display: block;'><iframe class='youtube-player' type='text/html' width='595' height='365' src='http://www.youtube.com/embed/6WbVn_gYwQo?version=3&#038;rel=1&#038;fs=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;wmode=transparent' frameborder='0'></iframe></span>
<p><em>Continued from <a href="http://jphoward.wordpress.com/2013/01/04/end-to-end-web-app-in-under-an-hour/">Part 1</a>.</em></p>
<h2>Search</h2>
<p>Let’s add a basic search form to the top of list.html:</p>
<pre class="code"><span style="background:white;color:blue;">&lt;</span><span style="background:white;color:maroon;">form </span><span style="background:white;color:red;">class</span><span style="background:white;color:blue;">="form-search"&gt;
    &lt;</span><span style="background:white;color:maroon;">div </span><span style="background:white;color:red;">class</span><span style="background:white;color:blue;">="input-append"&gt;
        &lt;</span><span style="background:white;color:maroon;">input </span><span style="background:white;color:red;">type</span><span style="background:white;color:blue;">="text" </span><span style="background:white;color:red;">ng-model</span><span style="background:white;color:blue;">="query" </span><span style="background:white;color:red;">class</span><span style="background:white;color:blue;">="input-medium search-query" </span><span style="background:white;color:red;">placeholder</span><span style="background:white;color:blue;">="Search"&gt;
        &lt;</span><span style="background:white;color:maroon;">button </span><span style="background:white;color:red;">ng-click</span><span style="background:white;color:blue;">="reset()" </span><span style="background:white;color:red;">type</span><span style="background:white;color:blue;">="submit" </span><span style="background:white;color:red;">class</span><span style="background:white;color:blue;">="btn"&gt;&lt;</span><span style="background:white;color:maroon;">i </span><span style="background:white;color:red;">class</span><span style="background:white;color:blue;">="icon-search"&gt;&lt;/</span><span style="background:white;color:maroon;">i</span><span style="background:white;color:blue;">&gt;&lt;/</span><span style="background:white;color:maroon;">button</span><span style="background:white;color:blue;">&gt;
    &lt;/</span><span style="background:white;color:maroon;">div</span><span style="background:white;color:blue;">&gt;
    &lt;</span><span style="background:white;color:maroon;">button </span><span style="background:white;color:red;">ng-click</span><span style="background:white;color:blue;">="query=''; reset()" </span><span style="background:white;color:red;">ng-disabled</span><span style="background:white;color:blue;">="!query" </span><span style="background:white;color:red;">type</span><span style="background:white;color:blue;">="submit" </span><span style="background:white;color:red;">class</span><span style="background:white;color:blue;">="btn"&gt;</span><span style="background:white;color:black;">Reset</span><span style="background:white;color:blue;">&lt;/</span><span style="background:white;color:maroon;">button</span><span style="background:white;color:blue;">&gt;
&lt;/</span><span style="background:white;color:maroon;">form</span><span style="background:white;color:blue;">&gt;
</span></pre>
<p>“ng-model” is perhaps the most important and useful AngularJS directive: it creates a 2-way binding between a property in $scope and the value of an HTML element. In this case, our text box’s value is bound to $scope.query. Furthermore, the Reset button will be disabled automatically if $scope.query is empty, due to the use of the ng-disabled directive.</p>
<p>All we need now on the client side is to define $scope.reset() in our controller.</p>
<pre class="code"><span style="background:white;color:blue;">var </span><span style="background:white;color:black;">ListCtrl = </span><span style="background:white;color:blue;">function </span><span style="background:white;color:black;">($scope, $location, Todo) {
    $scope.reset = </span><span style="background:white;color:blue;">function</span><span style="background:white;color:black;">() {
        $scope.items = Todo.query({q: $scope.query});
    };

    $scope.reset();
};</span></pre>
<p>Unfortunately, the query method that WebAPI creates for us does not support searching, sorting, or paginating. (Oddly enough, the pre-release versions of WebAPI did, but the functionality was stripped just before release!) Therefore, we will need to edit TodoController.cs to remove GetTodoItems(), and replace it with this:</p>
<pre class="code"><span style="background:white;color:blue;">public </span><span style="background:white;color:#2b91af;">IEnumerable</span><span style="background:white;color:black;">&lt;</span><span style="background:white;color:#2b91af;">TodoItem</span><span style="background:white;color:black;">&gt; GetTodoItems(</span><span style="background:white;color:blue;">string </span><span style="background:white;color:black;">q = </span><span style="background:white;color:blue;">null</span><span style="background:white;color:black;">, </span><span style="background:white;color:blue;">string </span><span style="background:white;color:black;">sort = </span><span style="background:white;color:blue;">null</span><span style="background:white;color:black;">, </span><span style="background:white;color:blue;">bool </span><span style="background:white;color:black;">desc = </span><span style="background:white;color:blue;">false</span><span style="background:white;color:black;">,
                                                        </span><span style="background:white;color:blue;">int</span><span style="background:white;color:black;">? limit = </span><span style="background:white;color:blue;">null</span><span style="background:white;color:black;">, </span><span style="background:white;color:blue;">int </span><span style="background:white;color:black;">offset = 0) {
    </span><span style="background:white;color:blue;">var </span><span style="background:white;color:black;">list = ((</span><span style="background:white;color:#2b91af;">IObjectContextAdapter</span><span style="background:white;color:black;">) db).ObjectContext.CreateObjectSet&lt;</span><span style="background:white;color:#2b91af;">TodoItem</span><span style="background:white;color:black;">&gt;();

    </span><span style="background:white;color:#2b91af;">IQueryable</span><span style="background:white;color:black;">&lt;</span><span style="background:white;color:#2b91af;">TodoItem</span><span style="background:white;color:black;">&gt; items = </span><span style="background:white;color:blue;">string</span><span style="background:white;color:black;">.IsNullOrEmpty(sort) ? list.OrderBy(o=&gt;o.Priority)
        : list.OrderBy(</span><span style="background:white;color:#2b91af;">String</span><span style="background:white;color:black;">.Format(</span><span style="background:white;color:#a31515;">"it.</span><span style="background:white;color:#3cb371;">{0} {1}</span><span style="background:white;color:#a31515;">"</span><span style="background:white;color:black;">, sort, desc ? </span><span style="background:white;color:#a31515;">"DESC" </span><span style="background:white;color:black;">: </span><span style="background:white;color:#a31515;">"ASC"</span><span style="background:white;color:black;">));

    </span><span style="background:white;color:blue;">if </span><span style="background:white;color:black;">(!</span><span style="background:white;color:blue;">string</span><span style="background:white;color:black;">.IsNullOrEmpty(q) &amp;&amp; q != </span><span style="background:white;color:#a31515;">"undefined"</span><span style="background:white;color:black;">) items = items.Where(t =&gt; t.Todo.Contains(q));

    </span><span style="background:white;color:blue;">if </span><span style="background:white;color:black;">(offset &gt; 0) items = items.Skip(offset);
    </span><span style="background:white;color:blue;">if </span><span style="background:white;color:black;">(limit.HasValue) items = items.Take(limit.Value);
    </span><span style="background:white;color:blue;">return </span><span style="background:white;color:black;">items;
}</span></pre>
<p>(Although we are not using sorting or pagination yet, we may as well include it in our method for later.) The optional parameters to the method are automatically mapped to the querystring by WebAPI – so e.g. index.html?q=something will pass ‘something’ as the value of the ‘q’ parameter. $scope.reset() sets this parameter to $scope.query. So, we now have working sort functionality!<a href="http://jphoward.files.wordpress.com/2013/01/image9.png"><img style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border-width:0;" title="image" alt="image" src="http://jphoward.files.wordpress.com/2013/01/image_thumb9.png?w=590&#038;h=236" width="590" height="236" border="0" /></a></p>
<h2>Pagination</h2>
<p>Let’s now add pagination. That’s pretty simple actually. As you can see from GetTodoItems above, we can pass in an offset and a limit, so we just need to modify ListCtrl to only request 20 items at a time, and keep track of whether we have got all the items available (i.e. if we get less than 20 items in response, there is nothing more to retrieve). Note that we are now using the 2nd parameter to query(), which is a callback which is called on success. This allows us to append the additional items to the existing list.</p>
<pre class="code"><span style="background:white;color:black;">$scope.search = </span><span style="background:white;color:blue;">function </span><span style="background:white;color:black;">() {
    Todo.query({ q: $scope.query, limit: $scope.limit, offset: $scope.offset },
        </span><span style="background:white;color:blue;">function </span><span style="background:white;color:black;">(items) {
            </span><span style="background:white;color:blue;">var </span><span style="background:white;color:black;">cnt = items.length;
            $scope.no_more = cnt &lt; 20;
            $scope.items = $scope.items.concat(items);
        }
    );
};

$scope.reset = </span><span style="background:white;color:blue;">function </span><span style="background:white;color:black;">() {
    $scope.offset = 0;
    $scope.items = [];
    $scope.search();
};

$scope.show_more = </span><span style="background:white;color:blue;">function </span><span style="background:white;color:black;">() { </span><span style="background:white;color:blue;">return </span><span style="background:white;color:black;">!$scope.no_more; };

$scope.limit = 20;

$scope.reset();</span></pre>
<p>That’s the entirety of the controller at this point. The only other thing we need is a link in details.html to grab another page of data.</p>
<pre class="code"><span style="background:white;color:blue;">&lt;</span><span style="background:white;color:maroon;">a </span><span style="background:white;color:red;">href</span><span style="background:white;color:blue;">="" </span><span style="background:white;color:red;">ng-click </span><span style="background:white;color:blue;">= "offset = offset + limit; search()" 
    </span><span style="background:white;color:red;">ng-show </span><span style="background:white;color:blue;">="show_more()"&gt;</span><span style="background:white;color:black;">Show more</span><span style="background:white;color:blue;">&lt;/</span><span style="background:white;color:maroon;">a</span><span style="background:white;color:blue;">&gt;</span></pre>
<p>The ng-show directive ensures that this link will not be shown when there is no further data (when show_more() returns false).</p>
<h2>Sorting</h2>
<p>In order to allow sorting, we’ll need to store sort order and direction in $scope, and then add to the Todo.query() params: <em>sort: $scope.sort_order, desc: $scope.sort_desc </em>. After adding those two parameters, be sure to initialize the order to whatever you prefer as the default.</p>
<pre class="code"><span style="background:white;color:black;">$scope.sort_order = </span><span style="background:white;color:#a31515;">'Priority'</span><span style="background:white;color:black;">;
$scope.desc = </span><span style="background:white;color:blue;">false</span><span style="background:white;color:black;">;
</span></pre>
<p>Let’s now add a sort_by function that sets sort_order to whatever it is passed, and toggles the direction if it is called multiple times with the same order.</p>
<pre class="code"><span style="background:white;color:black;">$scope.sort_by = </span><span style="background:white;color:blue;">function </span><span style="background:white;color:black;">(ord) {
    </span><span style="background:white;color:blue;">if </span><span style="background:white;color:black;">($scope.sort_order == ord) { $scope.sort_desc = !$scope.sort_desc; }
    </span><span style="background:white;color:blue;">else </span><span style="background:white;color:black;">{ $scope.sort_desc = </span><span style="background:white;color:blue;">false</span><span style="background:white;color:black;">; }
    $scope.sort_order = ord;
    $scope.reset();
};</span></pre>
<p>All we need to do now is to make the table header clickable.</p>
<pre class="code"><span style="background:white;color:blue;">&lt;</span><span style="background:white;color:maroon;">th</span><span style="background:white;color:blue;">&gt;&lt;</span><span style="background:white;color:maroon;">a </span><span style="background:white;color:red;">ng-click</span><span style="background:white;color:blue;">="sort_by('Todo')"&gt;</span><span style="background:white;color:black;">Todo</span><span style="background:white;color:blue;">&lt;/</span><span style="background:white;color:maroon;">a</span><span style="background:white;color:blue;">&gt;&lt;/</span><span style="background:white;color:maroon;">th</span><span style="background:white;color:blue;">&gt;</span></pre>
<p>Finally, let’s add an icon that is shown depending on whether we are sorting by that column – add this just before &lt;/th&gt;:</p>
<pre class="code"><span style="background:white;color:blue;">&lt;</span><span style="background:white;color:maroon;">span </span><span style="background:white;color:red;">ng-show</span><span style="background:white;color:blue;">="do_show(true, 'Todo')"&gt;&lt;</span><span style="background:white;color:maroon;">i </span><span style="background:white;color:red;">class</span><span style="background:white;color:blue;">="icon-circle-arrow-down"&gt;&lt;/</span><span style="background:white;color:maroon;">i</span><span style="background:white;color:blue;">&gt;&lt;/</span><span style="background:white;color:maroon;">span</span><span style="background:white;color:blue;">&gt;
&lt;</span><span style="background:white;color:maroon;">span </span><span style="background:white;color:red;">ng-show</span><span style="background:white;color:blue;">="do_show(false, 'Todo')"&gt;&lt;</span><span style="background:white;color:maroon;">i </span><span style="background:white;color:red;">class</span><span style="background:white;color:blue;">="icon-circle-arrow-up"&gt;&lt;/</span><span style="background:white;color:maroon;">i</span><span style="background:white;color:blue;">&gt;&lt;/</span><span style="background:white;color:maroon;">span</span><span style="background:white;color:blue;">&gt;</span></pre>
<p>and the required js method:</p>
<pre class="code"><span style="background:white;color:black;">$scope.do_show = </span><span style="background:white;color:blue;">function </span><span style="background:white;color:black;">(asc, col) {
    </span><span style="background:white;color:blue;">return </span><span style="background:white;color:black;">(asc != $scope.sort_desc) &amp;&amp; ($scope.sort_order == col);
};</span></pre>
<h2>Creating a directive</h2>
<p>That’s quite a lot of HTML for each individual TH! Let’s simplify it by writing a ‘sorted’ directive. Once the directive is written, we’ll be able to write our header like this:</p>
<pre class="code"><span style="background:white;color:blue;">&lt;</span><span style="background:white;color:maroon;">th </span><span style="background:white;color:red;">sorted</span><span style="background:white;color:blue;">="Todo"&gt;</span><span style="background:white;color:black;">Todo</span><span style="background:white;color:blue;">&lt;/</span><span style="background:white;color:maroon;">th</span><span style="background:white;color:blue;">&gt;
</span></pre>
<p>To start our directive, call the appropriate method, and set the options to create a new $scope in the directive, and also to transclude the directive content:</p>
<pre class="code"><span style="background:white;color:black;">TodoApp.directive(</span><span style="background:white;color:#a31515;">'sorted'</span><span style="background:white;color:black;">, </span><span style="background:white;color:blue;">function</span><span style="background:white;color:black;">() {
    </span><span style="background:white;color:blue;">return </span><span style="background:white;color:black;">{
        scope: </span><span style="background:white;color:blue;">true</span><span style="background:white;color:black;">,
        transclude: </span><span style="background:white;color:blue;">true</span><span style="background:white;color:black;">,</span></pre>
<p>Now we are ready to include our template, which is simply the contents of the TH we created for the Todo header, with a couple of minor changes.</p>
<pre class="code"><span style="background:white;color:black;">template: </span><span style="background:white;color:#a31515;">'&lt;a ng-click="do_sort()" ng-transclude&gt;&lt;/a&gt;' </span><span style="background:white;color:black;">+
    </span><span style="background:white;color:#a31515;">'&lt;span ng-show="do_show(true)"&gt;&lt;i class="icon-circle-arrow-down"&gt;&lt;/i&gt;&lt;/span&gt;' </span><span style="background:white;color:black;">+
    </span><span style="background:white;color:#a31515;">'&lt;span ng-show="do_show(false)"&gt;&lt;i class="icon-circle-arrow-up"&gt;&lt;/i&gt;&lt;/span&gt;'</span><span style="background:white;color:black;">,</span></pre>
<p>Here, the ng-transclude directive tells AngularJS where we want the contents of the element put (they are put immediately after the element containing this attribute).</p>
<p>Then, we can add a controller to the directive containing the logic we wrote earlier:</p>
<pre class="code"><span style="background:white;color:black;">controller: </span><span style="background:white;color:blue;">function</span><span style="background:white;color:black;">($scope, $element, $attrs) {
    $scope.sort = $attrs.sorted;

    $scope.do_sort = </span><span style="background:white;color:blue;">function</span><span style="background:white;color:black;">() { $scope.sort_by($scope.sort); };

    $scope.do_show = </span><span style="background:white;color:blue;">function</span><span style="background:white;color:black;">(asc) {
        </span><span style="background:white;color:blue;">return </span><span style="background:white;color:black;">(asc != $scope.sort_desc) &amp;&amp; ($scope.sort_order == $scope.sort);
    };
}</span></pre>
<p>That’s it! We now have a list display that sorts searching, sorting, and pagination.</p>
<p>In the next part, we’ll take a look at creating, deleting, and updating items.</p>
<p><em>Continued in <a href="http://jphoward.wordpress.com/2013/01/05/end-to-end-web-app-in-under-an-hourpart-3/">Part 3</a>.</em></p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/jphoward.wordpress.com/109/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/jphoward.wordpress.com/109/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=jphoward.wordpress.com&#038;blog=460421&#038;post=109&#038;subd=jphoward&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://jphoward.wordpress.com/2013/01/04/end-to-end-web-app-in-under-an-hourpart-2/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/1172fce7691410ce1b50830aa1ad44a0?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">jphoward</media:title>
		</media:content>

		<media:content url="http://jphoward.files.wordpress.com/2013/01/image_thumb9.png" medium="image">
			<media:title type="html">image</media:title>
		</media:content>
	</item>
		<item>
		<title>End to end web app in under an hour&#8211;Part 1</title>
		<link>http://jphoward.wordpress.com/2013/01/04/end-to-end-web-app-in-under-an-hour/</link>
		<comments>http://jphoward.wordpress.com/2013/01/04/end-to-end-web-app-in-under-an-hour/#comments</comments>
		<pubDate>Thu, 03 Jan 2013 19:03:20 +0000</pubDate>
		<dc:creator>jphoward</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">https://jphoward.wordpress.com/?p=105</guid>
		<description><![CDATA[Here is the video tutorial that goes with this post: Here’s how to create a complete web app in under an hour. We will (naturally!) create a todo app. The features: Create, update, delete a todo Sort (and show sort order) Search Pagination We’ll try to make it somewhat user friendly, e.g. Date-picker widget for [&#8230;]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=jphoward.wordpress.com&#038;blog=460421&#038;post=105&#038;subd=jphoward&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
				<content:encoded><![CDATA[<p><i>Here is the video tutorial that goes with this post:</i></p>
<span class='embed-youtube' style='text-align:center; display: block;'><iframe class='youtube-player' type='text/html' width='595' height='365' src='http://www.youtube.com/embed/Ja2xDrtylBw?version=3&#038;rel=1&#038;fs=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;wmode=transparent' frameborder='0'></iframe></span>
<p>Here’s how to create a complete web app in under an hour. We will (naturally!) create a todo app. The features:</p>
<ul>
<li>Create, update, delete a todo</li>
<li>Sort (and show sort order)</li>
<li>Search</li>
<li>Pagination</li>
</ul>
<p>We’ll try to make it somewhat user friendly, e.g.</p>
<ul>
<li>Date-picker widget for todo due date</li>
<li>Enable/disable buttons as appropriate for context</li>
</ul>
<p>Our infrastructure will be:</p>
<ul>
<li>Backend Language: C#</li>
<li>Backend Framework: WebApi</li>
<li>Database: SQL Server (including SQL Express LocalDB during development)</li>
<li>ORM: Entity Framework Code First + Migrations</li>
<li>Frontend Framework: AngularJS</li>
<li>CSS styles: Bootstrap</li>
<li>IDE: Visual Studio + Resharper</li>
<li>Hosting: Appharbor</li>
</ul>
<p>As you&#8217;ll see, this particular choice of tools is well suited to rapid application development, and is also very flexible.</p>
<p>The goal is not just to throw together the minimal necessary to have something working, but to create a really flexible infrastructure that we can use as a foundation for many future applications.  OK, let&#8217;s get started.</p>
<h2>The Backend</h2>
<p>In Visual Studio, create a new document and choose to create an MVC web application project.</p>
<p><a href="http://jphoward.files.wordpress.com/2013/01/image.png"><img style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border-width:0;" title="image" alt="image" src="http://jphoward.files.wordpress.com/2013/01/image_thumb.png?w=644&#038;h=446" width="644" height="446" border="0" /></a></p>
<p>Use the web API template.</p>
<p><a href="http://jphoward.files.wordpress.com/2013/01/image1.png"><img style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border-width:0;" title="image" alt="image" src="http://jphoward.files.wordpress.com/2013/01/image_thumb1.png?w=574&#038;h=215" width="574" height="215" border="0" /></a></p>
<p>Web API is a framework which makes it easier to create REST APIs. It is very similar to ASP.net MVC.</p>
<p>Delete HomeController.cs, everything in the Content folder, and everything except Web.config in the Views folder. (These are all for using ASP.Net MVC views and default styles, none of which we’ll need).</p>
<p>By default the API will use XML, but we would prefer JSON (this makes it a little easier to debug), therefore add this to the end of WebApiConfig.Register():</p>
<pre class="code"><span style="background:white;color:black;">config.Formatters.XmlFormatter.SupportedMediaTypes.Remove(
                config.Formatters.XmlFormatter.SupportedMediaTypes.FirstOrDefault(t =&gt; t.MediaType == </span><span style="background:white;color:#a31515;">"application/xml"</span><span style="background:white;color:black;">));</span></pre>
<p>Now, create a new class for your Todo Items:</p>
<pre class="code"><span style="background:white;color:blue;">public class </span><span style="background:white;color:#2b91af;">TodoItem </span><span style="background:white;color:black;">{
        </span><span style="background:white;color:blue;">public int </span><span style="background:white;color:black;">TodoItemId { </span><span style="background:white;color:blue;">get</span><span style="background:white;color:black;">; </span><span style="background:white;color:blue;">set</span><span style="background:white;color:black;">; }
        </span><span style="background:white;color:blue;">public </span><span style="background:white;color:#2b91af;">String </span><span style="background:white;color:black;">Todo { </span><span style="background:white;color:blue;">get</span><span style="background:white;color:black;">; </span><span style="background:white;color:blue;">set</span><span style="background:white;color:black;">; }
        </span><span style="background:white;color:blue;">public byte </span><span style="background:white;color:black;">Priority { </span><span style="background:white;color:blue;">get</span><span style="background:white;color:black;">; </span><span style="background:white;color:blue;">set</span><span style="background:white;color:black;">; }
        </span><span style="background:white;color:blue;">public </span><span style="background:white;color:#2b91af;">DateTime</span><span style="background:white;color:black;">? DueDate { </span><span style="background:white;color:blue;">get</span><span style="background:white;color:black;">; </span><span style="background:white;color:blue;">set</span><span style="background:white;color:black;">; }
    }</span></pre>
<p>And now we’re ready to create our REST API! After compiling, right-click the Solution Explorer, and choose Add-&gt;Controller, and create a controller called TodoController.</p>
<p><a href="http://jphoward.files.wordpress.com/2013/01/image2.png"><img style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border-width:0;" title="image" alt="image" src="http://jphoward.files.wordpress.com/2013/01/image_thumb2.png?w=484&#038;h=388" width="484" height="388" border="0" /></a></p>
<p>You’ll need to choose the option to create a new data context.</p>
<p>You should now have a working REST API! Press F5 to run your solution, and it should open in a browser. You will get a “not found” error since we don’t have any pages set up yet, so you’ll need to modify the URL path to ‘/api/todo’.</p>
<p><a href="http://jphoward.files.wordpress.com/2013/01/image3.png"><img style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border-width:0;" title="image" alt="image" src="http://jphoward.files.wordpress.com/2013/01/image_thumb3.png?w=314&#038;h=76" width="314" height="76" border="0" /></a></p>
<p>Of course, at this stage all we get is an empty array. We need to put some items into our database! First, check out SQL Server Object Browser to see that Visual Studio has already created a DB for us:</p>
<p><a href="http://jphoward.files.wordpress.com/2013/01/image4.png"><img style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border-width:0;" title="image" alt="image" src="http://jphoward.files.wordpress.com/2013/01/image_thumb4.png?w=367&#038;h=348" width="367" height="348" border="0" /></a></p>
<p>To add items, we are going to use Entity Framework Migrations. We will go to Tools-&gt;Library Package Manager in order to open the Package Manager Console, which is where we can enter commands to work with Entity Framework. In the console, type “Enable-Migrations”.</p>
<p><a href="http://jphoward.files.wordpress.com/2013/01/image5.png"><img style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border-width:0;" title="image" alt="image" src="http://jphoward.files.wordpress.com/2013/01/image_thumb5.png?w=473&#038;h=124" width="473" height="124" border="0" /></a></p>
<p>This has created a file for me called Configuration.cs, which allows me to specify data to seed my DB with. Let’s edit that now to seed some data.</p>
<pre class="code"><span style="background:white;color:blue;">protected override void </span><span style="background:white;color:black;">Seed(</span><span style="background:white;color:#2b91af;">AmazingTodoContext </span><span style="background:white;color:black;">context) {
    </span><span style="background:white;color:blue;">var </span><span style="background:white;color:black;">r = </span><span style="background:white;color:blue;">new </span><span style="background:white;color:#2b91af;">Random</span><span style="background:white;color:black;">();
    </span><span style="background:white;color:blue;">var </span><span style="background:white;color:black;">items = </span><span style="background:white;color:#2b91af;">Enumerable</span><span style="background:white;color:black;">.Range(1, 50).Select(o =&gt; </span><span style="background:white;color:blue;">new </span><span style="background:white;color:#2b91af;">TodoItem </span><span style="background:white;color:black;">{
        DueDate = </span><span style="background:white;color:blue;">new </span><span style="background:white;color:#2b91af;">DateTime</span><span style="background:white;color:black;">(2012, r.Next(1, 12), r.Next(1, 28)),
        Priority = (</span><span style="background:white;color:blue;">byte</span><span style="background:white;color:black;">)r.Next(10),
        Todo = o.ToString()
    }).ToArray();
    context.TodoItems.AddOrUpdate(item =&gt; </span><span style="background:white;color:blue;">new </span><span style="background:white;color:black;">{ item.Todo }, items);
}</span></pre>
<p>Any time I change my model or edit Seed(), I’ll need to run Update-Database in Package Manager Console to have the DB show my changes to the code.</p>
<p><a href="http://jphoward.files.wordpress.com/2013/01/image6.png"><img style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border-width:0;" title="image" alt="image" src="http://jphoward.files.wordpress.com/2013/01/image_thumb6.png?w=438&#038;h=99" width="438" height="99" border="0" /></a></p>
<p>Now I’ll refresh my browser to see the data via the REST API:</p>
<p><a href="http://jphoward.files.wordpress.com/2013/01/image7.png"><img style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border-width:0;" title="image" alt="image" src="http://jphoward.files.wordpress.com/2013/01/image_thumb7.png?w=520&#038;h=151" width="520" height="151" border="0" /></a></p>
<h2>The Basic AngularJS setup</h2>
<p>Now that the API is working, we can create a simple page to show a list of todos. We will use AngularJS as our Javascript MVC framework, so let’s install that: simply type “Install-Package angularjs” at the package manager console. We’ll be using Bootstrap to style things up, so install that too: “Install-Package Twitter.Bootstrap”. In the root of your project, create index.html, with references to the css and js files we’ll be using.</p>
<pre class="code"><span style="background:white;color:blue;">&lt;!</span><span style="background:white;color:maroon;">DOCTYPE </span><span style="background:white;color:red;">html</span><span style="background:white;color:blue;">&gt;
&lt;</span><span style="background:white;color:maroon;">html </span><span style="background:white;color:red;">ng-app</span><span style="background:white;color:blue;">="TodoApp" </span><span style="background:white;color:red;">xmlns</span><span style="background:white;color:blue;">="http://www.w3.org/1999/xhtml"&gt;
    &lt;</span><span style="background:white;color:maroon;">head</span><span style="background:white;color:blue;">&gt;
        &lt;</span><span style="background:white;color:maroon;">script </span><span style="background:white;color:red;">src</span><span style="background:white;color:blue;">="Scripts/jquery-1.7.1.js"&gt;&lt;/</span><span style="background:white;color:maroon;">script</span><span style="background:white;color:blue;">&gt;
        &lt;</span><span style="background:white;color:maroon;">script </span><span style="background:white;color:red;">src</span><span style="background:white;color:blue;">="Scripts/angular.js"&gt;&lt;/</span><span style="background:white;color:maroon;">script</span><span style="background:white;color:blue;">&gt;
        &lt;</span><span style="background:white;color:maroon;">script </span><span style="background:white;color:red;">src</span><span style="background:white;color:blue;">="Scripts/angular-resource.js"&gt;&lt;/</span><span style="background:white;color:maroon;">script</span><span style="background:white;color:blue;">&gt;
        &lt;</span><span style="background:white;color:maroon;">link </span><span style="background:white;color:red;">rel</span><span style="background:white;color:blue;">="stylesheet" </span><span style="background:white;color:red;">type</span><span style="background:white;color:blue;">="text/css" </span><span style="background:white;color:red;">href</span><span style="background:white;color:blue;">="Content/bootstrap.css" /&gt;
        &lt;</span><span style="background:white;color:maroon;">title</span><span style="background:white;color:blue;">&gt;</span><span style="background:white;color:black;">Amazing Todo</span><span style="background:white;color:blue;">&lt;/</span><span style="background:white;color:maroon;">title</span><span style="background:white;color:blue;">&gt;
    &lt;/</span><span style="background:white;color:maroon;">head</span><span style="background:white;color:blue;">&gt;
    &lt;</span><span style="background:white;color:maroon;">body</span><span style="background:white;color:blue;">&gt;
        &lt;</span><span style="background:white;color:maroon;">div </span><span style="background:white;color:red;">class</span><span style="background:white;color:blue;">="container"&gt;
            &lt;</span><span style="background:white;color:maroon;">div </span><span style="background:white;color:red;">ng-view</span><span style="background:white;color:blue;">&gt;&lt;/</span><span style="background:white;color:maroon;">div</span><span style="background:white;color:blue;">&gt;
        &lt;/</span><span style="background:white;color:maroon;">div</span><span style="background:white;color:blue;">&gt;
    &lt;/</span><span style="background:white;color:maroon;">body</span><span style="background:white;color:blue;">&gt;
&lt;/</span><span style="background:white;color:maroon;">html</span><span style="background:white;color:blue;">&gt;
</span></pre>
<p>You will need to change the ng-app attribute in the html element, and the title, for each of your projects. Other than that, your index.html will be the same for most of your projects (other that having some different js and css links, of course). All the actual work will occur in AngularJS templates. In order for AngularJS To know what template and controller to use we need to set up some routes. To do this, we use the config method of the AngularJS module class. Let&#8217;s create a new JavaScript file for our AngularJS code; the convention is to call this app.js.</p>
<pre class="code"><span style="background:white;color:blue;">var </span><span style="background:white;color:black;">TodoApp = angular.module(</span><span style="background:white;color:#a31515;">"TodoApp"</span><span style="background:white;color:black;">, [</span><span style="background:white;color:#a31515;">"ngResource"</span><span style="background:white;color:black;">]).
    config(</span><span style="background:white;color:blue;">function</span><span style="background:white;color:black;">($routeProvider) {
        $routeProvider.
            when(</span><span style="background:white;color:#a31515;">'/'</span><span style="background:white;color:black;">, { controller: ListCtrl, templateUrl: </span><span style="background:white;color:#a31515;">'list.html' </span><span style="background:white;color:black;">}).
            otherwise({ redirectTo: </span><span style="background:white;color:#a31515;">'/' </span><span style="background:white;color:black;">});
    });
</span></pre>
<p>This creates a route for ‘/’ that uses a controller called ListCtrl and a template called list.html.</p>
<p>Let’s create an empty controller in app.js.</p>
<pre class="code"><span style="background:white;color:blue;">var </span><span style="background:white;color:black;">ListCtrl = </span><span style="background:white;color:blue;">function</span><span style="background:white;color:black;">($scope, $location) {
    $scope.test = </span><span style="background:white;color:#a31515;">"testing"</span><span style="background:white;color:black;">;
};</span></pre>
<p>Let’s create a basic list.html as well.</p>
<pre class="code"><span style="background:white;color:blue;">&lt;</span><span style="background:white;color:maroon;">h1</span><span style="background:white;color:blue;">&gt;</span><span style="background:white;color:black;">Test {{</span><span style="background:white;color:#a9a9a9;">test</span><span style="background:white;color:black;">}}</span><span style="background:white;color:blue;">&lt;/</span><span style="background:white;color:maroon;">h1</span><span style="background:white;color:blue;">&gt;</span></pre>
<p>Any properties and methods of $scope are made available automatically in the template. In the template, use ‘handlebars’ (double braces) to indicate where AngularJS expressions should be placed. Don’t forget to add a script element to index.html pointing at your app.js. Now try going to <a href="http://localhost:5127/index.html" rel="nofollow">http://localhost:5127/index.html</a> in your browser (you’ll need to change the port of course). If it’s working, you’ll see “Test testing”.</p>
<h2>The List Page</h2>
<p>Let’s edit our list.html to do something more useful!</p>
<pre class="code"><span style="background:white;color:blue;">&lt;</span><span style="background:white;color:maroon;">table </span><span style="background:white;color:red;">class</span><span style="background:white;color:blue;">="table table-striped table-condensed table-hover"&gt;
    &lt;</span><span style="background:white;color:maroon;">thead</span><span style="background:white;color:blue;">&gt;
        &lt;</span><span style="background:white;color:maroon;">th</span><span style="background:white;color:blue;">&gt;</span><span style="background:white;color:black;">Todo</span><span style="background:white;color:blue;">&lt;/</span><span style="background:white;color:maroon;">th</span><span style="background:white;color:blue;">&gt;
        &lt;</span><span style="background:white;color:maroon;">th</span><span style="background:white;color:blue;">&gt;</span><span style="background:white;color:black;">Priority</span><span style="background:white;color:blue;">&lt;/</span><span style="background:white;color:maroon;">th</span><span style="background:white;color:blue;">&gt;
        &lt;</span><span style="background:white;color:maroon;">th</span><span style="background:white;color:blue;">&gt;</span><span style="background:white;color:black;">Due</span><span style="background:white;color:blue;">&lt;/</span><span style="background:white;color:maroon;">th</span><span style="background:white;color:blue;">&gt;
    &lt;/</span><span style="background:white;color:maroon;">thead</span><span style="background:white;color:blue;">&gt;
    &lt;</span><span style="background:white;color:maroon;">tbody</span><span style="background:white;color:blue;">&gt;
        &lt;</span><span style="background:white;color:maroon;">tr </span><span style="background:white;color:red;">ng-repeat</span><span style="background:white;color:blue;">="item in items"&gt;
            &lt;</span><span style="background:white;color:maroon;">td</span><span style="background:white;color:blue;">&gt;</span><span style="background:white;color:black;">{{</span><span style="background:white;color:#a9a9a9;">item.Todo</span><span style="background:white;color:black;">}}</span><span style="background:white;color:blue;">&lt;/</span><span style="background:white;color:maroon;">td</span><span style="background:white;color:blue;">&gt;
            &lt;</span><span style="background:white;color:maroon;">td</span><span style="background:white;color:blue;">&gt;</span><span style="background:white;color:black;">{{</span><span style="background:white;color:#a9a9a9;">item.Priority</span><span style="background:white;color:black;">}}</span><span style="background:white;color:blue;">&lt;/</span><span style="background:white;color:maroon;">td</span><span style="background:white;color:blue;">&gt;
            &lt;</span><span style="background:white;color:maroon;">td</span><span style="background:white;color:blue;">&gt;</span><span style="background:white;color:black;">{{</span><span style="background:white;color:#a9a9a9;">item.DueDate</span><span style="background:white;color:black;">}}</span><span style="background:white;color:blue;">&lt;/</span><span style="background:white;color:maroon;">td</span><span style="background:white;color:blue;">&gt;
        &lt;/</span><span style="background:white;color:maroon;">tr</span><span style="background:white;color:blue;">&gt;
    &lt;/</span><span style="background:white;color:maroon;">tbody</span><span style="background:white;color:blue;">&gt;
&lt;/</span><span style="background:white;color:maroon;">table</span><span style="background:white;color:blue;">&gt;
</span></pre>
<p>For this to do anything, we will need $scope.items to contain our todos. We can define in app.js an AngularJS $resource that we can use to query our REST API.</p>
<pre class="code"><span style="background:white;color:black;">TodoApp.factory(</span><span style="background:white;color:#a31515;">'Todo'</span><span style="background:white;color:black;">, </span><span style="background:white;color:blue;">function</span><span style="background:white;color:black;">($resource) {
    </span><span style="background:white;color:blue;">return </span><span style="background:white;color:black;">$resource(</span><span style="background:white;color:#a31515;">'/api/todo/:id'</span><span style="background:white;color:black;">, { id: </span><span style="background:white;color:#a31515;">'@id' </span><span style="background:white;color:black;">}, { update: { method: </span><span style="background:white;color:#a31515;">'PUT' </span><span style="background:white;color:black;">} });
});

</span><span style="background:white;color:blue;">var </span><span style="background:white;color:black;">ListCtrl = </span><span style="background:white;color:blue;">function </span><span style="background:white;color:black;">($scope, $location, Todo) {
    $scope.items = Todo.query();
};</span></pre>
<p>$resource is a function provided by AngularJS that creates an object for accessing a REST API. We use a factory method so that we can reuse the object without it getting recreated every time. Note that we also had to add a parameter to ListCtrl in order to have access to this object.</p>
<p>At this point, you should be able to view the list in your browser.</p>
<p><a href="http://jphoward.files.wordpress.com/2013/01/image8.png"><img style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border-width:0;" title="image" alt="image" src="http://jphoward.files.wordpress.com/2013/01/image_thumb8.png?w=611&#038;h=276" width="611" height="276" border="0" /></a></p>
<p>It’s interesting to note that all the html files are entirely static – the only thing that’s dynamic is the JSON sent by the web API.</p>
<p>That’s the end of Part 1 of this walkthrough. In the next part, we’ll add sorting, searching, and pagination to the list.</p>
<p><em>Continued in <a href="http://jphoward.wordpress.com/2013/01/04/end-to-end-web-app-in-under-an-hourpart-2/">Part 2</a>.</em></p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/jphoward.wordpress.com/105/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/jphoward.wordpress.com/105/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=jphoward.wordpress.com&#038;blog=460421&#038;post=105&#038;subd=jphoward&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://jphoward.wordpress.com/2013/01/04/end-to-end-web-app-in-under-an-hour/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/1172fce7691410ce1b50830aa1ad44a0?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">jphoward</media:title>
		</media:content>

		<media:content url="http://jphoward.files.wordpress.com/2013/01/image_thumb.png" medium="image">
			<media:title type="html">image</media:title>
		</media:content>

		<media:content url="http://jphoward.files.wordpress.com/2013/01/image_thumb1.png" medium="image">
			<media:title type="html">image</media:title>
		</media:content>

		<media:content url="http://jphoward.files.wordpress.com/2013/01/image_thumb2.png" medium="image">
			<media:title type="html">image</media:title>
		</media:content>

		<media:content url="http://jphoward.files.wordpress.com/2013/01/image_thumb3.png" medium="image">
			<media:title type="html">image</media:title>
		</media:content>

		<media:content url="http://jphoward.files.wordpress.com/2013/01/image_thumb4.png" medium="image">
			<media:title type="html">image</media:title>
		</media:content>

		<media:content url="http://jphoward.files.wordpress.com/2013/01/image_thumb5.png" medium="image">
			<media:title type="html">image</media:title>
		</media:content>

		<media:content url="http://jphoward.files.wordpress.com/2013/01/image_thumb6.png" medium="image">
			<media:title type="html">image</media:title>
		</media:content>

		<media:content url="http://jphoward.files.wordpress.com/2013/01/image_thumb7.png" medium="image">
			<media:title type="html">image</media:title>
		</media:content>

		<media:content url="http://jphoward.files.wordpress.com/2013/01/image_thumb8.png" medium="image">
			<media:title type="html">image</media:title>
		</media:content>
	</item>
		<item>
		<title>$40/month to send my email&#8211;are you serious?</title>
		<link>http://jphoward.wordpress.com/2011/11/08/40month-to-send-my-emailare-you-serious/</link>
		<comments>http://jphoward.wordpress.com/2011/11/08/40month-to-send-my-emailare-you-serious/#comments</comments>
		<pubDate>Tue, 08 Nov 2011 04:19:59 +0000</pubDate>
		<dc:creator>jphoward</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">https://jphoward.wordpress.com/2011/11/08/40month-to-send-my-emailare-you-serious/</guid>
		<description><![CDATA[The Kaggle web site needs to send emails from time to time – for example when confirming new users’ email addresses. Sending directly from a web server is not generally a good idea; even if you’ve taken the steps to set up DKIM, senderid, etc, you still have the problem that your IP isn’t a [&#8230;]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=jphoward.wordpress.com&#038;blog=460421&#038;post=86&#038;subd=jphoward&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
				<content:encoded><![CDATA[<p>The Kaggle web site needs to send emails from time to time – for example when confirming new users’ email addresses. Sending directly from a web server is not generally a good idea; even if you’ve taken the steps to <a href="http://www.codinghorror.com/blog/2010/04/so-youd-like-to-send-some-email-through-code.html">set up DKIM, senderid, etc</a>, you still have the problem that your IP isn’t a reputed email sender. It’s also likely that at some point some bad apple on your IP block will ruin the reputation for all their neighbors.</p>
<p>So instead, I decided to use a mail sending service. Here’s some examples, along with their pricing for their cheapest account:</p>
<ul>
<li><a href="http://postmarkapp.com/pricing">Postmark</a>: $15 / 10,000 messages</li>
<li><a href="https://www.socketlabs.com/od/signup">Socketlabs</a>: $40/month (max 10,000 messages)</li>
<li><a href="http://mailgun.net/pricing">Mailgun</a>: </li>
<li><a href="http://www.smtp.com/">SMTP.com</a>: $27/month (max 10,000 messages)</li>
</ul>
<p>Wo. That seems like a lot. Is it really so hard to send mail? Actually, no. Here’s a crazy option:</p>
<ul>
<li><a href="https://www.fastmail.fm/pages/fastmail/docs/pricingtbl.html">FastMail</a>: $3/month (max 2,000 messages <strong>per hour -</strong>That’s up to 1,500,000 per month!)</li>
</ul>
<p>And BTW that FastMail option also gives you a bunch of other stuff you may find useful (e.g. host and manage 50 domains, 2GB file storage, 10GB IMAP storage…)</p>
<p>I founded FastMail back in 1999 (I sold it to Opera a couple of years back and don’t work there any more) and worked hard to make the infrastructure efficient. However I’m surprised that folks building much more focussed tools today aren’t able to do it much cheaper. I know the focussed tools I’ve listed have some extra features (such as an HTTP API), but I don’t see why that should increase the unit price substantially. </p>
<p>What do you think is the reason for this difference?</p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/jphoward.wordpress.com/86/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/jphoward.wordpress.com/86/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=jphoward.wordpress.com&#038;blog=460421&#038;post=86&#038;subd=jphoward&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://jphoward.wordpress.com/2011/11/08/40month-to-send-my-emailare-you-serious/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/1172fce7691410ce1b50830aa1ad44a0?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">jphoward</media:title>
		</media:content>
	</item>
		<item>
		<title>Kaggle&#8217;s Nick Gruen on ABC Radio</title>
		<link>http://jphoward.wordpress.com/2011/02/21/kaggles-nick-gruen-on-abc-radio/</link>
		<comments>http://jphoward.wordpress.com/2011/02/21/kaggles-nick-gruen-on-abc-radio/#comments</comments>
		<pubDate>Mon, 21 Feb 2011 07:25:04 +0000</pubDate>
		<dc:creator>jphoward</dc:creator>
				<category><![CDATA[kaggle]]></category>

		<guid isPermaLink="false">https://jphoward.wordpress.com/2011/02/21/kaggles-nick-gruen-on-abc-radio/</guid>
		<description><![CDATA[I enjoyed listening to Kaggle’s chairman, Nick Gruen, interview by James O&#8217;Loughlin on ABC radio. Here’s the full interview, in which Nick discusses the power of predictive modelling, the amazing results achieved by data mining competitions, and the upcoming $3m Heritage Health Prize. Click the triangle below to listen.<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=jphoward.wordpress.com&#038;blog=460421&#038;post=59&#038;subd=jphoward&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
				<content:encoded><![CDATA[<p>I enjoyed listening to <a href="http://www.kaggle.com">Kaggle</a>’s chairman, <a href="http://en.wikipedia.org/wiki/Nicholas_Gruen">Nick Gruen</a>, interview by <a href="http://www.abc.net.au/profiles/content/s1863321.htm">James O&#8217;Loughlin</a> on ABC radio. Here’s the full interview, in which Nick discusses the power of predictive modelling, the amazing results achieved by data mining competitions, and the upcoming $3m <a href="http://www.heritagehealthprize.com/">Heritage Health Prize</a>.</p>
<p><i>Click the triangle below to listen.</p>
<p></i> <span style='text-align:left;display:block;'><p>				<object id='wp-as-59_1-flash' type='application/x-shockwave-flash' data='http://s0.wp.com/wp-content/plugins/audio-player/player.swf' width='290' height='24'>
					<param name='movie' value='http://s0.wp.com/wp-content/plugins/audio-player/player.swf' />
					<param name='FlashVars' value='bg=0xF8F8F8&amp;leftbg=0xEEEEEE&amp;lefticon=0x666666&amp;rightbg=0xCCCCCC&amp;rightbghover=0x999999&amp;righticon=0x666666&amp;righticonhover=0xFFFFFF&amp;text=0x666666&amp;slider=0x666666&amp;track=0xFFFFFF&amp;border=0x666666&amp;loader=0x9FFFB8&amp;soundFile=http%3A%2F%2Fjhoward.fastmail.fm%2Fmedia%2Fkaggle%2FNickGruenOnAbc.mp3' />
					<param name='quality' value='high' />
					<param name='menu' value='false' />
					<param name='bgcolor' value='#FFFFFF' />
					<param name='wmode' value='opaque' />
					Download: <a href="http://jhoward.fastmail.fm/media/kaggle/NickGruenOnAbc.mp3">NickGruenOnAbc.mp3</a><br />
				</object></p></span></p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/jphoward.wordpress.com/59/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/jphoward.wordpress.com/59/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=jphoward.wordpress.com&#038;blog=460421&#038;post=59&#038;subd=jphoward&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://jphoward.wordpress.com/2011/02/21/kaggles-nick-gruen-on-abc-radio/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
<enclosure url="http://jhoward.fastmail.fm/media/kaggle/NickGruenOnAbc.mp3" length="5065632" type="audio/mpeg" />
	
		<media:content url="http://1.gravatar.com/avatar/1172fce7691410ce1b50830aa1ad44a0?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">jphoward</media:title>
		</media:content>

		<media:content url="http://jhoward.fastmail.fm/media/kaggle/NickGruenOnAbc.mp3" medium="audio">
			<media:player url="http://jphoward.wordpress.com/wp-content/plugins/audio-player/player.swf?soundFile=http://jhoward.fastmail.fm/media/kaggle/NickGruenOnAbc.mp3" />
		</media:content>
	</item>
		<item>
		<title>Visualising Time Series</title>
		<link>http://jphoward.wordpress.com/2010/10/18/visualising-time-series/</link>
		<comments>http://jphoward.wordpress.com/2010/10/18/visualising-time-series/#comments</comments>
		<pubDate>Mon, 18 Oct 2010 10:14:47 +0000</pubDate>
		<dc:creator>jphoward</dc:creator>
				<category><![CDATA[math]]></category>

		<guid isPermaLink="false">https://jphoward.wordpress.com/2010/10/18/visualising-time-series/</guid>
		<description><![CDATA[Over at Kaggle there’s an interesting competition involving time series prediction. Since I’ve never done much with time series before, I figured I’d give it a go. It’s a good chance to learn something new, and have some fun in the process. I decided to try a new (for me) approach to the analysis, which [&#8230;]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=jphoward.wordpress.com&#038;blog=460421&#038;post=47&#038;subd=jphoward&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
				<content:encoded><![CDATA[<p>Over at <a href="http://kaggle.com">Kaggle</a> there’s an interesting competition involving time series prediction. Since I’ve never done much with time series before, I figured I’d give it a go. It’s a good chance to learn something new, and have some fun in the process.</p>
<p>I decided to try a new (for me) approach to the analysis, which is to use general purpose programming tools for all the data analysis, including import/export, visualization, modelling, etc. My hypothesis was that with powerful languages which strong functional capabilities, I would be able to achieve results just as quickly as using a dedicated tool (like <a href="http://www.r-project.org">R</a>), plus have the benefits of a “proper” programming language (e.g. strong language design, excellent IDE, speed, etc).</p>
<p>My first approach was to use Javascript to chart the 400-odd time series in each category (quarterly, and monthly). It turns out that it’s only about 10 lines of code, plus a cut-and-paste of a function from Google Charts docs:</p>
</p>
<pre style="width:458px;height:242px;">var content = $(&quot;#content&quot;);
for (var i = 0; i &lt; qdata.length; i++) {
    var url = chartUrl(qdata[i], i);
    content.append('' + '&lt;img src=&quot;' + url + '&quot; /&gt; ');
}

function chartUrl(data, i) {
    var res = &quot;<a href="http://chart.apis.google.com/chart?chs=440x220&amp;cht=lc&amp;chtt=">http://chart.apis.google.com/chart?chs=440x220&amp;cht=lc&amp;chtt=</a>&quot; + i +    &quot;&amp;chd=&quot;;
    var maxval = Math.max.apply(Math, data);
    return res + extendedEncode(data, maxval);
}</pre>
<p>The result is <a href="http://jhoward.fastmail.fm/test/KaggleTimeSeries2/">this page</a>, which is a fast and easy way to see all the time series at once (click one of the buttons on that page to see the data). If you’re interested in seeing how it works, feel free to look at the JavaScript linked from that page.</p>
<p>Next, I moved to C#, and found that the functional capabilities added in .Net 3.5 (LINQ et al), and the automatic parallelization added in .Net 4, made it a real pleasure to work with. I also used <a href="https://www.glowcode.com/">GlowCode</a> to profile my algorithms as I went, which made it easy to keep them running fast. I used the free Microsoft Chart components, plus a FlowLayoutPanel, to easily generate visualizations. For example, here’s a (subset of a) visualization showing in-sample predictions (blue) vs actual data (orange):</p>
<p><a href="http://jphoward.files.wordpress.com/2010/10/tsmetrics2.png"><img style="border-bottom:0;border-left:0;display:inline;border-top:0;border-right:0;" title="TsMetrics" border="0" alt="TsMetrics" src="http://jphoward.files.wordpress.com/2010/10/tsmetrics_thumb2.png?w=554&#038;h=288" width="554" height="288" /></a> </p>
<p><em>(click image to view full size)</em></p>
<p>In this example, it’s easy to see some models that aren’t ideal: series 2 shows that the underlying trend is not matching closely enough in this instance, and series 5 shows the problem of using additive seasonality in appropriately. You can see that adding the series number and a fitness metric to each chart makes it easier to work with.</p>
<p>Here’s a visualization showing out-of-sample predictions for a different model:</p>
<p><a href="http://jphoward.files.wordpress.com/2010/10/tspredict2.png"><img style="border-bottom:0;border-left:0;display:inline;border-top:0;border-right:0;" title="TsPredict" border="0" alt="TsPredict" src="http://jphoward.files.wordpress.com/2010/10/tspredict_thumb2.png?w=554&#038;h=286" width="554" height="286" /></a> </p>
<p><em>(click image to view full size)</em></p>
<p>In this case we can confirm visually that the models have reasonable-looking predictions.</p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/jphoward.wordpress.com/47/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/jphoward.wordpress.com/47/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=jphoward.wordpress.com&#038;blog=460421&#038;post=47&#038;subd=jphoward&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://jphoward.wordpress.com/2010/10/18/visualising-time-series/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/1172fce7691410ce1b50830aa1ad44a0?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">jphoward</media:title>
		</media:content>

		<media:content url="http://jphoward.files.wordpress.com/2010/10/tsmetrics_thumb2.png" medium="image">
			<media:title type="html">TsMetrics</media:title>
		</media:content>

		<media:content url="http://jphoward.files.wordpress.com/2010/10/tspredict_thumb2.png" medium="image">
			<media:title type="html">TsPredict</media:title>
		</media:content>
	</item>
	</channel>
</rss>
