Sample using AngularJS to retrieve WoW information.

index.html 2.7KB

    <!doctype html> <html ng-app="WowArmory"> <head> <script type="text/javascript" src="//code.angularjs.org/1.0.0rc6/angular-1.0.0rc6.min.js"></script> <script type="text/javascript" src="//code.angularjs.org/1.0.0rc6/angular-resource-1.0.0rc6.min.js"></script> <script type="text/javascript" src="armory.js"></script> <link type="text/css" rel="stylesheet" href="site.css" /> </head> <body> <div role="main" ng-controller="WowArmory.ArmoryController"> <form> <label for="myRealm">Realm</label> <select id="myRealm" ng-model="realm" ng-options="r.name for r in realms.realms"> <option value="">-- Select a realm --</option> </select> <label for="myGuild">Guild</label> <input id="myGuild" type="text" ng-model="guild" placeholder="Guild name" /> <button type="submit" ng-click="fetchMembers()" ng-disabled="realmError.length > 0">Get Members</button> <p style="font-style: italic;">example: "Hellscream" : "Rejected"</p> </form> <hr /> <h2>Notice</h2> <p class="notice"> This was purely created for experimentation with AngularJS. Sometimes the callbacks receive an HTTP error code of 500 from the servers. Just wait a second if this is the case and try again. </p> <hr /> <h2>{{guild}}</h2> <p>{{realmError}}</p> <p>{{memberError}}</p> <div class="character" ng-repeat="member in members.members"> <img class="thumbnail" ng:src="//us.battle.net/static-render/us/{{member.character.thumbnail}}" /> <div class="stats"> <table> <tr> <td>Character</td> <td class="italic">{{member.character.name}}</td> </tr> <tr> <td>Class</td> <td class="italic">{{member.character.class}}</td> </tr> <tr> <td>Race</td> <td class="italic">{{member.character.race}}</td> </tr> <tr> <td>Gender</td> <td class="italic">{{member.character.gender}}</td> </tr> <tr> <td>Achievement Points</td> <td class="italic">{{member.character.achievementPoints}}</td> </tr> <tr> <td>Rank</td> <td class="italic">{{member.rank}}</td> </tr> </table> </div> </div> </div> </body> </html>