we are going to show how to use and forge a friendship between the back-end and front-end. For the back-end, we are going to use Clojure (Compojure + Hiccup + Ring + Sandbar), and for the front-end, we are going to use AngularJS. We are going to use AngularJS for building small mini-applications that do something very specific, call it domain dr…

detail.html

<label>Título: </label>
<input type="text" name="titulo" ng-model="question.title">

<label>Respuestas: </label>

<ul ng-repeat="answer in answers" ng-model="answers">
  <li>{{answer.title}}</li>
</ul>

<input type="text" name="answer" ng-model="answer">
<button ng-click="createAnswer()">Añadir respuesta</button>
<button ng-click="saveAnswer()">Guardar</button>

handler.clj

(ns example.handler
  (:use compojure.core)
  (:require [compojure.handler :as handler]
            [compojure.route :as route]
            [ring.middleware.params :as params]
            [cassiopeia.controllers.private :as private]
            [sandbar.stateful-session :as session]))


(defn- stateful-route
  "Calls the routeFn adding stateful session."
  [routeFn]
   (-> routeFn
      session/wrap-stateful-session 
      params/wrap-params))

;; Application routes, just simple website
(defroutes app-routes
  private/routes
  (route/resources "/")
  (route/not-found "Not Found"))

(def app
  (-> app-routes stateful-route handler/site))

list.html

<ul class="unstyled">
  <li ng-repeat="question in questions">
    <span>{{ question.title }}</span>
        
    <ul ng-repeat="answer in question.answers">
      {{ answer.title }}
    </ul>
  </li>
</ul>
<a href="#/new">Añadir pregunta</a>
<a ng-click="saveQuestionnaire()">Guardar</a>

private.clj

(ns example.controllers.private
  (:use [compojure.core :only (defroutes GET POST context)])
  (:require [cassiopeia.views.privateview :as views]
            [cassiopeia.controllers.urls :as urls]))

(defn index []
  (views/welcome))

(defn- create-questionnaire []
  (views/new-questionnaire))

(defroutes controller-routes
  (GET urls/welcome [] (index))
  (GET urls/questionnaire-new [] (create-questionnaire)))

(defroutes routes
  (context "/user" [] controller-routes))

privateview.clj

(ns example.views.privateview
  (:require [cassiopeia.views.layout :as layout]
            [hiccup.page :as hpage]))

(def title-new-questionnaire "Create new questionnaire")

(defn- create-questionnaire-form 
  "Application that builds an online questionnaire"
  []
  (hpage/html5
   [:div {:ng-app "project"}
    (hpage/include-js "https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js")
    (hpage/include-js "https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular-resource.min.js")
    (hpage/include-js "/js/angular/questionnaire.js")
    (hpage/include-js "/js/angular/questionnaireService.js")
    [:div {:ng-view ""}]]))

(defn new-questionnaire []
  (layout/common title-new-questionnaire
                 (create-questionnaire-form)))

(defn welcome []
  (hpage/html5
    [:div {:class "content" :id "content" }]
      "Hello world, there is no AngularJS App here, just plain html"))

questionnaire.js

angular.module('project', ['questionnaireService']).
  config(function($routeProvider) {
    $routeProvider.
      when('/', {controller:QuestionCtrl, templateUrl:'/html/questionnaires/list.html'}).
      when('/new', {controller:EditCtrl, templateUrl:'/html/questionnaires/detail.html'});
  });

function QuestionCtrl($scope, QuestionnaireDI){
  $scope.questions = QuestionnaireDI.query();

  $scope.saveQuestionnaire = function(){
    console.log('Did you call me?');
    QuestionnaireDI.sendQuestionnaire();
  }
}

function EditCtrl($scope, $location, QuestionnaireDI){
  
  $scope.answer = '';
  $scope.answers = [];
  $scope.question = {
    title: '',
    description: ''
  };

  $scope.init = function(){
    $scope.answer = '';
    $scope.answers = [];
    $scope.question = {
      title: '',
      description: ''
    };
  }

  $scope.createAnswer = function(){
    $scope.answers.push({ title: $scope.answer});
    $scope.answer = '';
  }

  $scope.saveAnswer = function(){
    QuestionnaireDI.saveQuestionnaire($scope.question.title, $scope.answers);
    $location.path('/');
    $scope.init();
  }
}

questionnaireService.js

angular.module('questionnaireService', ['ngResource']).
  factory('QuestionnaireDI', function($http, $window){
    //var questions =  []; 
    var questions = [
      {id: 1, title:'Do you like your job?', answers: [{title: 'Yes'}, {title: 'No'}]},
      {id: 2, title:'How many languages do you speak?', answers: [{title: '1'}, {title: '2'}, {title: '> 2'}]},
    ];
    // questions = [
    //    { question: 'title', answers: [{title: '', value: ''}]}
    // ]
    var handler = {};
    handler.query = function(){
      return questions;
    };

    handler.saveQuestionnaire = function(title, answers){
      questions.push({'title': title, 'answers': answers});
    };

    handler.sendQuestionnaire = function(){
      $http.post("/user/questionnaire/save", questions)
        .success(function(){ console.log('success'); $window.location.href = '/user/questionnaire/save'; })
        .error(function(){ console.log('failure'); $window.location.href = '/user/questionnaire/save'; });
    };

    handler.getQuestionnaire = function(){
      return question;
    };

    return handler;
  })