AngularJS Tutorial - Views, Controllers and Scope








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.


<!--from  w w w.j a  v  a2s.  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>

The code above is rendered as follows: