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>

Click to view the demo





















Home »
  AngularJS »
    AngularJS Example »




Controller
Directives
Expression
Filter
Form
Inject
Scope
Server
Style
Template
Utilities