HELP YOURSELF TO PIZZA!
Got all these? Let's get started!
A single page application requires an essential structure to work. This is:
The actual structure of the application can be in any format you like. There are however common practices, we'll be going over one type structure within the code club. This can be adapted to best suit you or the project.
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js">
</script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter your name">
<h1>Welcome to the Code Club, {{yourName}}!</h1>
</div>
</body>
</html>
codeClubApp.controller('HomeController', function($scope) {
$scope.title = "NCL Code Club";
});The structure of the application, will place logic within controllers. Simple readable JavaScript will be written within these files. This is the code that sits behind the view.
.controller - within Angular we need define this as a controller
'HomeController' - Provide the controller to define what it is and must be unique.
$scope - inject dependencies within the brackets of function
Add two controllers, one template/view
codeClubApp.service('DataServices', function($http) {
this.sayHello = function() {
return "Hello, Code Club!"
};
});Add service to pull data from our 'API'
codeClubApp.factory('DataFactory', function($http) {
return {
listAttendees: () => $http.get('data/attendenceList.json'),
};
});Create basket factory for
storing its contents
ng-app - tell angular where the start of the app is
ng-repeat - repeats an object
app.directive('helloWorld', function() {
return {
restrict: 'AE',
replace: 'true',
template: '<h3>Hello World!!</h3>'
};
});Add interpolation and ng-repeat
directive to display the movies
Add a function to add more
films to the movie page
Combine knowledge to populate
basket contents and calculate total