Views, Controllers and Scope
Description
AngularJS View is based on Directives, Filters and Data Binding.
Controller provides data for View and stores data passed from View.
AngularJS Scope ties the Controller to View, and scope is another term for ViewModel.
$scope
represents the scope object, which is the model for the view.
Example
In the following code we have a controller named SimpleController
.
An ng-controller
references SimpleController
.
When this controller gets initialised the scope gets passed in.
The ng-repeat
is binding to the scope's property. The view gets passed the scope.
<!-- ww w. j a v a 2 s.c o m-->
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</script>
</head>
<body>
<div class="container" data-ng-controller="SimpleController">
<ul>
<li data-ng-repeat="name in names">{{name}}</li>
</ul>
</div>
<script>
function SimpleController($scope) {
$scope.names = ['XML', 'Java', 'CSS', 'HTML'];
}
</script>
</body>
</html>