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?

Directives that don't manipulate the dom

 

ng-model

 

ng-init

 

ng-controller

Quick Review: ng-model

VIEW

ng-model='fruit'

MODEL

input: 'banana'

{{fruit}} =  'banana'

$scope object

fruit: 'banana'

{{fruit}} =  'banana'

What would we see if we have {{this}} in our view?

Review

VIEW

CONTROLLER

MODEL

$scope object

ng-model='fruit'

fruit: banana

{{fruit}}

$scope.fruit

ng-controller='myController'

ng-app='myApp'

angular-directives

By Zubair Desai

angular-directives

Overview of Angular's Built-in Directives

  • 826