$scope
object . The $scope
object is a glue between the controller and HTML.ng-controller
" directive. The ng-controller
directive is used to specify a controller in HTML element, which will add behavior or maintain the data in that HTML element and its child elements.<!DOCTYPE html>
<html>
<head>
<title>AngularJS Controllers</title>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<b>First Name :</b>
<input type="text" ng-model="first_name" placeholder="First Name"><br /><br />
<b>Last Name :</b>
<input type="text" ng-model="last_name" placeholder="Last Name"><br />
<br />
<h4>Full Name : {{first_name + " " + last_name}} </h4>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.first_name = "V V Ramana";
$scope.last_name = "Reddy";
});
</script>
</body>
</html>
Here, the AngularJS application runs inside the <div> is defined by ng-app="myApp".
The ng-controller="myCtrl" attribute is an AngularJS directive. It defines a controller.
The myCtrl function is a JavaScript function.
AngularJS will invoke the controller with a $scope object.
In AngularJS, $scope is the application object (the owner of application variables and functions).
The controller creates two properties (variables) in the scope (firstName and lastName).
The ng-model directives bind the input fields to the controller properties (firstName and lastName).
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Controllers Methods</title>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<div ng-app="myApp" ng-controller="Ctrl_Methods">
<b>First Name :</b> <input type="text" ng-model="first_name" placeholder="First Name"><br /><br />
<b>Last Name :</b> <input type="text" ng-model="last_name" placeholder="Last Name"><br>
<br>
<h4>Full Name : {{full_name()}}</h4>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('Ctrl_Methods', function($scope) {
$scope.first_name = "V V Ramana ";
$scope.last_name = "Reddy";
$scope.full_name = function() {
return $scope.first_name + " " + $scope.last_name;
};
});
</script>
</body>
</html>​
In larger applications, generally the controllers are stored in external files.
Create an external file named "external_ctrl.js" to store controller.
<script type="text/javascript">
angular.module('myApp', []).controller('Extn_Ctrl', function($scope) {
$scope.first_name = "V V Ramana ",
$scope.last_name = "Reddy",
$scope.full_name = function() {
return $scope.first_name + " " + $scope.last_name;
}
});
</script>
<!DOCTYPE html>
<html>
<head>
<title>AngularJS External Controllers</title>
<script type="text/javascript" src="../js/angular.min.js"></script>
</head>
<div ng-app="myApp" ng-controller="Extn_Ctrl">
<b>First Name :</b> <input type="text" ng-model="first_name" placeholder="First Name"><br /><br />
<b>Last Name :</b> <input type="text" ng-model="last_name" placeholder="Last Name"><br>
<br />
<h4>Full Name : {{full_name()}}</h4>
</div>
<script type="text/javascript" src="external_ctrl.js"></script>
</body>
</html>