1
これはAngular.jsへの私の最初の試みです。私はいくつかのJSONをロードし、リストを表示する単一のページアプリケーションを作成しようとしています。リストのリンクをクリックすると、新しいページに移動し、JSONデータのIDを使用してページをより詳細に表示する必要があります。角度：1ページのアプリケーションの2つのビュー間でデータを渡すにはどうすればよいですか？
ご協力いただきまして誠にありがとうございます。ここで
には、JavaScript（easyjet.js）です：
<!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>
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ページです
- fulldetails.html
- フライト番号：{{selectedResult.flightNumber.carrierCode}}、{{selectedResult.flightNumber.number}}から
- ：{{selectedResult.departureAirport}}
- に：{ {selectedResult.arrivalAirport}}
- 出発ターミナル：{{selectedResult.depTerminalName}}
- 出発時刻：{{selectedResult.localDepartureTime |日付： "longDate"}}
- 到着時間：{{selectedResult.localArrivalTime |日付：
- 席利用可能な "longDate"}}：{{}} 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}}
[Angular JSのコントローラ間でデータを渡すのは可能ですか？]（http://stackoverflow.com/questions/20181323/passing-data-between-controllers-in-angular-js） – Manish
私はそうは思わない彼は同じコントローラを使用していて、コントローラではなく2つの異なるビュー間でデータを共有したいと考えています。私は間違いない@Nasir –
@Manish：サービスを使うことは良いアプローチのようです。 – Nasir