Upgrade to Pro — share decks privately, control downloads, hide ads and more …

15-437 AngularJS

ThierrySans
February 09, 2016

15-437 AngularJS

ThierrySans

February 09, 2016
Tweet

More Decks by ThierrySans

Other Decks in Programming

Transcript

  1. Different approaches Binding between the DOM and the javascript code

    jQuery-like Using DOM selectors AngularJS Using Angular directives
  2. 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',[]);
  3. 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”; }; )};
  4. 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; }; )};
  5. 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”, ...} ];
  6. 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
  7. $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){ }); });