SDC 2014 – Slides and Samples
[slideshare id=42261188&doc=therawstack-141202084110-conversion-gate02] Online demo: http://rawstack.azurewebsites.net/ Source code: https://github.com/mauricedb/SDC-2014 https://github.com/mauricedb/RawStack
RawStack
AngularJS and loading data over HTTP
When creating an AngularJS controller that depends on some data that needs to be loaded over HTTP it’s really tempting and easy to just inject the $http service into your controller and load the data from there. And that is exactly what I did with the moviesListCtrl. But easy and convenient doesn’t make it the best way to do so! Services: a better approach to HTTP I strongly believe that a controller, regardless of AngularJS, MVC or WebAPI, should contain as little logic as possible. It should just be the spider in the web and delegate to others when … Continue reading AngularJS and loading data over HTTP
Adding an AngularJS AJAX busy indicator to the RAW stack
With the typical AngularJS SPA application there are lots of AJAX calls going on to retrieve data from the server. This sometimes results in a view that appears empty to the user. The page is rendered without any data as that is still being loaded. This also happens on the movie page in the demo application. While technically completely understandable it can be confusing to an end user not seeing the expected data. While we can’t make the data appear any faster we can show the fact that the application is doing something in the background so the user knows … Continue reading Adding an AngularJS AJAX busy indicator to the RAW stack
WebAPI, PascalCase and camelCase
In the RAW stack the ASP.NET WebAPI plays a big part in exposing data to the client and accepting data back in. This does mean that it is also the boundary of the AngularJS, or JavaScript, and C# world. And both of these worlds have their own, not always compatible standards. In this case I am referring to the normal way of naming properties on objects. In C# this is normally done using PascalCase and in JavaScript this is normally done using camelCase. Bridging the gap It turns out that being able to use the normal conventions on each … Continue reading WebAPI, PascalCase and camelCase
Using Bootstrap to make the movies list responsive
The current movie list looks quite nice on a desktop browser but leaves something to be desired on a tablet or phone. And as this is something I think should work just as well it is high time to fix this. One of the reasons I think every web application should work equally well on a tablet as on a desktop browser is that they are so frequently used. You might argue that a phone is a very limited device screen wise, and that would be true, but a tablet is becoming the default browser for quite a few people. … Continue reading Using Bootstrap to make the movies list responsive
Index of posts on the RAW stack
Introducing the RAW stack Creating a basic skeleton with the RAW stack Refactoring the AngularJS code in the RawStack Unit testing the AngularJS code in the RAW Stack Unit testing AngularJS HTTP requests in the RAW Stack Unit testing the WebAPI controller and RavenDB database in the RAW stack Using dependency injection with WebAPI in the RAW stack Paging data using AngularJS and RavenDB in the RAW Stack Using Bootstrap with the RAW stack The RAW stack and filtering movies by genre Using Bootstrap to make the movies list responsive WebAPI, PascalCase and camelCase Adding an AngularJS AJAX busy indicator … Continue reading Index of posts on the RAW stack
The RAW stack and filtering movies by genre
One of the options on the movie list was a set of buttons with each movies genres. This list is nice to see what a movie is about but also rather useful to filter movies on. It turns out filtering documents on one or more tags in a collection of tags is rather easy to do using RavenDB. Using RavenDB’s LuceneQuery RavenDB uses Lucene for it’s indexing capabilities making it very capable for querying. Originally we where using the standard RavenDB query capability but now we will switch to using the LuceneQuery(). Form the AngularJS client we can pass … Continue reading The RAW stack and filtering movies by genre
Using Bootstrap with the RAW stack
Using RavenDB, AngularJS and WebAPI gives us an awesome amount of capability when it comes to programming but it is also nice to create a good looking application. Now like a lot of other developers I am not a skilled graphical or UX designer so this is definitely somewhere I can use some help. Fortunately the Bootstrap CSS framework with its utilities is a great help. By just following a few basic rules it is perfectly possible to get a decent looking web application. And as Bootstrap includes a lot of responsive features it even works well on mobile devices. … Continue reading Using Bootstrap with the RAW stack
Paging data using AngularJS and RavenDB in the RAW Stack
So far loading and displaying some movies data has been pretty simple and straightforward. However something that was not immediately apparent was that not all movies in the database where shown. When opening the movies list there where just 128 movies visible and that was not all there was to show. In fact I have used the Rotten Tomatoes API to preload the database with more than 1000 movies and even though I never added a filter anywhere most of these didn’t show up. So what is going on? RavenDB = Safe by default RavenDB really is an awesome … Continue reading Paging data using AngularJS and RavenDB in the RAW Stack
Using dependency injection with WebAPI in the RAW stack
In the previous blog post we added some unit tests that tested the WebAPI and also included the RavenDB storage behind it. As I explained the recommendation is not to use fakes or mocks but just to use the in memory variant of RavenDB during testing. However the WebAPI controller used a static RavenConfig.Store property to get to the RavenDB database. And that is the kind of hard coupling we would prefer not to have even if we don’t need to create a fake for our tests. Adding Ninject to do our server side dependency injections There are many … Continue reading Using dependency injection with WebAPI in the RAW stack