AngularJS Thierry Sans 

Different approaches Binding between the DOM and the javascript code jQuery-like Using DOM selectors AngularJS Using Angular directives 

Application 

ng-app directive ... /index.html /app/simpsonsApp.json var app = angular.module('simpsonsApp',[]); 

Controller 

ng-controller directive

{{simpsons.title}}

/index.html /app/simpsonsApp.json app.controller('simpsonsController',function(){ this.data = “Hello World!”; this.foo = function(){ this.data = “The Simpsons”; }; )}; 

ng-show (ng-hide) directive

The Simpsons

/index.html /app/simpsonsApp.json app.controller('simpsonsController',function(){ show_form = false; this.toggle = function(){ this.show_form = ! this.show_form; }; )}; 

ng-repeat directive /index.html /app/simpsonsApp.json this.data = [ {"firstname": “Bart", ...}, {"firstname": “Lisa”, ...} ]; 

Forms 

ng-model and ng-submit directive /app/simpsonsApp.json app.controller('simpsonsController',function($scope){ this.character = {}; this.add_simpson = function(){ this.character.up_vote=0; this.character.down_vote=0; this.data.push(this.character); this.character = {}; $scope.add_simpson_form.$setPristine(); };}); /index.html 

Ajax 

$ajax /app/simpsonsApp.json app.controller('simpsonsController',function($http){ this.data = []; var controller = this; $http.get('api/simpsons.json') .success(function(data,status){ controller.data = data; }) .error(function(error,status){ }); }); 

Service (Model) 

Routing