Jade = HTML

Stylus = CSS

Coffeescript = JS

Angular

App = angular.module('App', ['ngRoute', 'ngCookies', 'ui.utils',
  'ui.bootstrap', 'angularMoment', 'ui.router',
  'angular-locker', 'angularFileUpload']
)

Concepts

State + Routing

App.config ($stateProvider, $urlRouterProvider) ->

    # Default to app page
    $urlRouterProvider.otherwise('/app/browse/')

    # Main web app states
    $stateProvider.state('app',
        url: '/app'
        templateUrl: '/partials/app.html'
    ).state('app.browse',
        url: '/browse/:jobId'
            views:
            viewA:
                templateUrl: '/partials/browse.html'
                controller: 'BrowseCtrl'
    ).state('app.matches',
        url: '/matches/:jobId'
        views:
            viewA:
                templateUrl: '/partials/matches.html'
                controller: 'MatchesCtrl'
    )

Directives

<hello-world/>

App.directive('helloWorld', function() {
    return {
        restrict: 'AE',
        scope: true,  // use a child scope that inherits from parent,
        replace: 'true',
        template: '<h3>Hello World!!</h3>',
        link: function(scope, elem, attrs) {
            elem.bind('click', function() {
                elem.css('background-color', 'white');
                scope.$apply(function() {
                  scope.color = "white";
                });
            });
            elem.bind('mouseover', function() {
                elem.css('cursor', 'pointer');
            });
        }
      };
});

Controllers + Services

Controller:
App.controller 'userProfileCtrl', ($scope, userProfileService) ->

    userProfileService.getProfile().success (data) ->
        $scope.profile = new UserProfile data

Service:
App.service 'userProfileService', ($rootScope, $http) ->
    getProfile = ->
        data =
            url: "#{$rootScope.apiUrl}/talent/"
            method: 'get'

        return $http(data)

Template:
div ng-controller="userProfileCtrl"
    | Name:
    {{ profile.name }}
    | Email:
    {{ profile.email }}