In AngularJS, controllers and scopes are basic concepts that work together to manage application data and behavior in a view. Here is an overview of both proposals.
Controllers
Controllers are JavaScript functions that control application data and behavior. It is defined by the controller functionality provided by the AngularJS
module.
Responsibilities
Business logic- Controllers contain business logic, which controls user interaction and data consumption.
Scope Interaction- The scope is interacted with and data and methods are displayed in the view.
Example
angular.module('myApp', [])
.controller('MyController', function($scope) {
$scope.message = 'Hello, AngularJS!';
$scope.counter = 0;
$scope.incrementCounter = function() {
$scope.counter++;
};
});
In the example above
MyController is a controller that defines $scope.message and
$scope.counter. It also provides an incrementCounter function that modifies the
$scope.counter.
scope
Scopes are objects that define an application model. They act as the glue between
controllers and views.
Every AngularJS application has a root scope, and every controller has its own scope, which inherits from the root scope.
Responsibilities
Data Binding- Scopes provide data binding between controllers and views, ensuring that changes to one are reflected in the other.
Event Handling- Event handling using $emit, $broadcast, and
$on is facilitated
Example
<div ng-controller="MyController">
<p>{{ message }}</p>
<button ng-click="incrementCounter()">Increment Counter</button>
<p>Counter: {{ counter }}</p>
</div>In the example above
ng-controller="MyController" associates the controller with the view, and provides access to the scope properties of
MyController (message, counter, incrementCounter) using double curly braces ({{ ... }}). for data binding and
ng-click to handle events Let's do it.
Also, Read: Custom Filters in AngularJS
Interaction Between Controller and Scope
Binding
- The data defined in scope (
$scope.message,$scope.counter) is automatically accessed in the associated view. - Changes made to the scope properties of the controller are reflected in the view and vice versa due to AngularJS’s two-way data binding.
Method
- Functions defined in scope (
$scope.incrementCounter) can be called directly from the view using AngularJS directives such asng-click.
Life Cycle
- Controllers and their associated scopes are created and destroyed based on the AngularJS application lifecycle, ensuring proper initialization and repair of objects
Example-
Here is a simple example that demonstrates the use of controller and scope in angular js,
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Controller and Scope Example</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- defines the angular controller -->
<div ng-controller="myController">
<div class="container my-4">
<!-- bind the controller data into view -->
<h3>{{ message }}</h3>
<button ng-click="incrementCounter()">Increment Counter</button>
<p>Counter: {{ counter }}</p>
</div>
</div>
<script>
angular.module('myApp', [])
.controller('myController', function($scope, $timeout) {
$scope.message = 'Angular js Controller and Scope example';
$scope.counter = 0;
// function that call on button click
$scope.incrementCounter = function() {
$scope.counter++;
}
});
</script>
</body>
</html>
Output-
AngularJS controllers and scopes are important for organizing application logic and maintaining data bindings between controllers and views. Controllers define data and methods in scopes, which are then accessible and editable in HTML templates using AngularJS directives and data binding syntax. Understanding these concepts is critical to building robust, maintainable AngularJS applications.
Also, Read: Create Custom Services in AngularJS
Leave Comment