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>




 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()

angularjs

By Deepak Narayana Rao

Made with Slides.com

angularjs

  • 732

More from Deepak Narayana Rao