15-437 AngularJS

Transcript

1. AngularJS Thierry Sans
2. Different approaches Binding between the DOM and the javascript code jQuery-like Using DOM selectors AngularJS Using Angular directives
3. Application
4. ng-app directive <!DOCTYPE html> <html ng-app="simpsonsApp"> <head> <script src="bower_components/angular/angular.min.js"></script> <script src="app/simpsonsapp.js"></script> </head> ... /index.html /app/simpsonsApp.json var app = angular.module('simpsonsApp',[]);
5. Controller
6. ng-controller directive <body ng-controller="simpsonsController as simpsons"> <header> <h1>{{simpsons.title}}</h1> <div ng-click="simpsons.foo()"></div> </header> /index.html /app/simpsonsApp.json app.controller('simpsonsController',function(){ this.data = “Hello World!”; this.foo = function(){ this.data = “The Simpsons”; }; )};
7. ng-show (ng-hide) directive <header> <h1>The Simpsons</h1> <div id="admin_button" ng-click="simpsons.toggle()"></div> </header> <div id="add_simpson_form_wrapper" ng-show="simpsons.show_form"> <form class="complex_form" id="add_simpson_form"> ... </form> </div> /index.html /app/simpsonsApp.json app.controller('simpsonsController',function(){ show_form = false; this.toggle = function(){ this.show_form = ! this.show_form; }; )};
8. ng-repeat directive <div class="entry" ng-repeat="img in simpsons.data"> <div class=“img_box"> <img ng-src="{{img.img_url}}" alt=“{{img.firstname}}"/> </div> <div class=“firstname”> <a href=“{{img.w_url}}">{{img.firstname}}</a> </div> <div class="down_button vote_button">{{img.down_vote}}</div> <div class="up_button vote_button">{{img.up_vote}}</div> </div> /index.html /app/simpsonsApp.json this.data = [ {"firstname": “Bart", ...}, {"firstname": “Lisa”, ...} ];
9. Forms
10. 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(); };}); <form ng-submit=“simpsons.add_simpson()”> <div class="form_title">Add a Simpson</div> <input type="name" ng-model="simpsons.character.firstname"/> <input type="url" ng-model="simpsons.character.img_url"/> <input type="url" ng-model="simpsons.character.w_url"/> <input type="submit" class="btn" value="Add"/> </form> /index.html
11. Ajax
12. $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){ }); });
13. Service (Model)
14. Routing