Using AngularJS
create a SPA for a Recipe Book.
<html>
<html
ng-app="RecipeBookApp">
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="RecipeController">
<h1>Recipe Book</h1>
<!-- List of Recipes -->
<ul>
<li ng-repeat="recipe in
recipes">
<h2>{{ recipe.name
}}</h2>
<p>{{ recipe.description
}}</p>
</li>
</ul>
<!-- Add Recipe Form -->
<h2>Add a New Recipe</h2>
<form
ng-submit="addRecipe()">
<label>Name:
<input type="text"
ng-model="newRecipe.name" required>
</label>
<label>Description:
<input type="text"
ng-model="newRecipe.description" required>
</label>
<button
type="submit">Add Recipe</button>
</form>
<script>
var app =
angular.module('RecipeBookApp', []);
app.controller('RecipeController',
function ($scope) {
$scope.recipes = [
{ name: 'Pasta Carbonara',
description: 'Delicious Italian pasta with eggs, cheese, and pancetta' },
{ name: 'Chicken Stir-Fry',
description: 'Quick and healthy stir-fry with chicken and vegetables' },
{ name: 'Chocolate Chip
Cookies', description: 'Classic homemade cookies with chocolate chips' }
];
$scope.newRecipe = {};
$scope.addRecipe = function () {
$scope.recipes.push({ name:
$scope.newRecipe.name, description: $scope.newRecipe.description });
$scope.newRecipe = {};
};
});
</script>
</body>
</html>
