Question

这是我第一次尝试Angular.js。我正在尝试创建一个单页应用程序，它加载一些JSON并显示一个列表。当我单击列表中的链接时，它应该转到一个新页面，并通过JSON数据中的id更详细地填充页面。

非常感谢任何帮助。

这是JavaScript（easyjet.js）：

    var app = angular.module('easyjet', ['ui.router']);

app.config(function($stateProvider, $urlRouterProvider){
    $stateProvider.state('flights', {
        url: '/', 
        templateUrl: 'templates/list.html',
        controller: 'ResultsController'
    })
    .state('details', {
        url: '/detail/:id',
        templateUrl: 'templates/fulldetails.html',
        controller: 'ResultsController'
    });
    $urlRouterProvider.otherwise('/');
});


app.controller('ResultsController', function($scope, $http, $stateParams) {

    console.log($stateParams); 

    // Get JSON data
    $http({
        method : "GET",
        url : "http://ejtestbed.herokuapp.com/flights"
    }).then(function(response) {
        $scope.resultsData = response.data;
    }, function(response) {
        $scope.resultsData = response.statusText;
        console.log("Oops! Couldn't load JSON!");
    });

    // Select and display result details
    $scope.selectedResult = null;

    $scope.selectResult = function (result) {
        $scope.selectedResult = result;
    };

    //Sorting default setting
    $scope.order = "flightNumber.number";

});

以下是默认的HTML页面：

<!DOCTYPE html>
<html ng-app="easyjet">
    <head>
        <meta charset="utf-8" />
        <title>Easyjet, Flights</title>
    </head>
    <body>
        <div ui-view></div>

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
        <script src="angular-ui-router.min.js"></script>
        <script src="easyjet.js"></script>  
    </body>
</html>

模板文件： 1. list.html

<div class="container">

    <!-- Filtering & Sorting -->
    <div>
        <input type="text" id="search" ng-model="search.$" placeholder="Search anything..." />
        <select ng-model="order">
            <option value="flightNumber.number">Flight Number (ASC)</option>
            <option value="-flightNumber.number">Flight Number (DEC)</option>
            <option value="localDepartureTime">Date (ASC)</option>
            <option value="-localDepartureTime">Date (DEC)</option>
        </select>
    </div>

    <!-- Result List -->
    <div class="result" 
        ng-repeat="result in filteredResults = (resultsData | filter: search | orderBy: order)" 
        ng-style="{ 'background-color': result.id == selectedResult.id ? 'lightgray' : '' }"
        ng-click="selectResult(result)">

        <span style="display:none;">{{ $index }}</span>
        <a ng-href="#/detail/{{ result.id }}"><span>EZY {{ result.flightNumber.number }}</span></a>
        <span>From: {{ result.departureAirport }}</span> 
        <span>To: {{ result.arrivalAirport }}</span>
        <span>Date: {{ result.localDepartureTime | date:"longDate" }}</span>
    </div>

    <div ng-show="filteredResults.length == 0">No Result Found</div>

</div>

fulldetails.html

航班号：{{selectedResult.flightNumber.carrierCode}} {{selectedResult.flightNumber.number}}
来自：{{selectedResult.departureAirport}}
收件人：{{selectedResult.arrivalAirport}}
出发终点站：{{selectedResult.depTerminalName}}
出发时间：{{selectedResult.localDepartureTime |日期：＆＃34;的longdate＆＃34; }}
到达时间：{{selectedResult.localArrivalTime |日期：＆＃34;的longdate＆＃34; }}
座位可用：{{selectedResult.seatsAvailable}}
成人票价：{{selectedResult.prices.adult.value}}
借记卡预订费：{{selectedResult.prices.adult.valueWithDebitCard}}
信用卡预订费：{{selectedResult.prices.adult.valueWithCreditCard}}
儿童票价：{{selectedResult.prices.child.value}}
借记卡预订费：{{selectedResult.prices.child.valueWithDebitCard}}
信用卡预订费：{{selectedResult.prices.child.valueWithCreditCard}}

Answer 1

您应该使用将执行呼叫的服务并在页面之间存储数据。

您的控制器将调用此服务来获取数据或要求刷新数据。

Answer 2

如果您正在使用相同的控制器，那么您可以将数据存储在缓存或本地存储中，如果您使用服务存储数据和相同的控制器，它将会中断，因为服务也将被重新加载并且如果数据丢失则你没有使用相同的控制器，那么你绝对应该使用服务作为最佳实践

如何使用缓存？在控制器中使用$ cacheFactory

检查加载的控制器

 var yourCache = $cacheFactory.get('yourCache') || $cacheFactory('searchCache');

成功后，在您的函数中

只保存到缓存

yourCache.put(key, value);

并删除它

yourCache.remove('key');

Answer 3

您可以使用角度服务与另外两个variable

共享controllers

但是，您的问题是在具有相同控制器的视图之间共享值。

在您更改视图时，controller 重新加载。因此，您必须将该值存储在本地存储或会话存储中（即使我们可以设置服务，更好的选项是localStorage或sessionStorage）。

为此，您可以使用$localStorage或$sessionStorage依赖项。

Angular：如何在单个页面应用的2个视图之间传递数据？

3 个答案: