AngularJS is an open-source JavaScript framework developed by Google for building dynamic, single-page web applications (SPAs).
It extends HTML with new attributes and expressions, making it more powerful and interactive.
⚠️ Note: AngularJS (version 1.x) is the original Angular framework.
The newer version (Angular 2+), also called Angular, is a complete rewrite using TypeScript.
Here we’re focusing on AngularJS (1.x).
⚙️ Why Use AngularJS?
Here’s why AngularJS became so popular:
- 🔁 Two-Way Data Binding — Automatically syncs data between model and view.
- 🧱 MVC Architecture — Separates logic (Model), data (View), and control (Controller).
- ⚡ Single Page Applications (SPA) — No full-page reloads; faster and smoother.
- 🧩 Directives — Extend HTML with custom behavior.
- 💾 Dependency Injection — Manages data and services efficiently.
- 🔄 Reusable Components — Build modular and maintainable code.
🚀 How to Add AngularJS to a Web Page
You can add AngularJS via a CDN link:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="">
<h2>{{ message }}</h2>
<script>
function MyController($scope) {
$scope.message = "Hello, AngularJS!";
}
</script>
</body>
</html>✅ Output:
Displays “Hello, AngularJS!”
🧠 Core Concepts of AngularJS
1. ng-app
Declares the root element of the AngularJS application.
<body ng-app="myApp">
2. ng-model
Binds the value of an HTML input element to an application data variable (two-way binding).
<input type="text" ng-model="name">
<p>Hello {{ name }}</p>When you type in the input box, the paragraph updates automatically.
3. ng-bind
Displays data in an HTML element.
<p ng-bind="name"></p>Equivalent to {{ name }}.
4. ng-init
Initializes application data.
<div ng-init="quantity=2; price=50">
<p>Total: {{ quantity * price }}</p>
</div>Repeats HTML elements for each item in a collection.
<div ng-init="fruits=['Apple','Banana','Mango']">
<ul>
<li ng-repeat="x in fruits">{{ x }}</li>
</ul>
</div>✅ Output:
- Apple
- Banana
- Mango
6. ng-click
Binds a click event to an element.
<div ng-init="count=0">
<button ng-click="count = count + 1">Click Me</button>
<p>You clicked {{ count }} times.</p>
</div>7. Controller
A controller defines the data and behavior for a particular view.
<div ng-app="myApp" ng-controller="myCtrl">
<p>Name: <input ng-model="name"></p>
<h3>Hello, {{ name }}</h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "Raj";
});
</script>8. Filters
Filters format data displayed to the user.
Example:
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ amount | currency }}</p>
<p>{{ name | uppercase }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.amount = 1500;
$scope.name = "raj";
});
</script>✅ Output:
₹1,500.00
RAJ9. Expressions
AngularJS expressions are written inside double curly braces {{ }} and can perform calculations:
<p>{{ 5 + 5 }}</p>
<p>{{ quantity * cost }}</p>🧩 MVC Architecture in AngularJS
| Part | Description |
|---|---|
| Model | Manages the data of the application |
| View | Displays the data (HTML) |
| Controller | Connects Model and View; contains logic |
Example:
<div ng-app="shopApp" ng-controller="shopCtrl">
<p>Product: {{ product }}</p>
<p>Price: {{ price }}</p>
</div>
<script>
var app = angular.module('shopApp', []);
app.controller('shopCtrl', function($scope) {
$scope.product = "Laptop";
$scope.price = 60000;
});
</script>🧰 Summary
| Concept | Description |
|---|---|
| Framework Type | JavaScript MVC Framework |
| Developed By | |
| Key Feature | Two-way data binding |
| Core Directives | ng-app, ng-model, ng-repeat, ng-click, ng-controller |
| Architecture | MVC (Model-View-Controller) |
| Best For | Building single-page applications (SPAs) |
💡 Example – Simple Calculator App
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="calcApp" ng-controller="calcCtrl">
<h2>Simple Calculator</h2>
<p>Number 1: <input type="number" ng-model="num1"></p>
<p>Number 2: <input type="number" ng-model="num2"></p>
<p>Sum: {{ num1 + num2 }}</p>
<script>
var app = angular.module('calcApp', []);
app.controller('calcCtrl', function($scope) {
$scope.num1 = 0;
$scope.num2 = 0;
});
</script>
</body>
</html>✅ Output: Automatically updates the sum as you type.
Great explanation! I ran into an issue with [specific tool/tech], and after reading this, I was able to fix it quickly. Thanks for saving me hours of troubleshooting!
For clarity: I grasped the concept quickly because of this.