Here I am using $resource attribute with single parameter like
$resource('/airports') I am new to angularjs I am not getting what is
exactly inside parameters I am watching video tutorials they are using like
this and getting data but where they declared airports I am not getting the
code is like this
*index.html*
<html ng-app="airline">
<head>
<title>Demo</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript"
src="js/lib/angular-resource.min.js"></script>
<script type="text/javascript" src="js/controllers/app.js"></script>
<script type="text/javascript"
src="js/controllers/destinations.js"></script>
<script type="text/javascript" src="js/controllers/flights.js"></script>
<script type="text/javascript"
src="js/controllers/reservations.js"></script>
<script type="text/javascript" src="js/controllers/airport.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/services.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"
href="css/bootstrap-responsive.min.css">
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<h1>AngulAir</h1>
<ul class="nav nav-pills">
<li ng-class="destinationsActive">
<a href="#">Destinations</a>
</li>
<li ng-class="flightsActive">
<a href="#/flights">Flights</a>
</li>
<li ng-class="reservationsActive">
<a href="#/reservations">Reservations</a>
</li>
</ul>
<div ng-view></div>
</div>
</body>
</html>
*app.js*
angular.module('airline', ['airlineServices'])
.config(airlineRouter);
function airlineRouter ($routeProvider) {
$routeProvider
.when('/', {templateUrl: 'partials/destinations.html',
controller: 'DestinationsCtrl'})
.when('/airports/:airportCode', {
templateUrl: 'partials/airport.html',
controller: 'AirportCtrl'
})
.when('/flights', {
template: '<h3>Flights</h3> {{airports | json}}',
controller: 'FlightsCtrl'})
.when('/reservations', {
template: '<h3>Your Reservations</h3> {{airports | json}}',
controller: 'ReservationsCtrl'});
}
*services.js*
angular.module('airlineServices', ['ngResource'])
.factory('Airport', function ($resource) {
return $resource('/airports');
});
*airport.js*
function AirportCtrl ($scope, $routeParams) {
$scope.currentAirport = $scope.airports[$routeParams.airportCode];
}
*js/controllers/app.js*
function AppCtrl ($scope) {
$scope.setActive = function (type) {
$scope.destinationsActive = '';
$scope.flightsActive = '';
$scope.reservationsActive = '';
$scope[type + 'Active'] = 'active';
}
}
*destinations.js*
function DestinationsCtrl ($scope, Airport) {
$scope.setActive('destinations');
$scope.sidebarURL = 'partials/airport.html';
$scope.currentAirport = null;
$scope.setAirport = function (code) {
$scope.currentAirport = $scope.airports[code];
};
$scope.airports = Airport.query();
}
*flights.js*
function FlightsCtrl ($scope) {
$scope.setActive('flights');
$scope.airports = {};
}
*reservations.js*
function ReservationsCtrl ($scope) {
$scope.setActive('reservations');
}
*partials/airport.html*
<div ng-show="currentAirport">
<h3>{{currentAirport.name}}</h3>
<h4>Destinations</h4>
<ul>
<li ng-repeat="destination in currentAirport.destinations">
<a ng-href="#/airports]/{{destination}}">{{destination}}</a>
</li>
</ul>
</div>
*destinations.html*
<div>
<h3>All Destinations</h3>
<ul>
<li ng-repeat="airport in airports">
<a href="" ng-click="setAirport(airport.code)">{{airport.code}} -
{{airport.name}}</a>
</li>
</ul>
</div>
<div ng-include src="sidebarURL"></div>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
