In AngularJS, $scope
is a fundamental concept that allows you to create and manage data that can be shared between the controller and the view. Here's a basic guide on how to use $scope
in AngularJS controllers:
Controller Definition:
Start by defining your controller and inject the $scope
service.
javascriptapp.controller('MyController', ['$scope', function($scope) {
// Controller logic goes here
}]);
In the example above, app
is assumed to be the AngularJS module where the controller is defined.
Adding Data to $scope:
You can attach properties and functions to the $scope
object, making them accessible in both the controller and the associated view.
javascriptapp.controller('MyController', ['$scope', function($scope) {
// Adding properties to $scope
$scope.message = 'Hello, AngularJS!';
// Adding a function to $scope
$scope.sayHello = function() {
alert($scope.message);
};
}]);
Binding Data to the View:
Use AngularJS expressions in the view to bind data from the $scope
object.
html<div ng-controller="MyController">
<p>{{ message }}</p>
<button ng-click="sayHello()">Say Hello</button>
</div>
In this example, the {{ message }}
expression will be replaced with the value of $scope.message
. The ng-click
directive binds the sayHello()
function to the button's click event.
Two-Way Data Binding:
AngularJS provides two-way data binding, which means changes in the model (in this case, $scope
) are automatically reflected in the view and vice versa.
html<input type="text" ng-model="name">
<p>Hello, {{ name }}!</p>
In this example, as you type in the input field, the name
property on $scope
will be updated, and the paragraph will dynamically display the updated value.
Remember that with the introduction of AngularJS 1.5 and later versions, the use of controllerAs
syntax is recommended over $scope
. This syntax helps in avoiding common pitfalls associated with $scope
and enhances code readability. However, understanding $scope
is still valuable, especially if you are working with older codebases or tutorials.