angularjs

AngularJS

BasiC EXAMPLE

<!doctype html>

<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>




http://jsfiddle.net/api/post/library/pure/

Data Binding

How?

Watchers: Watch the changes on model and update the DOM

Listeners: Listen to DOM events and update the model

DiRECTIVES

Markers on a DOM element that tell AngularJS's compiler to attach a specified behavior to that DOM element or even transform the DOM element and its children.

Recommended ways

attribute (recommended)
element (recommended)

Not Recommended ways

name
CSS class
comment

CompileR

var $compile = ...; // injected into your code
var scope = ...;
 
var html = '<div ng-bind="exp"></div>';
 
// Step 1: parse HTML into DOM element
var template = angular.element(html);
 

// Step 2: Traverse the DOM and collect all of the directives
var linkFn = $compile(template);
 
// Step 3: link the compiled template with the scope.
linkFn(scope);

Code! COde! code!

Why Promises

Async Pyramid

asyncCall(function(err, data1){
    if(err) return callback(err);       
    anotherAsyncCall(data1, function(err2, data2){
        if(err2) return calllback(err2);
        oneMoreAsyncCall(data2, function(err3, data3){
            if(err3) return callback(err3);
            doSomething(data3);
        });
    });
});

Promise

asyncCall().then(function(data1){
    return anotherAsyncCall(data1);
}).then(function(data2){
    return oneMoreAsyncCall(data2);    
}).then(function(data3){
   doSomething(data3);
})
.fail(function(err) {
   // handle any error resulting from any of the above calls    
});


Even Better

asyncCall().then(anotherAsyncCall).then(oneMoreAsyncCall).then(doSomething).fail(function(err) {
   // handle any error resulting from any of the above calls    
});

Async PARallel


var loadAppAfterAllDataLoaded = function() {
    if($rootScope.bahmniConfiguration && $rootScope.encounterConfiguration && $rootScope.patientConfiguration)
        loadApp();
}
 

configurationService.getAll(function (data, error) {
    if(error) showError(error);
    $rootScope.bahmniConfiguration = data;
    loadAppAfterAllDataLoaded();
});
 

configurationService.getEncounterConfig(function (data, error) {
    if(error) showError(error);
    $rootScope.encounterConfiguration = angular.extend(new EncounterConfig(), data);
    loadAppAfterAllDataLoaded();
});
 

configurationService.getPatientConfig(function (data, error) {
    if(error) showError(error);
    $rootScope.patientConfiguration = angular.extend(new PatientConfig(), data);
    loadAppAfterAllDataLoaded();
});

Promise PARAllel


var configurationPromise = configurationService.getAll().success(function (data) {
    $rootScope.bahmniConfiguration = data;
});
 

var encounterConfigPromise = configurationService.getEncounterConfig().success(function (data) {
    $rootScope.encounterConfiguration = angular.extend(new EncounterConfig(), data);
});
 

var patientConfigPromise = configurationService.getPatientConfig().success(function (data) {
    $rootScope.patientConfiguration = angular.extend(new PatientConfig(), data);
});
 
 

return $q.all([configurationPromise, encounterConfigPromise, patientConfigPromise).then(loadMyApp, showError);

Promises REFERENCE

APP StrucTURE

$watch, $apply, $digest

BEWARE

Isolated scopes in directives

Number of watchers

Clenup using $destroy (jquery ui COntrols)

Debug

Batarang - Chrome extension for angular
Chrome Console: angular.element($0).scope()