Building real-time webapps with – AngularJS + Firebase – AngularJS

View Github Repository Open presentation in a new window

junereycasuga

See all presentation from junereycasuga

Building real-time webapps with – AngularJS + Firebase – AngularJS

0 0

angularjs-presentation

On Github junereycasuga / angularjs-presentation

Building real-time webapps with

AngularJS + Firebase

Junerey Casuga Lead Developer | Tagcash.com & Tagbond.com

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

					
Dependencies

					

				
Dependency Injection

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

				
Setting Global Variables and Functions

					
myApp.value('fbURL', 'https://dmmmsutodo.firebaseio.com/')
myApp.factory('ToDos', function($firebase, fbURL) {
  return $firebase(new FIrebase(fbURL)).$asArray();
})
					

				
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);
    };
  });
}
						

					
The View

					

  
ToDo

  {{ remaining() }} of {{ todos.length }} remaining
  archive
  
  • 
	  {{ todo.text }}
    
    •