AngularJS meets Drupal

Get an idea what AngularJS is and how to combine it with Drupal

Cases in the real world

Footnote: This site only lists showcases done in combination with Drupal. Checkout a lot more AngularJS showcases on https://builtwith.angularjs.org/.

HTML

<div ng-app ng-controller="ShowcaseCtrl">
  <div ng-repeat="showcase in showcases">
    <h3>{{showcase.title}}</h3>
    <a ng-href="{{showcase.url}}">{{showcase.url}}</a>
    <p ng-bind-html-unsafe="showcase.description"></p>
  </div>
</div>
 
<p>Footnote: This site only lists showcases done in combination with Drupal. Checkout a lot more AngularJS showcases on <a href="https://builtwith.angularjs.org/">https://builtwith.angularjs.org/</a>.</p>

JavaScript

<script>
function ShowcaseCtrl($scope) {
$scope.showcases = [
{title: 'EC Red Bull Salzburg', url: 'http://ecrbs.redbulls.com/', description: 'Full Angular usage (incl. dynamic routing), static output for seo and social services served via <a href="https://prerender.io/">Prerender.io</a>.'},
{title: 'DrupalCamp Vienna 2013', url: 'http://2013.drupalcamp.at/', description: 'Angularized sites:<br><a href="http://2013.drupalcamp.at/attendees">Attendees</a> (Progressive Enhancement)<br><a href="http://2013.drupalcamp.at/selectedsessions">Selected Sessions</a> (Progressive Enhancement)<br><a href="http://2013.drupalcamp.at/informationdisplays">Information Displays</a>'},
{title: 'Stiegl Gastro-Werkstatt', url: 'http://www.stiegl-gastrowerkstatt.at/', description: 'AngularJS parts during creation of menu cards and at some points in the backend.'},
{title: 'Canine Footwear', url: 'http://www.caninefootwear.com/shop', description: 'AngularJS used on the shop page only as full products+cart+checkout single page app.'},
];
}
</script>