❰❰Jekyll and AngularJS

by Jesse Herrick

May 21, 2015

I love Jekyll, but I can’t use AngularJS with it by default. That’s why I created this nifty little plugin.

Without the plugin:

<div ng-controller="foo">
  <p>{{ bar }}</p>
</div>

Gets compiled into…

<div ng-controller="foo">
  <p></p>
</div>

That sucks because Angular isn’t precompiled like Jekyll. How do we fix this?

# _config.yml

gems:
  - jekyll-angular

And some HTML…

<div ng-controller="foo">
  {{ 'bar' | angular }}
</div>

Is compiled by Jekyll to…

<div ng-controller="foo">
  {{bar}} <!-- which is later dealt with by Angular -->
</div>

Like it?

Using GitHub Pages?

Since GitHub pages doesn’t allow plugins, try using the ng-bind directive instead of brackets.

<div ng-controller="foo">
  <span ng-bind="bar"></span> <!-- same as <span>bar</span> -->
</div>


Next post: Spring Musical: How to Succeed in Business Without Really Trying