Angular Instagram by Andrew Pougher

JSONP Angular Instagram by Andrew Pougher

by Andrew Pougher

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div ng-app="andrewsInstaApp" ng-controller="photostream">

	<div class="bar">
	<!-- switcheroo -->
		<a class="list-icon" ng-class="{active: LayoutChooser('list')}" ng-click="setLayout('list')"></a>
		<a class="grid-icon" ng-class="{active: LayoutChooser('grid')}" ng-click="setLayout('grid')"></a>
	</div>



	<ul ng-show="LayoutChooser('grid')" class="grid">
		<!-- Large photos -->
		<li ng-repeat="p in pics">
			<a href="{{p.link}}" target="_blank"><img ng-src="{{p.images.low_resolution.url}}" /></a>
		</li>
	</ul>

	<ul ng-show="LayoutChooser('list')" class="list">
		<!-- repeater -->
		<li ng-repeat="p in pics">
			<a href="{{p.link}}" target="_blank"><img ng-src="{{p.images.thumbnail.url}}" /></a>
			<p>{{p.caption.text}}</p>
		</li>
	</ul>
</div>

<script>
	/* http://bit.ly/ARP71 */
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-4809804-1', 'auto');
  ga('send', 'pageview');
  </script>

CSS

*{
	margin:0;
	padding:0;
}

body{
	font:15px/1.3 'Open Sans', sans-serif;
	color: #5e5b64;
	text-align:center;
}

a, a:visited {
	outline:none;
	color:#389dc1;
}

a:hover{
	text-decoration:none;
}

section, footer, header, aside, nav{
	display: block;
}

/*-------------------------
	The search input
--------------------------*/

.bar{
	background-color:#5c9bb7;

	background-image:-webkit-linear-gradient(top, #5c9bb7, #5392ad);
	background-image:-moz-linear-gradient(top, #5c9bb7, #5392ad);
	background-image:linear-gradient(top, #5c9bb7, #5392ad);

	box-shadow: 0 1px 1px #ccc;
	border-radius: 2px;
	width: 580px;
	padding: 10px;
	margin: 45px auto 25px;
	position:relative;
	text-align:right;
	line-height: 1;
}

.bar a{
	background:#4987a1 center center no-repeat;
	width:32px;
	height:32px;
	display:inline-block;
	text-decoration:none !important;
	margin-right:5px;
	border-radius:2px;
	cursor:pointer;
}

.bar a.active{
	background-color:#c14694;
padding:5px;
border-radius:50%
}

.bar a.list-icon:before {
    content: "\f00b";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;

    color: white;
    font-size: 38px;

}

.bar a.grid-icon:before {
    content: "\f009";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;

    color: white;
    font-size: 38px;
 
}

.bar input{
	background:#fff no-repeat 13px 13px;

	border: none;
	width: 100%;
	line-height: 19px;
	padding: 11px 0;

	border-radius: 2px;
	box-shadow: 0 2px 8px #c4c4c4 inset;
	text-align: left;
	font-size: 14px;
	font-family: inherit;
	color: #738289;
	font-weight: bold;
	outline: none;
	text-indent: 40px;
}

/*-------------------------
	List layout
--------------------------*/

ul.list{
	list-style: none;
	width: 500px;
	margin: 0 auto;
	text-align: left;
}

ul.list li{
	border-bottom: 1px solid #ddd;
	padding: 10px;
	overflow: hidden;
}

ul.list li...

JavaScript

var app = angular.module("andrewsInstaApp", []);
app.factory('instagram', ['$http', function($http){

	return {
		fetchImages: function(callback){
    //https://api.instagram.com/v1/media/popular?client_id=642176ece1e7445e99244cec26f4de1f&callback=JSON_CALLBACK
            //https://api.instagram.com/v1/users/3481060/media/recent/?access_token=3481060.1b99d19.e2771e01715c4ed6b2a4e805669c0f25
            var endPoint = "https://api.instagram.com/v1/media/search?lat=44.811349&lng=-91.498494&client_id=642176ece1e7445e99244cec26f4de1f&count=25&callback=JSON_CALLBACK";
            
            $http.jsonp(endPoint).success(function(response){
                callback(response.data);
            });
		}
	}

}]);

app.controller('photostream', ['$scope', 'instagram' ,
function ($scope, instagram){

	$scope.layout = 'grid';
    
    $scope.setLayout = function(layout){
        $scope.layout = layout;
    };
    
    $scope.LayoutChooser = function(layout){
        return $scope.layout == layout;
    };

	$scope.pics = [];


	instagram.fetchImages(function(data){

		$scope.pics = data;
	});

}]);