What is Controller in Angular JS
AngularJS application mainly relies on controllers to control
the flow of data in the application. A controller is defined using
ng-controller directive. A controller is a JavaScript object containing
attributes/properties and functions. Each controller accepts $scope as a
parameter which refers to the application/module that controller is to control.
Basically The job of the controller is to build a model
for the view. The controller does this by attaching the model to the scope.
The scope is not the model, it's the data that you attach to the scope is the
model.
In the following example, $scope is not the model. The message property that we have attached to the scope is the model.
In the following example, $scope is not the model. The message property that we have attached to the scope is the model.
myApp.controller("myController", function ($scope) {
$scope.message = "AngularJS Tutorial"; }); |
What is $scope
$scope is a
parameter which is passed to the controller function using the angular
framework. Here we add the model to the $scope object, after that it available
in the view, then in the view we can get the data through the $scope.
Add the controller with the model.
Lets
Understand Controller in Angular JS with an example
1. Go to your visual studio and add a new project then
select a empty template.
2. Now add a folder to your application and paste angular
JS Script. And give the folder name as Scripts.
3. Add a another
script file to the script folder and give it name as “Controller.js” .This file will contain all the custom JavaScript.
In this file create a module and the controller
to this Script file, following is the code for this JavaScript file. Before
that drag and drop the Angualr JS Script File.
/// <reference
path="angular.min.js" />
var app = angular.module('MyModule', []);
app.controller('MyController', function ($scope) {
$scope.firstName = "Munesh";
$scope.lastName = "Sharma";
});
|
4. Now
add a HTML file to write the Operation which we want to perform or we want to
show the output to the end user.
In this
file we have to give the reference for the Angular.min.js
file and the Controller.JS file.so
that this file able to access all the feature and all the function which we
have written in Controller.Js file. And
hive this HTML file name as “Index.Html”
and write the like following
<!DOCTYPE html>
<html ng-app="MyModule">
<head>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/Controller.js"></script>
</head>
<body >
<div ng-controller="MyController">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName +
" " + lastName}}
</div>
</body>
</html>
|
4.
After writing the code in Index.html
file Run your application and see the output as you expected .
5. Another
way to use controller in View , by taking a variable and assign value to this
variable , like following
Code in Controller class
var MyApp = angular.module("MyModule", []);
MyApp.controller("MyController", function ($scope) {
var student= {
Name: 'Munesh Sharma',
Address: 'Jaipur',
Gender: 'Male'
};
$scope.student1 = student;
});
|
Code in index.html
<html ng-app="MyModule">
<head>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/Controller.js"></script>
</head>
<body >
<div ng-controller="MyController">
<div> First Name :
{{student1.Name}} </div>
<div> Address : {{
student1.Address }} </div>
<div> Gender : {{
student1.Gender }} </div>
</div>
</body>
</html>
|
Output will
be like following
Sometimes,on
some browsers changes doesn’t reflect because there “cache “ is not disabled ,
so reflecting the changes disabled the cache
Hit
F12 in your browser to bring up the Developer Tools. Disable the Cache. Reload
your page.
EmoticonEmoticon