AngularJS meets Drupal

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

Intro

AngularJS introduces itself to Drupal

A: Hello Drupal, my name is AngularJS!
D: Hello AngularJS, what can you do for me?
A: Drupal I tell you, I can give you magic.
D: Really? Show me!

Change personalities?

HTML

<div ng-app>
<div ng-controller="IntroCtrl">
 
<h2>{{myself}} introduces itself to {{opposite}}</h2>
 
<p>
{{myself | limitTo:1}}: Hello {{opposite}}, my name is {{myself}}!<br>
{{opposite | limitTo:1}}: Hello {{myself}}, what can you do for me?<br> 
{{myself | limitTo:1}}: {{opposite}} I tell you, I can give you magic.<br>
{{opposite | limitTo:1}}: Really? Show me!
</p>
 
<label><input type="checkbox" ng-model="more" />
Change personalities?</label>
 
<div ng-show="more"> 
  <div>Myself<br><input ng-model="myself" type="text" /></div>
  <div>Opposite:<br><input ng-model="opposite" type="text" /></div>
</div>
 
</div><!--IntroCtrl End-->
</div><!--NgApp End-->

JavaScript

<script>
function IntroCtrl($scope) {
  $scope.myself = "AngularJS";
  $scope.opposite = "Drupal";
}
</script>