What You’ll Learn
What is one-time binding in AngularJS?
Why should you use :: for static data?
Performance benefits of one-time binding
Examples of using :: in templates and controllers
1️⃣ What is One-Time Binding in AngularJS?
🔹 The Problem with Regular Binding
In AngularJS, expressions inside {{ }} are evaluated continuously during each digest cycle. Even if the data never changes, AngularJS keeps watching it, leading to unnecessary performance overhead.
For example:
<h1>{{ user.name }}</h1>
If user.name never changes, this still gets checked in every digest cycle.
What is One-Time Binding (::)?
One-time binding (::) ensures that the expression is evaluated only once and then removed from the watchlist.
Syntax:
<h1>{{ ::user.name }}</h1>
Behavior:
- AngularJS binds the value once
- After the first evaluation, the watcher is removed
- No further digest cycles are triggered for that value
2️⃣ Why Use One-Time Binding?
Improves Performance
- Reduces the number of watchers
- Speeds up the digest cycle
- Improves page load times
Best for Static Data
- Ideal for user profiles, labels, configuration settings, etc.
- Works well when data is fetched once and never changes
Reduces Memory Usage
- Prevents unnecessary memory allocation for watchers
- Cleans up the scope more efficiently
3️⃣ How to Use One-Time Binding (::)
1. Using :: in Templates
<h1>{{ ::user.name }}</h1>
<p>{{ ::user.age }}</p>
This ensures user.name and user.age are evaluated only once.
2. Using :: in ng-bind
<h1 ng-bind="::user.name"></h1>
Same as {{ ::user.name }}, but prevents flickering during data loading.
3. Using :: in ng-repeat
<ul>
<li ng-repeat="item in ::items">{{ item.name }}</li>
</ul>
This removes the watcher after the initial population of items.
4. Using :: in ng-if
<div ng-if="::user.isAdmin">
<p>Welcome, Admin!</p>
</div>
Evaluates user.isAdmin once and does not change dynamically.
4️⃣ One-Time Binding in Controllers
Example 1: Fetching Data Once
app.controller("UserController", function($scope, $http) {
$http.get("/api/user").then(function(response) {
$scope.user = response.data;
});
});
Use {{ ::user.name }} in the view to ensure it binds only once.
Example 2: One-Time Binding with $timeout
app.controller("ProfileController", function($scope, $timeout) {
$timeout(function() {
$scope.profile = { name: "John Doe", age: 30 };
}, 2000);
});
Use ::profile.name in the template so that the binding happens only after the data is available.
5️⃣ When Not to Use One-Time Binding
For dynamic data that changes frequently
- Example: Live search results
- Example: Real-time stock price updates
When binding needs to update based on user interaction
- Example: Updating form input fields
6️⃣ Final Summary
| Feature | Regular Binding ({{ }}) | One-Time Binding ({{ :: }}) |
|---|---|---|
| Performance | Slower (always watched) | Faster (evaluated once) |
| Digest Cycle | Runs on every cycle | Runs only once |
| Use Case | Dynamic Data | Static Data |
| Memory Usage | Higher (more watchers) | Lower (watcher removed) |