Codecademy Tutorials AngularJS Your First App Part 3 Workflow

Codecademy AngularJS tutorial solution Part 3 Workflow .1

Adding a new product to $scope

$scope helps the controller passes data to the view.  We are storing an object of key value pairs into the $scope.product variable. Single word keys like name and price don't need quotation marks, but regardless of the length and construct of the string, quotes are needed when storing values hence the book name is surrounded by quotes. However, we don't need quotes when storing numbers, hence 19 doesn't have quotes around.

Codecademy AngularJS tutorial solution Part 3 Workflow .2 .3

Displaying book title and price

If we just write product.name nothing will happen. HTML will literally display things exactly how it is. Because when the words are surrounded by double curly braces {{ }} AngularJS is smart enough to know to take a look. Rather than display as it is, it will traverse upward in the HTML code to see where it should be looking for useful data. It found that somewhere upward, it is told to look at the MainController, so it checks if there's a product property or variable stored in the $scope object. Found! Then it checks if there's .name and .price property. Found! AngularJS is able to successfully display the data. If we change the data now to {name : "My book", price: 25}. We no longer have to change HTML code. It was a one time setup. This time when running the code, AngularJS will again look for $scope.product.name and $scope.product.price but will find different values to display.