I started writing an Angular application to intereact with an API I have produced recently. The Angular app is compiled as a static site with Jekyll. I immediately ran into an issue with Angular. None of my expressions were showing up. I realized it was because Liquid which is included with Jekyll uses the same expression tags as Angular: {{ myVariable }}. This meant the Angular expressions were not making it as raw text into the final template as they were being caught by Liquid.

I started by looking to see if there was an easy way to deactivate Liquid inside Jekyll as I had no intention of using it. Without monkey patching the rendering process it seemed like I was stuck with the Liquid processing.

All is not lost though. A quick search returned an option to change the expression symbols for Angular:

Coffeescript:

@myApp = angular.module('myApp', [])

@myApp.config ['$interpolateProvider', ($interpolateProvider)->
  $interpolateProvider.startSymbol('{(').endSymbol(')}')
]

Javascript:

var myapp;
myApp = angular.module('myApp', []);

myApp.config([
  '$interpolateProvider', function($interpolateProvider) {
    return $interpolateProvider.startSymbol('{(').endSymbol(')}');
  }
]);

This allowed me to now use {( myVariable )} for Anuglar expressions and it does not get caught in the liquid filters.