I'm building an angular app that gets input, use the Google places API to retrieve an address, then use Weather API to bring to weather at this place in HTML format, push it to the controller and bring it to the view. In the view, I've added favorites table that gets the favorite place weather when clicking the 'Add to favorite'.
I wanna split my app into 2 parts: the search page and the favorite page so I've added ng-route to my app but the links can't open the templates I wanna to.
When I click on "Favorites" Link, the view still stay on "search.html" template while the Url that shows on the browser is updated to 127.0.0.1:8080/#!/search#favorites Thx for your help!
index.html
<!DOCTYPE html>
<html>
<head>
<title>Weather App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" href="bower_components/angular-google-places-autocomplete/src/autocomplete.css">
<link rel="stylesheet" href="http://www.atlasestateagents.co.uk/css/tether.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="vendor/angular.min.js"></script>
<script src="vendor/jquery-3.1.1.min.js"></script>
<script src="http://www.atlasestateagents.co.uk/javascript/tether.min.js"></script>
<script src="vendor/bootstrap.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js" type="text/javascript"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.0/angular-sanitize.min.js' type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDsITXbh5OPM2hQscKmZAPte6pUoIYyV6g&libraries=places"></script>
<script src="bower_components/angular-google-places-autocomplete/src/autocomplete.js"></script>
</head>
<body ng-app="WeatherApp">
<div class="container">
<div class="row">
<p>WeatherMe</p>
<a href="#/favorites">Favorites</a>
<a href="#/search">Search</a>
<ng-view></ng-view>
</div>
</div>
<!-- Modules -->
<script type="text/javascript" src="js/app.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="js/controllers/WeatherController.js"></script>
<!-- Services -->
<script src="js/services/weather.js"></script>
</body>
</html>
app.js:
var app = angular.module('WeatherApp', ['google.places', 'ngRoute', 'ngSanitize']);
app.run(function($rootScope) {
$rootScope.favorites = [];
})
app.config(function($routeProvider) {
$routeProvider
.when('/search', {
controller: "WeatherController",
templateUrl: "views/search.html"
})
.when('/favorites', {
controller: 'WeatherController',
templateUrl: 'views/favorites.html'
})
.otherwise({
redirectTo: '/search'
});
});
controller:
app.controller('WeatherController', ['$scope', '$http', '$routeParams', '$rootScope', '$sce', function($scope, $http, $routeParams, $rootScope, $sce) {
$scope.input = " ";
$scope.currentWeather = '';
$rootScope.favorites = [];
$scope.getCurrentWeather = function() {
$http({
method: 'GET',
url: $sce.trustAsResourceUrl('http://api.openweathermap.org/data/2.5/weather?q=' + $scope.input.formatted_address + '&mode=html' + '&appid=3cf609ef6426533eae948239945a32df')
}).then(function successCallback(response) {
$scope.myData = $sce.trustAsHtml(response.data)
$scope.currentWeather = $scope.myData;
}, function errorCallback(response) {
console.log(response);
});
};
$scope.addToFavorites = function() {
$rootScope.favorites.push([$scope.input.formatted_address, $scope.currentWeather]);
}
}]);
templates: search.html:
> <input id="autocomplete" type="text" ng-model="input" size="80" aria-label="URL" g-places-autocomplete placeholder="london,Uk" />
> <button id="button1" ng-click="getCurrentWeather()">WeatherMe!</button>
> <button id="button2" ng-click="addToFavorites()">Add to Favorites!</button> <!-- Showing the Chosen place's Weather from
> Service --> <table id="table1" width="100%">
> <tbody class="weatherTable">
> <tr class="weatherTable">
> <td class="weatherTable" style="width:50%;">{{input.formatted_address}} </td>
> <td class="weatherTable" style="width:50%; padding-left: 20%" align="left" ng-bind-html="currentWeather"></td>
> </tr>
> </tbody> </table>
>
> <table id="table2" width="100%" ng-repeat="favorite in favorites">
> <tbody class="weatherTable">
> <tr class="weatherTable">
> <td class="weatherTable" style="width:50%">{{favorite[0]}}</td>
> <td class="weatherTable" style="width:50%; padding-left: 20%" ng-bind-html="favorite[1]"></td>
> </tr>
> </tbody> </table>
favorites.html:
<h6>Favorites!</h6>
<table id="table2" width="100%" ng-repeat="favorite in favorites">
<tbody class="weatherTable">
<tr class="weatherTable">
<td class="weatherTable" style="width:50%">{{favorite[0]}}</td>
<td class="weatherTable" style="width:50%; padding-left: 20%" ng-bind-html="favorite[1]"></td>
</tr>
</tbody>
</table>
If I understand well your needs, change your routes as follow:
And then add a
!/to your hrefs:href="#favorites"tohref="#/favorites"href="#search"tohref="#/search"Demo on JSFiddle