AngularJSin 15 minutes

View Github Repository Open presentation in a new window

amitkumar

See all presentation from amitkumar

AngularJSin 15 minutes

0 0

angularjs-tutorial

A repo created as a step-by-step (and commit-by-commit) guide to building an AngularJS TODO web app.

On Github amitkumar / angularjs-tutorial

AngularJSin 15 minutes

Amit Kumar / @the_kumar

Javascript framework

"HTML enhanced for web apps"

The current way

Start with data Mark up DOM for data-binding Populate DOM with data Listen for interactions Update data Update DOM 
var name = "Joe";
					

					

					
$('.name').text(name);
					


					
$('input').on('change', function(){ 
});
					


					
$('input').on('change', function(e){
  name = this.value;
});
					


					
$('input').on('change', function(e){
  name = this.value;
  $('.name').text(name);
});
					

				
The Angular way

					
					Start with data
						Mark up DOM for data-binding
						Populate DOM with data
						Listen for interactions
						Update data
						Update DOM
					
$scope.name = "Joe";
					

					
					
{{name}}

					

					
$scope.name = "Another Joe";
					


				
To the demo!

				
MVC Architecture

					
Model / View / Controller

					

						
Separation of concerns

						
Loosely-coupled

					

					

						
 = 
							Cleaner code
						

						

							Easily changeable
						

					

				
2-Way Data-Binding

					
For free!

					

						
						
Less "glue" code

						
// On a certain interaction
$('#element').on('change', function(){
  // update the data
  // update another part of the DOM
});
						

				
More cool stuff

					
					
  • 
							
    Persist Data
    
							
    Rich set of tools for interacting with servers, REST APIs
    
							
    • 

						
  • 
							
    Extend HTML
    
							
    Create custom components
    
						
    • 
					
Learn more!

					
Books

					


					
Links

					
AngularJS Documentation

					
AngularJS YouTube Channel


					
Me

					
@the_kumar