Created
January 30, 2017 18:11
-
-
Save athiwatp/3f0ff8fa8a28a44aa4845bcadce120e2 to your computer and use it in GitHub Desktop.
A simple Twitter timeline with AngularJS
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
| /* Some style resets */ | |
| h1, h2, h3, h4, h5, h6, form, input, dl, dt, dd, ul, ol, p, fieldset { padding: 0; margin: 0; } | |
| /* HTML5 block-level reset for enhanced structural tag support in older browsers */ | |
| header, footer, section, aside, nav, article, figure { display: block; } | |
| body { | |
| color: rgb(17,17,17); | |
| overflow-y: scroll; | |
| font: normal 14px/1.6em "Lato", "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", "Verdana", sans-serif; | |
| margin: 0; padding: 0; | |
| background-color: rgb(255,255,255); | |
| } | |
| section { margin: 30px 30px 0; width: 320px; } | |
| dl#twitter-feed dt { | |
| font-size: 1.3em; | |
| font-weight: bold; | |
| margin-bottom: 10px; | |
| } | |
| dl#twitter-feed dd { | |
| margin-bottom: 5px; | |
| padding: 10px; | |
| } | |
| dl#twitter-feed dd:nth-child(odd){ | |
| background-color: rgb(238,238,238); | |
| } |
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> | |
| <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en" ng-app> <![endif]--> | |
| <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en" ng-app> <![endif]--> | |
| <!--[if IE 8]> <html class="no-js lt-ie9" lang="en" ng-app> <![endif]--> | |
| <!--[if gt IE 8]><!--> <html class="no-js" lang="en" ng-app> <!--<![endif]--> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> | |
| <link href="http://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" /> | |
| <link href="main.css" rel="stylesheet" media="screen, projection" /> | |
| <title>Twitter Widget</title> | |
| <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> | |
| <script type="text/javascript"> | |
| var widget_data = { | |
| username: "betterhayden", | |
| count: 5 | |
| }; | |
| </script> | |
| <script src="twitter_widget.js"></script> | |
| </head> | |
| <body> | |
| <section> | |
| <dl id="twitter-feed" ng-controller="twitter_controller"> | |
| <dt><a href="https://twitter.com/{{ username_href }}">{{ username_html }}</a></dt> | |
| <dd ng-repeat="tweet in tweets">{{ tweet.text }}</dd> | |
| </dl> | |
| </section> | |
| </body> | |
| </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
| function twitter_controller( $scope, $http ) | |
| { | |
| var twitter_api_url = "http://api.twitter.com/1/statuses/user_timeline.json" | |
| , config = { | |
| params: { | |
| screen_name: widget_data.username | |
| , callback: "JSON_CALLBACK" | |
| , include_rts: true | |
| , count: widget_data.count | |
| , clientsource: "TWITTERINC_WIDGET" | |
| , "1340767850386": "cachebus" | |
| } | |
| }; | |
| $http.jsonp( twitter_api_url, config).success( | |
| function( data, status, headers, config ) | |
| { | |
| $scope.username_html = '@' + widget_data.username; | |
| $scope.username_href = widget_data.username; | |
| $scope.tweets = data; | |
| } | |
| ); | |
| } | |
| twitter_controller.$inject = ['$scope','$http']; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment