15-437 AngularJS

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 <!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',[]);

Controller

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

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

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”, ...} ];

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

$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

15-437 AngularJS

15-437 AngularJS

ThierrySans

More Decks by ThierrySans

Other Decks in Programming

Featured

Transcript

AngularJS Thierry Sans

Different approaches Binding between the DOM and the javascript code

Application

ng-app directive <!DOCTYPE html> <html ng-app="simpsonsApp"> <head> <script src="bower_components/angular/angular.min.js"></script> <script

Controller

ng-controller directive <body ng-controller="simpsonsController as simpsons"> <header> <h1>{{simpsons.title}}</h1> <div ng-click="simpsons.foo()"></div>

ng-show (ng-hide) directive <header> <h1>The Simpsons</h1> <div id="admin_button" ng-click="simpsons.toggle()"></div> </header>

ng-repeat directive <div class="entry" ng-repeat="img in simpsons.data"> <div class=“img_box"> <img

Forms

ng-model and ng-submit directive /app/simpsonsApp.json app.controller('simpsonsController',function($scope){ this.character = {}; this.add_simpson

Ajax

$ajax /app/simpsonsApp.json app.controller('simpsonsController',function($http){ this.data = []; var controller = this;

Service (Model)

Routing