Controller is the heart of angularJs. It provides the logic to control the view behavior. Controller is the mediator between model and view.
Controller should not reference or manipulate the DOM (Document Object Model) directly. Ng-controller directive is used to call the controller in angularJs.
Note: In the below code, I will show how to create controller and how to call controller in view file. For shake of simplicity I have kept all the logic in one html file. I hope you can easily separate the code into Model, View and Controller file.
Sample Code for Controller demo in AngularJs
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="../Scripts/angular.min.js"></script>
</head>
<body>
<div ng-app="Myapp" ng-controller="myController">
FirstName : <input type="text" ng-model="FirstName" > <br /> <br />
LastName : <input type="text" ng-model="LastName" > <br /> <br />
Complete Name : {{FirstName + " " + LastName }}
</div>
<script>
// You can keep this Code in separate model folder in JavaScript file
var app = angular.module('Myapp', []);
// You can keep this file under controller folder in JavaScript file.
app.controller('myController', function ($scope) {
$scope.FirstName = "Chandradev";
$scope.LastName = "Sah";
});
</script>
</body>
</html>
Here model is the container for controller and $scope is the glue between controller and View. Controller always belongs to Module.
Other Ways to define the controller
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="../../../Angular Sample/Old Script/angular.js"></script>
<script>
var MyController = function ($scope) {
$scope.Name = "Chandradev"
}
</script>
</head>
<body ng-app="">
<div ng-controller="MyController">
<b> {{Name}}</b>
</div>
</body>
</html>
Summary:
In this article, we learnt the basic concept of controller in AngularJs.
Chandradev's Blog 