- Download Angular lib from http://angularjs.org/ and place in your theme's js folder.
- Create a controller.js file in your theme's js folder.
- Place the controller code included in this gist.
- Include the angular lib and the controll file into your theme using the theme's .info file.
- Modify your html.tpl.php by including the
ng-appproperty to your<html>tag. - Modify your page.tpl.php by including the
ng-controller="TopPostCtrl"to your main<div>tag. - Check out the example page.tpl.php in this gist to see a simple example of iterating over our list.
Created
February 26, 2013 19:44
-
-
Save sirkitree/5041484 to your computer and use it in GitHub Desktop.
Quickly incorporate AngularJS into Drupal. This example pulls in the top posts from reddit and spits out the titles in a list.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function TopPostCtrl($scope, $http) { | |
| $http.jsonp('http://www.reddit.com/top.json?jsonp=JSON_CALLBACK'). | |
| success(function(res) { | |
| $scope.posts = res.data.children; | |
| }); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html ng-app> | |
| // ... typical head, body, and includes stuff | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <? | |
| ... | |
| <div id="main" ng-controller="TopPostCtrl"> | |
| ... | |
| <div> | |
| <span>Posts:</span> | |
| <ul class="posts"> | |
| <li ng-repeat="post in posts"> | |
| {{post.data.title}} | |
| </li> | |
| </ul> | |
| </div> | |
| ... | |
| </div> | |
| ... |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| scripts[] = js/angular.min.js | |
| scripts[] = js/controller.js |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment