Tracking dirty objects in AngularJS

Tracking if an object is changed or not in AngularJS is quite easy but is also part of the UI so not always completely obvious. If you want to see if there are changes the $scope or the model will not tell you. Instead you need to take a look at the ngForm FormController. It has a $dirty flag that will tell you if an object is dirty or not. Saving that to the model itself is really easy, just use an ngForm directive, and the form element is automatically an ngForm directive, and the FormController will be added to … Continue reading Tracking dirty objects in AngularJS

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

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

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

Unit testing AngularJS HTTP requests in the RAW Stack

In the previous blog post we created some basic unit tests for the AngularJS movies controller. As I mentioned there was one set of tests missing and that was around the controller doing HTTP requests to the WebAPI backend. In a unit test typically don’t want to do those test for real. First of all we don’t want to take a dependency on some external state and equally important we don’t want the overhead of those requests. Fortunately AngularJS makes it easy to fake those requests and test the controller bits in isolation.   The $httpBackend service One of the … Continue reading Unit testing AngularJS HTTP requests in the RAW Stack

Unit testing the AngularJS code in the RAW Stack

In the previous post we refactored the JavaScript code for our AngularJS controller a bit to make it more testable. However we didn’t actually start writing any tests yet so lets create a few tests.   The AngularJS controller under test Just as a quick reminder the AngularJS controller in our previous code was as follows 1: (function () { 2: ‘use strict'; 3: var module = angular.module("myApp", []); 4:  5: module.controller("moviesCtrl", function ($scope, $http) { 6: $http.get("/api/movies").then(function (e) { 7: $scope.movies = e.data; 8: }); 9: 10: $scope.newMovie = { Title: "" }; 11: $scope.addMovie = function () { … Continue reading Unit testing the AngularJS code in the RAW Stack

Refactoring the AngularJS code in the RawStack

In the previous post I created a minimal skeleton app to pass some movie data from RavenDB through a WebAPI endpoint to an AngularJS frontend and also to save new movies back to RavenDB. The code was, as I mentioned in that post, really minimal and by no means a good way of writing it. So in this post I am going to improve on the AngularJS part. It still will not be perfect but better.   Inline JavaScript There are cases where inline JavaScript mixed with you markup makes sense but as a general rule it should be avoided. … Continue reading Refactoring the AngularJS code in the RawStack