Displays a list of travel destinations and a detailed View [Angular JS]

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.