The
ng-controller directive is defined
in the view, while parsing the page AngularJS creates an instance of the
controller object it refers to, the constructor of the controller object is
automatically invoked and initialization of the $scope object happens in the controllers constructor.
Once the controller in initialized, the reference to the properties and methods deified in the controllers $scope are available in the view.
Controllers play an important role in binding the model and view in MVC pattern.
The below example demonstrated the use of controllers to bind between the model and the view.
<html ng-app>
<head>
<meta charset="utf-8">
<title>AngularJS - Basic</title>
<script src="angular.min.js"></script>
<script>
function nameController($scope){
$scope.FName = 'FirstName';
$scope.LName = 'LastName';
}
</script>
</head>
<body>
<div ng-controller="nameController">
First Name: <input type="text" ng-model="FName"><br/><br/>
Last Name: <input type="text" ng-model="LName"><br/><br/>
Your Name is :{{FName}}, {{LName}}
</div>
</body>
</html>
Notice that the FName and LName properties are defined in the nameController under the $scope object, and are referenced in the view.
When the line <div ng-controller="nameController"> is parsed the controller is initialized and its constructor nameController($scope) is called, which initializes the FName and LName properties.
function nameController($scope){
$scope.FName = 'FirstName';
$scope.LName = 'LastName';
}
Once the controller in initialized, the reference to the properties and methods deified in the controllers $scope are available in the view.
Controllers play an important role in binding the model and view in MVC pattern.
The below example demonstrated the use of controllers to bind between the model and the view.
<html ng-app>
<head>
<meta charset="utf-8">
<title>AngularJS - Basic</title>
<script src="angular.min.js"></script>
<script>
function nameController($scope){
$scope.FName = 'FirstName';
$scope.LName = 'LastName';
}
</script>
</head>
<body>
<div ng-controller="nameController">
First Name: <input type="text" ng-model="FName"><br/><br/>
Last Name: <input type="text" ng-model="LName"><br/><br/>
Your Name is :{{FName}}, {{LName}}
</div>
</body>
</html>
Notice that the FName and LName properties are defined in the nameController under the $scope object, and are referenced in the view.
When the line <div ng-controller="nameController"> is parsed the controller is initialized and its constructor nameController($scope) is called, which initializes the FName and LName properties.
function nameController($scope){
$scope.FName = 'FirstName';
$scope.LName = 'LastName';
}
No comments:
Post a Comment