In AngularJS, a controller is a JavaScript function that manages application data and business logic. It acts as a bridge between the view (HTML) and model (data) by handling user interactions and updating the view accordingly.
1. What is a Controller in AngularJS?
A controller in AngularJS: ✔ Manages application logic and data binding
✔ Controls the behavior of HTML elements
✔ Uses $scope
to pass data between the view and controller
Syntax:
app.controller('MyController', function($scope) {
$scope.message = "Hello, AngularJS!";
});
<div ng-controller="MyController">
<p>{{ message }}</p>
</div>
Here, the controller sets $scope.message
, which is displayed in the view.
2. Creating a Controller in AngularJS
AngularJS controllers are defined using the .controller()
method of an AngularJS module.
Example: Basic Controller
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
$scope.greeting = "Welcome to AngularJS!";
});
<div ng-app="myApp" ng-controller="MyController">
<h2>{{ greeting }}</h2>
</div>
Explanation:
ng-app="myApp"
initializes the AngularJS application.ng-controller="MyController"
attaches the controller to thediv
.- The
{{ greeting }}
expression binds to$scope.greeting
.
3. Using Multiple Controllers
You can define multiple controllers within the same module.
Example: Two Different Controllers
var app = angular.module('myApp', []);
app.controller('FirstController', function($scope) {
$scope.message = "This is the First Controller!";
});
app.controller('SecondController', function($scope) {
$scope.message = "This is the Second Controller!";
});
<div ng-app="myApp">
<div ng-controller="FirstController">
<p>{{ message }}</p>
</div>
<div ng-controller="SecondController">
<p>{{ message }}</p>
</div>
</div>
Each controller maintains its own $scope
, meaning variables are not shared across controllers.
4. Passing Data Between Controllers
To share data between controllers, you can use an AngularJS service or factory.
Example: Sharing Data Using a Service
var app = angular.module('myApp', []);
app.service('SharedService', function() {
this.sharedMessage = "Data from Service!";
});
app.controller('FirstController', function($scope, SharedService) {
$scope.message = SharedService.sharedMessage;
});
app.controller('SecondController', function($scope, SharedService) {
$scope.message = SharedService.sharedMessage;
});
<div ng-app="myApp">
<div ng-controller="FirstController">
<p>{{ message }}</p>
</div>
<div ng-controller="SecondController">
<p>{{ message }}</p>
</div>
</div>
Here, SharedService
provides data to both controllers.
5. Using $scope
in Controllers
Example: Defining Variables and Functions
app.controller('UserController', function($scope) {
$scope.name = "John Doe";
$scope.updateName = function(newName) {
$scope.name = newName;
};
});
<div ng-controller="UserController">
<p>Name: {{ name }}</p>
<input type="text" ng-model="newName">
<button ng-click="updateName(newName)">Update Name</button>
</div>
Explanation:
$scope.name
holds the user’s name.updateName()
updates$scope.name
when the button is clicked.
6. Controller Inheritance (Nested Controllers)
Controllers can be nested, and child controllers inherit $scope
from parent controllers.
Example: Parent-Child Controllers
app.controller('ParentController', function($scope) {
$scope.parentMessage = "Message from Parent!";
});
app.controller('ChildController', function($scope) {
$scope.childMessage = "Message from Child!";
});
<div ng-controller="ParentController">
<p>{{ parentMessage }}</p>
<div ng-controller="ChildController">
<p>{{ parentMessage }}</p> <!-- Inherited from Parent -->
<p>{{ childMessage }}</p>
</div>
</div>
Explanation:
ChildController
inherits$scope.parentMessage
fromParentController
.
7. Using $scope.$watch
to Track Changes
The $watch()
function in AngularJS monitors changes in $scope
variables.
Example: Watching a Variable
app.controller('WatchController', function($scope) {
$scope.count = 0;
$scope.$watch('count', function(newVal, oldVal) {
console.log('Count changed from ' + oldVal + ' to ' + newVal);
});
$scope.increment = function() {
$scope.count++;
};
});
<div ng-controller="WatchController">
<p>Count: {{ count }}</p>
<button ng-click="increment()">Increment</button>
</div>
Explanation:
$watch()
logs the changes whenevercount
is updated.