AngularJS ( Directives )

Ng-App

Attach the Application Module to the Page

Ng-Controller

Attach a Controller function to the page

Ng-Show

Will show an element if true

• Ex: <button ng-show="product.saleproduct.canPurchase"> Add to cart</button>
• product.saleproduct.canPurchase - Property from the controller

Ng-Hide

Hide an element like a <div>

• Ex: <button ng-hide="product.saleproduct.soldOut"> </div>

Arrays

var saleproducts= [

  {
     name: 'Porche' ,
     price: 295 ,
     desc: "My first car"
   },

  {
     name: 'Audi' ,
     price: 290 ,
     desc: "My second car"
   }

];

Length
To get the size use length
Ex:  product.images.length

To display the array just indicate the element as usual

   <h2> {{product.saleproduct[0].price}} </h2>

Add an element
Use the method push to add
array.push(element);

Add anohter aray
Need to assign the result to an array
array_result = first_array.concat(second_array);

Get a subarray
Use slice indicating the first position to the last position to get
array.slice(1, 7);

Ng-repeat

Display an array according with the view, as a foreach

<div ng-controller="AppController as appController">

<div ng-repeat="product in appController.saleproducts">

<h1>{{product.name}}</h1>

<h2>{{product.price}}</h2>

<p>{{product.desc}}</p>

<button ng-show="product.canPurchase">Add to

cart</button>

</div>

</div>

In this case appController.saleproducts  is the array previously declared

Ng-src

Establish the attribute src

<img ng-src="{{ product.image.globe}}">

if you use src from html cause an error, because tries to load the image before the Expression evaluates.