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
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