angularjsHow do I bind data to an AngularJS controller?
In order to bind data to an AngularJS controller, you can use the $scope
object. $scope
is an object that binds the controller and the view together.
Example
// controller
myApp.controller('myCtrl', function($scope) {
$scope.name = 'John Doe';
});
// view
<div ng-controller="myCtrl">
{{ name }}
</div>
Output example
John Doe
The code above binds the name
property of the $scope
object to the view. The view will output the value of the name
property, which is John Doe
.
Code explanation
myApp.controller('myCtrl', function($scope) { ... }
- This is the controller, which sets up the$scope
object.$scope.name = 'John Doe';
- This is the binding of thename
property of the$scope
object to the valueJohn Doe
.<div ng-controller="myCtrl"> ... </div>
- This is the view, which binds the controller to the view using theng-controller
directive.{{ name }}
- This is the expression that will output the value of thename
property of the$scope
object.
Helpful links
More of Angularjs
- How can I become an Angular expert from a beginner level?
- How can I create an editable AngularJS application?
- How can I use the Yandex Map API with AngularJS?
- How can I use Angular to zoom in and out of a div?
- How do I install Yarn using Angular?
- How do I use AngularJS to zoom in on an image?
- How do I use Angular Zone to run my code?
- How do I use Angular to zip files?
- How do I use Angular Zone to detect and run Angular change detection?
- How do I copy an element in AngularJS?
See more codes...