AngularJS

• MVW Framework
• Two Way Data-Binding
• Dependency Injection
• Directives

The Basics

The Basics

  ...

          				

Two way data-binding

  Name:
  
  

  
Hello, {{ yourName }}!

          				

Working with Controllers

var myApp = angular.module('myApp',[]);

myApp.controller('myController', function($scope) {
  $scope.yourName = 'Joe';
  $scope.attribute = 'awesome';
  
  $scope.awesome = function() {
  	$scope.attribute = 'awesome';
  };
  
  $scope.cool = function() {
  	$scope.attribute = 'cool';
  };
});    				
          				

Working with Controllers

  Name:
  
  

  Awesome
  Cool
  

  
Hello, {{ yourName }}! You are {{ attribute }}

          				

To-Do App

The Controller

$scope.todos = [
	{text: 'learn angular', done: true},
	{text: 'build real-time app', done: false}
];

$scope.addtodo = function() {
	$scope.todos.push({
		text:$scope.todoText,
		done:false
	});

	$scope.todoText = '';
};

$scope.remaining = function() {
	var count = 0;
	angular.forEach($scope.tods, function(todo) {
		count += todo.done ? 0 : 1;
	});

	return count;
};

$scope.archive = function() {
	var oldTodos = $scope.todos;
	$scope.todos = [];
	angular.forEach(oldTodos, function(todo) {
		if (!todo.done) $scope.todos.push(todo);
	});
};
          				

The View

ToDo
{{ remaining() }} of {{ todos.length }} remaining
archive

  

	
	{{ todo.text }}
  


  
  

          				

Firebase

stores and syncs data in realtime

Setting the Controller

myApp.controller('myController', function($scope, $firebase, fbURL, Todos) {
 ...
})
						

Listing of Tasks

 $scope.todos = Todos;
						

Adding Task

$scope.addtodo = function() {
  Todos.$add({text:$scope.todoText, done: false}).then(function() {
    $scope.todoText = '';
  });
};
						

Counting of Remaining Tasks

$scope.remaining = function() {
  var count = 0;
  angular.forEach($scope.todos, function(todo) {
    count += todo.done ? 0: 1;
  });

  return count;
};
						

Marking Tasks as Done

$scope.markDone = function(taskId, done) {
  var data = new Firebase(fbURL + taskId);

  if(done) {
    data.update({done: true});
  } else {
    data.update({done: false});
  }
};
						

Clearing Completed Tasks

$scope.archive = function() {
  angular.forEach($scope.todos, function(index) {
    if(index.done) {
      $scope.todos.$remove(index);
    };
  });
}