Beautifully Preprocessed

Jade/Coffeescript/Sass/Bootstrap/AngularJS

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jade/1.3.1/jade.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.min.css">
// We're templating in Jade.
div(ng-controller="testApp")
    header.bar.bar-nav
      a(href="")
         .icon.icon-left-nav.pull-left
      h1.title {{title}}
    .content(ng-controller="testApp")
        ul.table-view
            li.table-view-cell(ng-repeat="number in numbers")
                a.navigate-right(href="#") Hui {{ number }}
    nav.bar.bar-tab
        a.tab-item.active(href='#')
            span.icon.icon-home
            span.tab-label Home
          a.tab-item(href='#')
            span.icon.icon-person
            span.tab-label Profile
          a.tab-item(href='#')
            span.icon.icon-star-filled
            span.tab-label Favorites
          a.tab-item(href='#')
            span.icon.icon-search
            span.tab-label Search
          a.tab-item(href='#')
            span.icon.icon-gear
            span.tab-label Settings

SCSS

body{
    .title{
        font-weight: bold;
        &:hover{
            color: #666;
            cursor: default;
        }
    }
}

CoffeeScript

# Coding in coffeescript

# No need for jQuery.
$ = (e) -> return document.querySelectorAll(e)

# Replace the body contents with the compiled template.
body = document.body
body.innerHTML = jade.compile(body.innerHTML.trim())()

# Declare our controller function.
@testApp = ($scope) ->
    $scope.numbers = [1,2,3,4,5]
    $scope.title = "Jade/Angular Test"
    
# Jump start angular.
angular.bootstrap(document)