Defining Controllers in AngularJS (controller)

Loading

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 the div.
  • 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 from ParentController.

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 whenever count is updated.

Leave a Reply

Your email address will not be published. Required fields are marked *