AngularJS in nutshell

Created by niquola / @niquola
2014

Teamlead/health samurai team

@ waveaccess/choice-hospital-systems

github/niquola / @niquola

(Presentation Model) framework
for single page applications (SPA)

(Presentation Model) framework
for SPA

Presentation Model framework
for single page applications

Presentation Model framework
for single page applications

AngularJS

• modules
• controllers & scopes
• directives & data bindings

Modules & Dependency Injections

        
angular.module('a', [])
.service('aserv',...)
.directive('adir',...)
.controller(...)
.filter(...)

angular.module('b', ['a'])
.controller(function(adir){ // here is injection
  //use adir
})

//
...
        
      

Controllers, Scope & View

        
angular.module('app', [])
.controller('userCtrl',function($scope){
  $scope.users = [{ name: 'Misko' }, {name: 'Voita'}, {name: 'Minar'}]
})

//view
html ng-app="app">
  ...
  

    

      
{{ user.name }}
    
  
  ...
html>
        
      

scopes + controllers = Presentation Model

binded by directives to view

How it works?

Let's implement

Binding

Imperative :(

                 
$('#input').on('input', function(){
  $('#out').text($(this).value());
})
                 
               

Organized & decoupled, but imperative

                 
var DocumentRow = Backbone.View.extend({
  tagName: "li",
  className: "document-row",
  events: {
    "change .input": "input"
  },
  initialize: function() {
    this.listenTo(this.model, "change", this.render);
  }
  render: function() {... }
  input: function() {... }
});
                 
               

Do it again & again?

Find more generic way (DRY)

find (compile)
DIRECTIVES

	
//directives
function model(el, scope) {...}
function interpolate(el, scope) {...}

//complie document
var scope = {} //container for data
$("[ng-model]")
.each(function(el){ model(el, scope) })

$("*:contains('{{')")
.each(function(el){ interpolate(el, scope) })
	  
	

Simple interpolation

	
function interpolate(el, scope) {
  var template = el.innerHTML; //get & remember template
  var prop = /{{(.+)}}/.exec(template)[1];

  //imagine we have such method,
  //calling callback when prop changed
  scope.$watch(prop, function() {
    console.log(scope)
    el.innerHTML = template.replace('{{' + prop +'}}', scope[prop]);
  })
}
	  
	

Simple model directive

	
function model(el, scope) {
  var model = el.getAttribute('ng-model')

  $(el).on('input',function(){
    var data = el.value;
    scope.apply(function(){
      scope[model] = data;
    })
  })

  scope.watch(model, function(val) {
    el.value = scope[model];
  })
}
	  
	

	// Scope
$watch: function(watchExp, listener,){
   this.$$watchers.push(watchExp, listener)
}

$digest: function() {
   var dirty = true;
   while(dirty || iteration > limit) {
     for $watcher in $$watchers {
       var newValue = eval($watcher.watchExp)
       if($watcher.oldValue != newValue){
         $watcher.listener(newValue, oldValue)
       }
     }
   }
}
	
      

Digest Loop

Fin

• Angular Russia Community
• Angular Community
• Angular on rails