<html lang="en" ng-app="StarterApp">
<head>
<title>News Search App</title>
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
<link rel="stylesheet" href="app.css">
<meta name="viewport" content="initial-scale=1" />
</head>
<body layout="column" ng-controller="AppCtrl">
<md-toolbar layout="row">
<div class="md-toolbar-tools">
<md-button ng-click="toggleSidenav('left')" hide-gt-sm class="md-icon-button">
<md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg"></md-icon>
</md-button>
<h3>Location Based News</h3>
</div>
</md-toolbar>
<div layout="row" flex>
<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
SideNav Here
</md-sidenav>
<div layout="column" flex id="content" layout-align="center top" layout-wrap>
<md-content layout-padding class="md-padding">
<section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
<form id="form" role="form">
<input-container flex>
<!-- <label for="Autocomplete">Enter a Location</label> -->
<input type="text" id="Autocomplete" ng-autocomplete="result1" details="details1" options="options1">
</input-container>
<md-button data-ng-click="findNews(result1)" class="md-raised md-primary">Search</md-button>
<p data-ng-if="result1">Searching News For: {{result1}}...</p>
</form>
</section>
<div data-ng-repeat="news in newsData">
<md-card>
<img src="{{news.image.url}}" class="md-card-image" alt="image caption">
<md-card-content>
<h2>{{news.title}}</h2>
<p>{{news.content}}</p>
</md-card-content>
<md-card-footer>
Card footer
</md-card-footer>
</md-card>
</div>
</md-content>
</div>
</div>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<script src="script.js" type="text/javascript"></script>
<script src="ngAutocomplete.js"></script>
</body>
</html>
(function(){
'use strict;'
angular.module('StarterApp', ['ngMaterial', 'ngAutocomplete'])
.controller('AppCtrl', ['newsService', '$scope', '$mdSidenav', function(newsService, $scope, $mdSidenav){
$scope.toggleSidenav = function(menuId) {
$mdSidenav(menuId).toggle();
};
function fetchNews(result1){
newsService.getNews(result1).then(function(data){
$scope.location = data;
});
}
fetchNews('San Francisco');
$scope.findNews = function(result1){
$scope.location = '';
fetchNews(result1);
};
}])
.factory ('newsService', ['$http', '$q', function($http, $q){
function getNews(result1){
var deferred = $q.defer();
$http.get('https://ajax.googleapis.com/ajax/services/search/news?v=1.0&q=' + result1)
.success(function(data){
newsData = data.responseData.results;
console.log(newsData);
})
.error(function(err){
console.log('Error retrieving News');
deferred.reject(err);
});
return deferred.promise;
}
return{
getNews:getNews
}
}])
})();
.md-toolbar-tools h1 {
font-size: inherit;
font-weight: inherit;
margin: inherit;
}
'use strict';
/**
* A directive for adding google places autocomplete to a text box
* google places autocomplete info: https://developers.google.com/maps/documentation/javascript/places
*
* Simple Usage:
*
* <input type="text" ng-autocomplete="result"/>
*
* creates the autocomplete text box and gives you access to the result
*
* + `ng-autocomplete="result"`: specifies the directive, $scope.result will hold the textbox result
*
*
* Advanced Usage:
*
* <input type="text" ng-autocomplete="result" details="details" options="options"/>
*
* + `ng-autocomplete="result"`: specifies the directive, $scope.result will hold the textbox autocomplete result
*
* + `details="details"`: $scope.details will hold the autocomplete's more detailed result; latlng. address components, etc.
*
* + `options="options"`: options provided by the user that filter the autocomplete results
*
* + options = {
* types: type, string, values can be 'geocode', 'establishment', '(regions)', or '(cities)'
* bounds: bounds, google maps LatLngBounds Object
* country: country string, ISO 3166-1 Alpha-2 compatible country code. examples; 'ca', 'us', 'gb'
* }
*
*
*/
angular.module( "ngAutocomplete", [])
.directive('ngAutocomplete', function($parse) {
return {
scope: {
details: '=',
ngAutocomplete: '=',
options: '='
},
link: function(scope, element, attrs, model) {
//options for autocomplete
var opts
//convert options provided to opts
var initOpts = function() {
opts = {}
if (scope.options) {
if (scope.options.types) {
opts.types = []
opts.types.push(scope.options.types)
}
if (scope.options.bounds) {
opts.bounds = scope.options.bounds
}
if (scope.options.country) {
opts.componentRestrictions = {
country: scope.options.country
}
}
}
}
initOpts()
//create new autocomplete
//reinitializes on every change of the options provided
var newAutocomplete = function() {
scope.gPlace = new google.maps.places.Autocomplete(element[0], opts);
google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
scope.$apply(function() {
// if (scope.details) {
scope.details = scope.gPlace.getPlace();
// }
scope.ngAutocomplete = element.val();
});
})
}
newAutocomplete()
//watch options provided to directive
scope.watchOptions = function () {
return scope.options
};
scope.$watch(scope.watchOptions, function () {
initOpts()
newAutocomplete()
element[0].value = '';
scope.ngAutocomplete = element.val();
}, true);
}
};
});