Hi team,
After placing the ng-app and ng-directives in their respective places inside index.html file, I am still not getting the date after declaring to the Date object in MainController.js file. Below are the files having codes:
app.js:
var app = angular.module("PizzaPlanetApp", []);
MainController.js :
app.controller("MainController", ['$scope', function($scope) {
$scope.today = new Date();
$scope.appetizers = [
{
name: 'Caprese',
description: 'Mozzarella, tomatoes, basil, balsmaic glaze.',
price: 4.95
},
{
name: 'Mozzarella Sticks',
description: 'Served with marinara sauce.',
price: 3.95
},{
name: 'Bruschetta'
description: 'Grilled bread garlic, tomatoes, olive oil.'
price: 4.95
}
];
}]);
index.html :
<!doctype html>
<html>
<head>
<link href="https://content.codecademy.com/projects/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700italic|Oswald' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
</head>
<body ng-app="PizzaPlanetApp">
<div class="header">
<h1><span>Pizza</span><span>Planet</span></h1>
</div>
<div class="main" ng-controller="MainController">
<div class="container">
<h1>Specials for {{ today | date }}</h1>
<h2>Appetizers</h2>
<div class="appetizers row" ng-repeat="appetizer in appetizers">
<div class="item col-md-9">
<h3 class="name">{{appetizer.name}}</h3>
<p class="description">{{appetizer.description}}</p>
</div>
<div class="price col-md-3">
<p class="price">{{appetizer.price}}</p>
</div>
</div>
</div>
</div>
<div class="footer">
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
</body>
</html>
Here is the link of the exercise :
https://www.codecademy.com/courses/learn-angularjs/projects/angularjs_pizza-planet
Please suggest what should I do to resolve this issue.
Ankan