Angular.JS

Angular JS is an open source Javascript MVC-framework developed and maintained by Google. Angular allows a declarative style of UI building by making it possible to extend the HTML vocabulary. Angular makes it easy to build modularized applications, where DOM manipulation is fully separated from application logic. This results in code that is easily testable and extendable.

Perhaps the most famous feature of Angular is the two-way data binding that makes it extremely easy to keep views in sync with data in the controller. Controller functions get access to view through a special Angular service called $scope that can be injected to any controller:

var myController = function($scope) {
  $scope.text = "World!";
};
myController = ($scope) ->
  $scope.text = "World!"

An HTML view can then render the value of a variable in $scope by using the 'double mustache' syntax:

<h1>Hello {{text}}</h1>

Varibales in $scope can also be bound to form controls such as a text input field: when the user types text into the field, the associated $scope variable (such as $scope.inputText) gets updated in all controllers and thus propagated to all views that use it.

Supersonic AngularJS Service

Despite being framework agnostic, Supersonic has been built to be fully compatible with Angular JS. In particular, this means that within all the callback functions of various Supersonic API services, one can directly update the application $scope:

// Note that the "supersonic" Angular service is injected
// into the controller
var myController = function($scope, supersonic) {
  var labels = {
    buttonLabels: ["Yes", "No"]
  };

  supersonic.ui.dialog.confirm("Like Angular?", labels).then( function(answer) {
    if ( answer===0 ) {
      $scope.answer = "Yes";
    }
    else {
      $scope.answer = "No";
    }
  });
};
# Note that the "supersonic" Angular service is injected
# into the controller
myController = ($scope, supersonic) ->
  labels =
    buttonLabels: ["Yes", "No"]

  supersonic.ui.dialog.confirm("Like Angular?", labels).then (answer) ->
    if ( answer==0 )
      $scope.answer = "Yes"
    else
      $scope.answer = "No"

Without the supersonic Angular Service, you need to explicitly ask Angular to run the $digest-loop (which propagates updates to $scope to the whole app) by calling $scope.$apply().

Note that some supersonic.* functions, such as those using streams still require a manual $scope.$apply().

Learn more

Learn more about Angular: