Angular's Built-in Directives

Organized
 

Familiar-ish

di·rec·tive

/dəˈrektiv/

noun

an official or authoritative instruction

ng-something

The old way...

<% for(var i = 0; i < things.length; i ++;) %>
   <li><%= things[i] %></li>
<% end %>

The really old way...

// app.js
var element = document.querySelector('ul');

for (var i = 0; i < things.length; i++) {
  var li = document.createElement('li')
  var thing = document.createTextNode(things[i])
  li.appendChild(thing)
  element.appendChild(li)
}

<!-- index.html -->

<ul><ul>

The Angular way!!

<li ng-repeat='thing in things'> {{thing}} </li>

Built-in Directives

Directives are Angular's way of extending HTML. Angular uses directives to add functionality to HTML elements and attributes.

Common Directives

• ng-repeat
   
• ng-show
   
• ng-hide

• ng-if
   
• ng-class

ng-show / ng-hide

<div ng-show="3 + 4 == 5">
  3 + 4 isn't 5, don't show
</div>


<div ng-hide="3 + 4 == 5">
    3 + 4 isn't 5, don't hide
</div>

ng-if

<div ng-if="3 + 4 == 5">
  3 + 4 isn't 5, don't show
</div>

same as ng-show?

Let's fiddle!

clone this repo: 

https://github.com/gSchool/angular-builtin-directives-lecture-support