Using
AngularJS Create a SPA that show History of some(4-8) Historical Places (use
MVC).
<!DOCTYPE
html>
<html
ng-app="HistoricalPlacesApp">
<head>
<meta charset="utf-8">
<title>Historical
Places</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body
ng-controller="HistoricalPlacesController">
<h1>Historical Places</h1>
<ul>
<li ng-repeat="place in
historicalPlaces">
{{ place.name }} - {{
place.description }}
</li>
</ul>
<script>
var app =
angular.module('HistoricalPlacesApp', []);
app.controller('HistoricalPlacesController', function ($scope) {
$scope.historicalPlaces = [
{ name: 'The Great Wall of
China', description: 'An ancient wall in China' },
{ name: 'Machu Picchu',
description: 'An Inca citadel in the Andes' },
{ name: 'The Colosseum',
description: 'An ancient amphitheater in Rome' },
{ name: 'Taj Mahal',
description: 'A white marble mausoleum in India' },
{ name: 'Pyramids of Giza',
description: 'Ancient Egyptian pyramids' },
{ name: 'Stonehenge',
description: 'A prehistoric monument in the UK' },
{ name: 'Acropolis of Athens',
description: 'An ancient citadel in Greece' },
];
});
</script>
</body>
</html>
