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.