FAQ | AngularJS meets Drupal

Answers you wanna know

These curly brackets - is that {{twig}}?
A: No, wer're client side direct in the browser - don't mess that up. But yes it's a substitution.

And you type that direct in HTML? Why so easy, I am used to this complex templating stuff.
A: One of my authors explain it like this: AngularJS is not just a JavaScript framework, it's what HTML would be if we invent it today.

How can we work together?
A: You give me data, and I will display it.

Nice! But I can do that myself.
A: But you are static. You probably won't need me for a static mini-website, but in many other cases.

Will you explain me everything today?.
A: No, I will give you some ideas, check out http://angularjs.org/ to learn me from scratch. But one more tip: Ensure you use jQuery version >= 1.6 !

HTML

<div ng-app="Faq">
<div ng-controller="FaqListCtrl">
  <div ng-repeat="faq in faqs" style="margin-bottom: 1em;">
  <strong>{{faq.question}}</strong><br>
  A: <span ng-bind-html="faq.answer | linky"></span>
  </div>
</div><!--FaqListCtrl-->
<div ng-controller="FaqAddCtrl">
  <form name="addform">
    <input ng-model="question" required placeholder="Question" type="text" ><br>
    <input ng-model="answer" placeholder="Answer" type="text"><br>
    <button type="submit" ng-disabled="addform.$invalid" ng-click="add();">Add</button>
  </form>
</div><!--FaqAddCtrl-->
</div><!--AppEndl-->

JavaScript

<script>
angular.module('Faq', ['ngSanitize'])
.service('FaqData', function() {
  this.faqs = [
    {question: "These curly brackets  - is that {{twig}}?", answer: "No, wer're client side direct in the browser - don't mess that up. But yes it's a substitution."},
    {question: "And you type that direct in HTML? Why so easy, I am used to this complex templating stuff.", answer: "One of my authors explain it like this: AngularJS is not just a JavaScript framework, it's what HTML would be if we invent it today."},
    {question: "How can we work together?", answer: "You give me data, and I will display it."},
    {question: "Nice! But I can do that myself.", answer: "But you are static. You probably won't need me for a static mini-website, but in many other cases."},
    {question: "Will you explain me everything today?.", answer: "No, I will give you some ideas, check out http://angularjs.org/ to learn me from scratch. But one more tip: Ensure you use jQuery version >= 1.6 !"}
  ];
})
.controller('FaqListCtrl', function($scope, FaqData) {
  $scope.faqs = FaqData.faqs;
})
.controller('FaqAddCtrl', function($scope, FaqData) {
  $scope.add = function() {
    FaqData.faqs.push({question: $scope.question, answer: $scope.answer});
    $scope.question = '';
    $scope.answer = '';
  };
})
;
</script>