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. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
Table 1: Core Directives - Data Binding and Display
| 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 |