Here is a very basic example of an AngularJS application that displays a list of travel destinations and a detailed view of each destination:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="travelApp">
<div ng-controller="DestinationListController as destinationList">
<h1>Travel Destinations</h1>
<ul>
<li ng-repeat="destination in destinationList.destinations">
<a ng-href="#/destinations/{{destination.id}}">{{destination.name}}</a>
</li>
</ul>
</div>
<div ng-view></div>
</body>
</html>
// app.js
(function() {
'use strict';
angular
.module('travelApp', [])
.config(function($routeProvider) {
$routeProvider
.when('/destinations/:destinationId', {
templateUrl: 'destination-detail.html',
controller: 'DestinationDetailController',
controllerAs: 'destinationDetail'
});
})
.controller('DestinationListController', DestinationListController)
.controller('DestinationDetailController', DestinationDetailController);
function DestinationListController() {
var vm = this;
vm.destinations = [
{ id: 1, name: 'Paris' },
{ id: 2, name: 'New York' },
{ id: 3, name: 'Sydney' }
];
}
function DestinationDetailController($routeParams) {
var vm = this;
var destinationId = $routeParams.destinationId;
vm.destination = {
id: destinationId,
name: 'Paris',
description: 'The City of Love'
};
}
})();
<!-- destination-detail.html -->
<h1>{{destinationDetail.destination.name}}</h1>
<p>{{destinationDetail.destination.description}}</p>
This example code defines a DestinationListController that has a list of destinations and a DestinationDetailController that displays the details for a specific destination. The ng-repeat directive is used to display the list of destinations, and the ng-view directive is used to display the destination detail view when a destination is clicked.