angular stuff

angular.js

*************************************
directive - html tag marker that tells angular to run a reference on some javascript code

//example
<html ng-app="store"> //this references store module
<body ng-controller="StoreController as store" //sets the controller for html element
<div ng-repeat="product in store.products" //like a foreach for specified collection and uses html element as template
<div ng-hide="product.soldOut" //hides element depending on bool value specified
<div ng-show="product.canPurchase" //shows element depending on bool value specified
<div ng-show="tab === 1"> //can also use expressions for logic
<section ng-init="tab = 1"> //initialize a value
<img ng-src="{{product.images[0].full}}"/> //ng-src supplies img source AFTER expression has evaluated
<a href ng-click="tab = 1"></a> //expression to evaluate
<li ng-class="{active:tab === 3}"> //sets class (in this case it is class 'actice') if the expression is true
********************************

*******************************
modules - pieces of Angular application that you write, can define dependencies between modules

***********************

**********************
expressions - allow you to insert dynamic values into your html

<p>
{{4 + 6}}   //this will render out to display 10 on the page
{{"hello" + " you"}} //this will render out to display "hello you" on the page
</p>
*********

*******************
controllers - these atre where we define our app's behavior by defining functions and values

<div ng-controller="StoreController as store">
            <h1> {{store.product.name}} </h1>
            <h2> ${{store.product.price}} </h2>
            <p> {{store.product.description}} </p>
</div>
***************

***************************
filter - pipe data value into filter

{{data | filter:options}}

{{product.price | currency}}
{{'todo item' | uppercase}}
{{'description' | limitTo:8}} //limits # of characters
<li ng-repeat="product in store.products | limitTo: 3"> //limits # of items shown to 3
<ling-repeat="product in store.products | orderBy:'-price'"> //list prices descending because of "-" in front of price
*********************