Question

我正在构建一个获取输入的角度应用程序，使用Google Places API检索地址，然后使用Weather API以HTML格式在此处播放天气，将其推送到控制器并将其带到视图中。在视图中，我添加了收藏夹表，在单击“添加到收藏夹”时可以获得最喜欢的地方天气。

我想把我的应用分成两部分：搜索页面和收藏页面，所以我已经添加了ng-route到我的应用程序，但链接无法打开我想要的模板。

当我点击“收藏夹”链接时，视图仍保留在“search.html”模板上，而浏览器上显示的网址更新为127.0.0.1:8080/#!/search#favorites 谢谢你的帮助！

的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'
        });
});

控制器：

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]);
    }
}]);

模板： 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>

Answer 1

如果我了解您的需求，请按以下步骤更改路线：

$routeProvider
    .when('/search', {
        controller: "WeatherController",
        templateUrl: "views/search.html"
    })
    .when('/favorites', { // <-- Note the change here
        controller: 'WeatherController',
        templateUrl: 'views/favorites.html'
    })
    .otherwise({
        redirectTo: '/search'
    });

然后在您的hrefs中添加!/：

href="#favorites"至href="#/favorites"
href="#search"至href="#/search"
...

<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>

<强> Demo on JSFiddle

Answer 2

解决方案是添加哈希前缀！到URL - 比如

<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>

转到@IAmDranged

角度路线链接问题

2 个答案: