Skip to content

AngularJS 101

Jump to bottom
tylertadej edited this page Oct 15, 2014 · 5 revisions

Using Angular's built-in directives

AngularJS's essential built-in directives can be easily added to HTML templates to make your theme dynamic.

Wait, what are Directives?

As described in the official docs, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children.

ng-href and ng-src

These look familiar. It’s a best practice to use these 2 directives when using Angular expressions for creating links. By using these attributes, Angular waits for the interpolation to take place, and then activates the link’s behavior. Otherwise a user might end up on a 404 page or a dynamically-loaded image won’t appear.

Example

<a data-ng-href="{{ product.url }}">
  <img data-ng-src="{{ getImagePath(product.imageCollections) }}"
       class="img-responsive"
       alt="{{ product.name }}">
</a>

Official Docs:
https://docs.angularjs.org/api/ng/directive/ngHref
https://docs.angularjs.org/api/ng/directive/ngSrc

ng-repeat

Add this directive to an HTML block to generate repeating elements from an array object like a list of products.

User ng-repeat to easily create a list of:

  • Product thumbnails
  • Navigation breadcrumbs
  • Available product options
  • Entire HTML partials like a product tile

Example

<div class="row">
  <div class="col-xs-12 col-sm-3"
       data-ng-repeat="product in featuredProducts">
    <a data-ng-href="{{product.url}}">
      <div data-ng-include=" 'views/partials/product-tile.html' "></div>
    </a>
  </div>
</div>

In this example, a product grid is generated inside the Bootstrap row. These product tile columns are repeated based on the data available. A product tile template is used inside the repeater to provide the HTML structure for each product tile. More on ng-include later.

Note: The variable "product" from product in featuredProducts is a locally-scoped. You could write foo in featuredProducts - in which case you would use {{ foo.url }} in the scope of that block.

Official Docs:
https://docs.angularjs.org/api/ng/directive/ngRepeat

ng-hide and ng-show

These built-in directives do exactly what they say by applying to visibility classes to your elements. These can be used interchangeably.

When ng-hide evaluates to True or ng-show evaluates to False - the .ng-hide class is added to your element with the property display: none !important

Uses for ng-hide and ng-show:

  • Show a special banner if an item is on sale
  • Show a link to customer reviews if the review count is greater than 1 (or any number)
  • Hide a section of the page if no data is present
  • Show a specific message to the user based on the number of search results

Remember, these elements are still accessible in the DOM. The remove elements completely use ng-if

Example

<div class="th-product-details__price">
  <span>Regular Price: {{ product.pricing.regularPrice | currency }}</span>
  <span data-ng-show="product.pricing.salePrice > 0">
    <span>Sale Price: {{ product.pricing.salePrice | currency }}</span>
  </span>
</div>

In this example, we check to see if a Sale Price is present. If the value is greater than zero the sale price exists and is displayed. We don't want to show the text Sale Price if the field is blank.

Official Docs:
https://docs.angularjs.org/api/ng/directive/ngShow
https://docs.angularjs.org/api/ng/directive/ngHide

Further Reading:
http://scotch.io/tutorials/javascript/how-to-use-ngshow-and-nghide

Clone this wiki locally