AngularJS Tutorial
Controller, Scope and View Concepts
We use controllers to control the data that are bound to the View and Scope acts as glue between the View and Controller.
The directive
ng-controller is used to attach the application controller to the DOM and angular will instantiate a new controller object and a new child scope will be available to the constructor of the controller. The new child scope can be injected into constructor as $scope.
Scope is an execution context for the angular expressions and it can watch expressions and propagate events. Scopes also provides APIs to watch the changes in the model and view. Scope ties the view to the controller so that it does not need to know the view and the view does not want to know about the controller.
The following example demonstrates the Controller and Scope concept. Here, we will see how controllers sets the initial state of a $scope object.
<!DOCTYPE html><html><head><title> AngularJS - Controllers and Scope</title></head><body><div ng-app="" ng-controller="blogController"> First Name: <input type="text" ng-model="firstName"><br> Last Name: <input type="text" ng-model="lastName"><br> <br> Full Name: {{firstName + " " + lastName}} <br> Blog Name : {{blogName }}</div><script>//Controllerfunction blogController($scope) { $scope.firstName = "Pankaj", $scope.lastName = "Pushp", $scope.blogName = "Alokic"}</script></body></html>
Application Details:
- The
ng-controller directive is used to attach the the Controller ( blogController, in the above example) to the DOM.
- A new child scope will be available as a parameter to the to the Controller’s constructor function as
$scope.
- The Controller (blogController) set up the initial state of the
$scope object. In our example, we set the initial state by attaching properties like firstName, lastName and blogName
- We use ng-model directive to bind the input fields to the blogController properties.
In the following example we attach the
addEmployee() method to add a new behaviour to the controller. A new item will be pushed to the array of names when we click on the Add button.<!DOCTYPE html><html ng-app><head><title>AngularJS - Controllers and Scope</title><script type="text/javascript"</head><body><div ng-controller="EmployeeController"> Employee Name : <input type="text" ng-model="newEmployee"/> <button ng-click="addEmployee()">Add</button> <h2>Employees</h2> <ul> <li ng-repeat="name in names"> {{ name }} </li> </ul></div><script> function EmployeeController($scope) { $scope.names = [ "Elano Blumer","Iain Hume"]; $scope.addEmployee = function() { $scope.names.push($scope.newEmployee); $scope.newEmployee = ""; } }</script></body></html>
Application Details:
- The
ng-controllerdirective is used to attach the the Controller ( EmployeeController, in the above example) to the DOM. - A new child scope will be available as a parameter to the to the Controller’s constructor function as
$scope. - The Controller (EmployeeController) set up the initial state of the
$scopeobject. In our example, we set the initial state of the $scope with array of names. - We use
ng-repeatdirective to iterate over the employee names array. - We have attached addEmployee() method to add a behaviour to the above application. This line of code (
$scope.names.push($scope.newEmployee);) will push new items in the input field to the names array when we click on the Add button. - The
ng-clickdirective allows you to specify custom behavior when an element is clicked.
we have created a JavaScript file ( placeController.js ) to store the controller used in the application.
<!DOCTYPE html><html ng-app><head></script></head><body> <div data-ng-controller="PlaceController"> Country:<input type="text" ng-model="countryName"/> City:<input type="text" ng-model="cityName"/> <button ng-click="addItem()">Add</button> <ul> <li ng-repeat="item in list">{{ item.country +" : "+ item.city}}</li> </ul> </div> <script src="placeController.js"></script></body></html>
function PlaceController($scope) {
$scope.list = [
{ country: 'India', city: 'New Delhi' },
{ country: 'France', city: 'Paris' },
{ country: 'USA', city: 'California' },
{ country: 'England', city: 'London' }
];
$scope.addItem = function () {
$scope.list.push({ country: $scope.countryName,
city: $scope.cityName });
$scope.countryName='';
$scope.cityName='';
};
}
No comments:
Post a Comment