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>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
    <script src="app.js"></script>
  <body ng-app="travelApp">
    <div ng-controller="DestinationListController as destinationList">
      <h1>Travel Destinations</h1>
        <li ng-repeat="destination in destinationList.destinations">
          <a ng-href="#/destinations/{{destination.id}}">{{destination.name}}</a>
    <div ng-view></div>
// app.js

(function() {
  'use strict';

    .module('travelApp', [])
    .config(function($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 -->


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.