AngularJS and Coffeescript

1_readme.md

Run this example at 2880016.run-a-gist.herokuapp.com

application.coffee

app = angular.module("my-app", [])
app.directive "codeEmbed", ($http, $timeout) ->
  restrict: "E"
  scope: {}
  compile: (tElement, tAttrs) ->
    tElement.html "<pre><code class='#{tAttrs.class}' ng-bind='source'></code></pre>"
    (scope, element, attrs) ->
      $http.get(tAttrs.src).success (data) ->
        scope.source = data
        $timeout -> hljs.highlightBlock(element.children()[0])

@MyCtrl = ($scope, $location) ->
  $scope.gistUrl = ->
    "http://gist.github.com/#{$location.host().split('.')[0]}"

index.haml

!!! 5
%html(ng-app='my-app')
  %head
    %title AngularJS and Coffeescript
    %script(src='https://raw.github.com/coreyti/showdown/master/src/showdown.js')
    %script(src='http://code.angularjs.org/angular-1.0.0rc10.min.js')
    %script(src='http://softwaremaniacs.org/media/soft/highlight/highlight.pack.js')
    %script(src='/application.js')
    %link(href="http://softwaremaniacs.org/media/soft/highlight/styles/zenburn.css" media="screen" rel="stylesheet" type="text/css")
    %link(href="/screen.css" media="screen" rel="stylesheet" type="text/css")
  %body(ng-controller='MyCtrl')
    %h1 This is an example AngularJS app, using Coffeescript
    %p 
      These code blocks are being rendered using a custom directive 'code-embed'. All sources are being hosted
      %a(href ng-href="{{gistUrl()}}") in a Gist.
    %h2 The HTML

    / These are our custom Angular directives
    %code-embed(src="/index.html" class="html")
    %h2 The Coffeescript
    %code-embed(src="/application.coffee" class="coffeescript")
    %h3 The compiled JS (for comparison)
    %code-embed(src="/application.js" class="javascript")
    / 

    %p
      Fork and edit
      %a(href ng-href="{{gistUrl()}}")this Gist on Github
      then visit YOUR-NEW-GIST-ID.run-a-gist.herokuapp.com to run your own examples
    %p
      Served by
      %a(href='https://github.com/geelen/run-a-gist') run-a-gist
      by Glen Maddern
      %a(href="http://twitter.com/glenmaddern")@glenmaddern

screen.scss

body {
  background-color: #CCC;
  max-width: 640px;
  margin: 0 auto;
  font-family: Georgia;
  color: hsl(0, 0%, 10%);
  text-shadow: 0 1px 0 hsl(0, 0%, 80%);
  background: -webkit-linear-gradient(left, hsla(0, 0%, 0%, 0.25), hsla(0, 0%, 0%, 0.28), hsla(0, 0%, 0%, 0.22));
}

pre {
  text-shadow: none;
  overflow: auto;
}