Roadmap › AngularJS (1.x) — Legacy › Module: Fundamentals
Lessons in this course (13)
2. Built-in directives
Basic★ Must knowLesson 2 of 13
| Directive | Purpose |
|---|---|
ng-app | Bootstraps the app |
ng-controller | Attaches a controller |
ng-model | Two-way binding for inputs |
ng-bind / {{ }} | One-way output (ng-bind avoids flicker of {{ }}; ng-cloak hides until compiled) |
ng-repeat | Loop (track by for performance) |
ng-if | Adds/removes DOM (creates a child scope) |
ng-show / ng-hide | Toggles CSS display (element stays in DOM) |
ng-switch | Switch-case rendering |
ng-class, ng-style | Dynamic classes/styles |
ng-click, ng-change, ng-submit, ng-blur | Events |
ng-include | Include external HTML template |
ng-options | Build <select> options |
ng-disabled, ng-checked, ng-readonly | Boolean attributes |
ng-form, ng-messages | Forms and validation messages |
ng-if vs ng-show: ng-if removes the element and its scope/watchers (cheaper when hidden, re-creates on show); ng-show only hides with CSS (watchers stay active, cheaper toggling).