1.1 ramp up
1.3 index html setup
* use controller and placeholders to fit dynamic data into the html
* keyword "as" is just for using the name as a base to access the values
1.5 built-in directives
* array of gems
* ng-show & ng-hide to display elements depending on whether an attribute is true
1.5 build-in directives
* loop through multiple products via ng-repeat
* can combine multiple "ng-" notations at one DOM node, saves <div>s
format as currency
use filter to format datetime
notice that the timestamp has to include milliseconds!
filters:
* uppercase
* chop string => limit number if displayed characters
order product list by price
filter: ng-src to load images from url in data
another ng-repeat to loop through the images
add some bootstrap classes
add UI tabs
* ng-click sets the value for tab
* ng-init defaults the value for tab to 1
* ng-class adds a class to an element depending on the value of tab
* ng-show toggles the tabbed area depending on the value of tab
change tab handling into a controller
* default via value assignment in controller
* selectTab to change the value
* isSelected to ask what's the value
add more data
add gallery controller
* $index contains the number of the iterator
* ng-click handler to switch between the product images
ng-repeat to output the reviews
make html5 valid
* alternatively you can use gulp to postprocess this: https://github.com/pgilad/gulp-angular-htmlify
2-way data binding with ng-model => form preview updates while filling the form inputs
own form controller
addReview function that adds the review to the array of reviews (no saving, just client-side!) and clears the form
make work when reviews field in data is empty (first review for a product)
basic form validation
* formName.$valid returns if the required fields are ok
* email address field is RFC-checked
* novalidate attributes disables browser's own form validation, we do it with angular :)
form validation handling
auto-insert creation date of new reviews