Ad

Thursday, January 28, 2016

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. 


7 comments:


  1. Thanks for sharing about Angular,It’s a structural framework for dynamic web application; it lets you extend the syntax of HTML to demonstrate your apps components clearly. All functionality happens inside the browser making it an ultimate companion with any server technology.
    Regards,
    Angularjs training in chennai

    ReplyDelete
  2. Well Said, you have furnished the right information that will be useful to anyone at all time. Thanks for sharing your Ideas.
    Node JS training in chennai | Node JS training institute in chennai

    ReplyDelete
  3. Thanks a lot for sharing this amazing knowledge with us. This site is fantastic. I always find great knowledge from it.
    Hire Angular JS Developer

    ReplyDelete

React UI, UI UX, Reactstrap React Bootstrap

React UI MATERIAL  Install yarn add @material-ui/icons Reactstrap FORMS. Controlled Forms. Uncontrolled Forms.  Columns, grid