AngularJS (Angular 1.x) is a JavaScript-based structural framework developed by Google for building dynamic single-page applications (SPAs). It extends HTML's syntax with directives and enables two-way data binding between models and views, allowing the DOM to update automatically when data changes. AngularJS 1.8.3 (released December 2021) is the final official version, having reached end-of-life on December 31, 2021, yet it remains widely encountered in legacy codebases. Understanding AngularJS's declarative approach — where you describe what the UI should do rather than how to manipulate the DOM — is crucial for maintaining existing applications and recognizing the patterns that influenced modern frameworks.
What This Cheat Sheet Covers
This topic spans 19 focused tables and 204 indexed concepts, 110 flashcards. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
A jump-to index of every table row in this cheat sheet.
An interactive map of every table and concept in this topic.
Table 1: Core Directives - Data Binding and Display
These are the directives you reach for constantly — they connect your data to the DOM and decide what shows up on screen. From ng-model's two-way binding to the conditionals (ng-if, ng-show, ng-switch) and the repeaters (ng-repeat, ng-options), this is the everyday vocabulary of declarative templating in AngularJS, where you describe the result and let the framework keep the view in sync as data changes.
| Directive | Example | Description | |
|---|---|---|---|
<input ng-model="username"> | • Binds input, select, or textarea value to a scope property • enables two-way data binding where changes in view update model and vice versa | ||
<span ng-bind="message"></span> | • One-way binds scope expression to element's text content • faster initial render than {{ }} interpolation as it avoids brief flash of uncompiled markup | ||
<div ng-bind-html="trustedHtml"></div> | • Binds and renders HTML content from scope expression • requires ngSanitize module or $sce.trustAsHtml() to mark content safe | ||
<h1>{{title}}</h1> | • Embeds expressions directly in HTML • supports filters and one-time binding with {{::expression}} prefix | ||
<li ng-repeat="item in items"> {{item.name}}</li> | • Instantiates template once per item in collection • creates child scope for each iteration with $index, $first, $last, $even, $odd properties | ||
<select ng-model="sel" ng-options="x.name for x in items"></select> | • Dynamically generates <option> elements for a <select> from array or object• more efficient than ng-repeat on <option> | ||
<div ng-if="isVisible"> Content</div> | • Adds or removes element from DOM based on expression • creates new scope when true; better performance for heavy conditional content than ng-show | ||
<p ng-show="isActive">Text</p> | • Shows or hides element by adding/removing .ng-hide CSS class (display: none)• element remains in DOM; faster toggling than ng-if | ||
<p ng-hide="isHidden">Text</p> | • Hides or shows element • inverse of ng-show; applies .ng-hide when expression is true | ||
<div ng-switch="status"> <p ng-switch-when="active">Active</p> <p ng-switch-default>Other</p></div> | • Conditionally swaps DOM structure based on expression • uses ng-switch-when for cases and ng-switch-default for fallback | ||
<ng-pluralize count="itemCount" when="{'0':'No items','1':'1 item','other':'{} items'}"></ng-pluralize> | Displays locale-aware plural message based on numeric count using en-US pluralization rules | ||
<div ng-class="{active: isActive, disabled: !isEnabled}"> | • Dynamically adds/removes CSS classes • accepts object, string, or array; evaluates on each digest cycle | ||
<div ng-style="{color: textColor, 'font-size': fontSize}"> | • Dynamically sets inline styles • accepts object with CSS properties; property names with hyphens must be quoted | ||
<button ng-disabled="isLoading">Save</button> | Sets the disabled attribute on form controls if expression is truthy | ||
<input ng-model="val" ng-readonly="locked"> | • Sets the readonly attribute on inputs• special directive required since interpolation inside readonly is not allowed | ||
<input type="checkbox" ng-checked="isSelected"> | • Sets checked attribute if expression is truthy• do not combine with ng-model — use ng-model for two-way binding instead | ||
<img ng-src="{{imageUrl}}"> | • Sets src attribute after expression evaluates• prevents browser from requesting literal {{imageUrl}} before Angular compiles | ||
<a ng-href="{{profileUrl}}">Profile</a> | • Sets href attribute after expression evaluates• prevents broken links during compilation | ||
<div ng-include="'template.html'"></div> | • Fetches, compiles, and includes external HTML template • creates new child scope; value must be expression evaluating to URL | ||
<div ng-cloak>{{content}}</div> | • Hides element during Angular compilation • prevents flashing of uncompiled content on page load; removed when compilation completes | ||
<span ng-non-bindable>{{raw}}</span> | Tells Angular not to compile or bind the element's contents — useful for displaying Angular syntax as literal text |