Skip to content

Instantly share code, notes, and snippets.

@kikofernandez
Last active December 16, 2015 11:49
Show Gist options
  • Save kikofernandez/5429888 to your computer and use it in GitHub Desktop.
Save kikofernandez/5429888 to your computer and use it in GitHub Desktop.
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…
<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>
(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))
<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>
(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))
(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"))
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();
}
}
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;
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment