Wednesday, March 9, 2016

Learn AngularJS with detailed walkthrough lesson 2 step-by-step tutorial under 10 minutes

Lesson 2 Part 2 of Codecademy AngularJS tutorial step by step walkthrough. Lesson 2 Hello AngularJS II

This is the companion blog post abridged transcript about our video walkthrough.

  • Important to read the instruction line-by-line without freaking out
  • The controller uses $scope to pass model data into the view. 
  • MainController.js has the code for the MainController and its $scope special variable
  • $scope is an important AngularJS concept. This is an early exposure. No need to stress too much
  • AngularJS follows the Model View Controller framework. Model is stored in the $scope variable in this case. View is the HTML file. And the controller code is in MainController.js
  • In the HTML file, you can see a <div></div> tag essentially an HTML box or section on a website is associated with the MainController. code: ng-controller="MainController"
  • Every time, this div is asked to display a special value, it will look at the MainController and its $scope to see if there data exists.
  • $scope.product = { name: 'book name', price:19} is the same as $scope.product = {}; $ = 'book name'; $scope.product.price = 19;
  • A variable in an object is called a property. A function in an object is called a method


React UI, UI UX, Reactstrap React Bootstrap

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